Overview

Sometimes learning and working with javaScript brings lots of confusion among the developers due to its tricky behavior. The big reason behind this struggle is not knowing the javaScript concepts that are responsible behind that sort of behavior.

In this blog post we are discussing those 5 concepts that help you out the unaware behavior and also going to help you out in debugging your application much faster.

1. Hoisting

In the tricky behavior of javaScript, Hoisting is the one that reserve the top position. Before you understand what actually hoisting is, first we see one example and you try what can be the output for that.

message = "Welcome the JavaScript"; // initialization
console.log(message); // console log
var message; // declaration

After seeing this code, we most of the time thinks that it will generate an error.

Hoisting refers to the process in which all the variable and function declaration move to the top of their scope during execution of the code.

In the above code, the declaration i.e. var message is move to the top of the code while execution. So, after execution the code look something like

var message; // declaration
message = "Welcome the JavaScript"; // initialization
console.log(message); // console log

let and const does not support hoisting due to its initialization at the time of their declaration behavior.

2. Coercion

Coercion is the another tricky concept that most the developer at starting face difficulty to find out. It is also known as falsy value. Lets see first an example and try to answer it.

const num1 = 5;
const num2 = '6';

const sum = num1 + num2;
console.log(sum);

Output must gives an error according to java and other programming language. But this is javaScript. Lets check what coercion actually mean.

Coercion is the process of converting value from one data type to another. It is an automatic and implicit behavior.

So, according to above statement, num2 which is actually a string datatype converts to integer when we perform addition operation.

3. Context

Context is one of the misuse concept which is interchanged with the scope. But this can be true but with certain condition.

In JavaScript, Context refers to an object , the keyword this refers to an object. Now the main condition comes into play that creates confusion.

1. When the function is execute at global context, this refers to the global and window object.
2. When the function is a method of an object, this refers the that object.

4. Closures

Closures refers to the process when the function is defined inside the another function.

It gives you the access of the outer function scope from an inner function scope. For Example

function welcome() {
    var message = "Welcome";
    function message() {   // closures
         // access outer function scope
        console.log(message + " to JavaScript");
    }
}

Closures are created every time a function is executed, at the function creation time.

5. Scoping

Scope in JavaScript refers to the current context of the code, which determines the accessibility of variables to JavaScript.

There are two type of scope:

1. Global Scope that is declare at the top level or outside the block.
2. Local Scope that is declare at the inner level or inside the block.

let welcome = "Welcome"; // global scope

function welcomeMessage() {
    let message = "to JavaScript"; // local scope
    console.log(welcome + message);
}

welcomeMessage();

Conclusion

The confusion not ends here. There are many differences that create confusion for example let vs var vs const, splice vs slice, forEach vs .map(), etc. In another blog post we will discuss all these comparison that help you out in clearing the concepts.

Subscribe to the newsletter to read more blogs on javaScript concepts.