“A fool with a tool is still a fool” — Grady Booch
Working on a Tool without knowing and understanding its core, and its functionality always lead to face problems and failures. This is the actual problem with every beginner, Including me, when I took my first step towards technology world.
Working on a project, googling the errors and solutions It's not what makes you a programmer. Programming is all about Innovations, Ideas, build & improve logical skills.
Before working on any Programming language always understand its behavior first, Deep dive into it, Build some logics by solving scenarios. So that's what I experienced as a beginner Now let's explore some weird sides of JavaScript. I will be not able to cover all the concepts in one article but some of are these as follows :)
Table of content
- Synchronous & Asynchronous Behavior
- Execution Contexts & Execution Stack
- First Class Functions
- Higher Order Functions
- Closures
1: Synchronous & Asynchronous Behavior
JavaScript is synchronous and single-threaded but it behaves asynchronously as well. Sounds weird? Let's explore. Synchronous languages are those in which only one operation can run at one time, or executing code line by line.
For example :
Above example shows the synchronous behavior of JavaSrcipt. But what we need to execute no. 2 at the end ? This problem cab be overcome by asynchronous behavior of JavaScript
This will actually log “1 3 2”, since the “2” is on a setTimeout function which will only execute, after two seconds. Your application does not hang waiting for the two seconds to finish. Instead, it keeps executing the rest of the code and when the timeout is finished it returns to afterTwoSeconds.
This is how JS asynchronously behaves .
2: Execution Context and Execution Stack.
Execution context is defined as the environment in which JavaScript code is executed. Duhh. What ? 😕
Example:
The code which is outside any function is in Global Environment.
The code inside any function is in Local Environment.
Execution Stack .
The collection of local and global environment is called Execution Stack.
Note:
The local environment dies whenever a function returns something. Its existence is removed from execution stack.
Its no longer available for another function or for global environment. Get it?
Lets deep dive.
Consider, we have two functions a and b
The job of function a is to console.log its argument. Thats it.
The job of function b is, call function "a" and share its own variable with function a.
The function b is alive because it does not return anything. The function b’s variable is available for other functions.
But what if function b returns something and then send its variable to function a ?
Now as expected, function “a” cannot use variables of function "b" because function b is died. Its execution context has been destroyed.
This is how JS behaves.
3: First class functions
JavaScript is a functional programming language, in which functions are treated as any other variables.
- You can store a function in a variable, object and arrays
- You can pass function as an argument, (Callbacks)
- You can return a function through another function as well .
This makes playing with functions easy and interesting.
2. Pass functions as arguments — CALLBACKS
One of the most important concept to be comfortable with.
Let's try to understand below example.
What it does :
1.”processUserInput” executes, it does its first job (asking a user for its name and store name in variable “name”)
2 “processUserInput” now does its second job (calling a function “callback” that it takes as its argument, and passes name in it that we took from user.)
3.Now “callback” function executes, does its job (alert the varibale we sent into it).
This is how we use functions as an argument .The function that is used as argumennt is called CALLBACK.
3: Pass a function as an argument or return a function through another function (Higher Order Functions)
5 . Closures
Now it's time to take breath, 😌
Closures in JavaScript are one of those concepts that many struggle to get their heads around.
A closure is an inner function that has access to the outer (enclosing) function’s variables
As we have learnt above in execution context section, that a function can share its variable until its alive (if it doesn't returns anything). Simple Enough? It's not the end, Consider the following example.
Dayuuum. Magic ? 😃 A function is died(it has returned something),but still another function is using its variable .
This is the power of closures.
— Closures allow JavaScript programmers to write better code. Creative, expressive, and concised
That’s it. Go write some code.
If this was useful, please hit the claps and feel freed to share with others ❤️
Top comments (1)
Great start, Aiman. Keep it coming. There are some minor issues but don't worry about them, the more you will write, the more you will get better at writing.