Mysterious Javascript

some weird parts of javascript

Photo by Tracy Adams on Unsplash

Scope: I am not here to give you a boring definition. In simple plain English, scope refers from where you can access the variable

Let’s see an example:

In the above example, the variable name is accessible from the sayHi function. as name is situated in the global scope(it is not declared in any other function), it can be used by anyone.

Okay, what is the local scope? Let’s see an example first, then we will discuss

here you can see, age is declared inside sayHi function. and one line number 8 I am trying to access the variable age. But It will throw a reference error, because, the variable age is scoped to sayHi function.

so, when I try to access it outside of the sayHi function, it is no more available. As I said before age is scoped to sayHi function, hence it is called local scope

Hoisting: Before any talk, let’s see a quick example:

can you guess what will print on the console? You may say it will throw a reference error. But, actually, it will print undefined Because Javascript executes its program 2 phase. one is compilation phase another one is execution phase In the compilation phase, it will read all the variables. In the above example, it will read like that there is a variable called nameand that's it.
It didn’t know what is the value of the name in the compilation phase.

After finishing the compilation phase, it starts the execution phase At first, the line will see a console.log and it executes that. As I said earlier after the compilation phase the value of the name remains unknown. that's why it will print undedined

Spread Operator: spread operator was introduced in ecmascript6. This operator is very handy. It is frequently used to copy arrays/objects.

Let’s see an example:

As you see, in line number two, the copied version of arr1 is stored in arr2. Another use case of spread operator is array merging. Sometimes we want to merge two arrays into one. we can easily do that with the help of spread operator.

so, now two arrays (arr1, arr2) are merged into arr3

Rest Operator: Rest operators look the same as Spread operators. But actually, they are not the same. Suppose, we want to pass 3 arguments in a function, but the function can receive only one argument. In this scenario, rest API can be helpful.

In the above example, 3 arguments have been passed while calling the function. But the function has only one parameter. In this case, we can put three dot ... before the function parameter. after that names the variable will become an array of arguments(in this case, three-person name)

Primitive Types and Object Types: There are six types of primitive types in javascript. Those are:

• number
• string
• boolean
• undefined
• null
• Symbol

Everything that is not a primitive type is an object. Functions are objects, too. We can set properties and methods on functions.

Try Catch: developers are also human beings. so they do mistakes. we need to handle those. we can easily handle those errors, by wrapping the code inside try..catch block.

imagine, you want to request an API resource, so if the API throws an error, your app will crash. But if you wrap the request inside a try, catch block, you can handle the error with ease.

Closure: many videos and blogs represent closure in a very complex way, But IMO it is not very complex. In plain simple English, when a function is returned from another function, the returned function remembers the scope of its outer functions, hence the returned function can get access to the variables of the outer function.

well, in line number 6, I am calling makeAdder function, and it returns another function. that's cool. But, in line number 7 I am calling the returned function (I named it add5). Now, the question is how add5 function get access to variable a? This is the power of the closure. If you are still confused, I recommend you read this again.

Type Coercion: Let's see an example:

var x = 99;
x == "99" // true;
x === "99" // false

We can see that, == performs type coercion while === doesn't. It is safer to use === Trust me, It can save your life!

Immediately Invoked Function Expressions IIFEs:
In JS we can invoke the function at the time of its creation. Let’s see an example:

Callback Function: callback function is a function you give to another function, to be run when the other function is finished.

So, the function you call(i.e. invoke) calls back by calling the function you gave it when it finishes.