All about JavaScript – Part II – Logical Concepts and Basics

I hope you have gone through Part – I. If not, please have a look.

What all can JavaScript do ?

JavaScript basically exists for 4 types of Functionalities :-
1) Document Manipulations
2) Normal Business Logic
3) Document Events
4) Asynchronous Tasks

Let us pick each one, one by one :-

1) Document Manipulations

This allows us to modify the Page Elements, as in, We can add, modify or remove WebPage Elements. Let’s see with an example :-

Let us assume we have a ‘div’ element, with an id ‘myElement’, and you want to update the content inside the tag

A simple JavaScript statement to do this would be :-

So, the new ‘div’ looks something like :-

I would be sharing all different ways in which DOM Elements can be modified, in a separate post.

2) Normal Business Logic

This is like any other programming language. You got loops, conditional blocks, methods (functions), variables etc. If you have ever done programming, this is it. There are a few other things to be taken care for JavaScript, some concepts applicable only to JavaScript. These include :-

a) Prototyping
b) Concept of Functions as Objects.
c) JavaScript Object Notation (JSON).
d) The JavaScript Event Loop.
e) Usage of ‘var’, ‘let’, global and local variables, their scope.

Again, separate post for that.

3) Document Events

Because JavaScript was meant for User Interaction, it is supposed to react to User Events. These events include :-
a) Mouse clicks, like ‘Right Click’, ‘Left Click’, ‘Mouse Key Up’, ‘Mouse Key Down’ etc.
b) Keyboard events, like ‘Key Press’, ‘Key Up’, ‘Key Down’, ‘Combination of keys, like Ctrl+C’ etc.
c) Page Scroll Events, that is, when somebody scrolls through the page.

The idea is simple – “Do ‘something’ when ‘this’ event happens”. This ‘something’ can any of the 4 kinds of functionalities defined here.

4) Asynchronous Tasks

A few philosophical one-liners to get started here :-

You will not get what you want, when you want it.
There’s always a time for everything.
Nobody gets anything, before their time.

Same applies in Real World Applications too!

Let us take an example :-

I want to show the RealTime Price, of a stock on the WebPage, say code XYADI. Now, I have an API that takes the code, and returns the price. The problem is, sometimes, it can take up to 30 seconds to respond.

Now, remember, that JavaScript is single-threaded. There is only ever going to be one thread! If JavaScript gave a Blocking implementation for API calls, our pages would freeze from time to time, and User Experience will go down the drain. So, what to do ?

Meet ‘Asynchronous Tasks’, and its driver, ‘Callbacks’. A Callback is just a method, which can be passed between methods, and can be executed when required. For eg:

We can pass this method between methods, as arguments, like below :-

The output is : “Hello World! with Thor”

Note, that ‘myCallback’ has been passed as an argument to myMethod, and inside myMethod, called as someCallback. So, we are simply treating a method like any other variable. And hence, A method in JavaScript, is an object.

Coming back to Asynchronous Tasks, the idea is pretty simple, and very intelligent!

Recall, that JavaScript runs in a single-threaded environment. Means, there is only one thread! And we cannot block this thread for any I/O Operation, i.e., an API call. So, the concept of an Event Loop was implemented.
There is ‘one thread’, which ‘loops’ through this ‘Event Queue’, ‘Popping’ tasks from the queue, and ‘Executing them’. Every code that needs to be executed, has to be added to this queue. So, as soon as an API call is made, and its response received, a ‘Callback’, which knows how to handle this response, is added to the Queue, and gets executed when its turn comes. This means that the callback might not be executed as soon as API response is received, but the overall implementation becomes extremely efficient!

These are the 4 kinds of functionality given by JavaScript, in a nutshell. In future posts, I will get into the Programming Concepts of JavaScript. Stay Tuned!