These 4 JavaScript Concepts Every Developer Should Know

JavaScript is one of the most popular programming language in the world. At present, JavaScript is being used in Front End and Back End. JavaScript is a client side language, but after the advent of Node JS, it is being used extensively in the Back End.

In this post, we will discuss 4 such concepts of JavaScript which are very essential to master JavaScript.

1. Scope

To become a good developer in JavaScript, it is very important to have knowledge about Scope. We can consider the scope as a box. This box has some boundaries. We can do anything within the boundaries of the box. But what will be inside the boundaries of this box, we will not get it outside the boundary of the box. Whatever we define in this box as variables, objects and functions, we will be able to use them only inside the box. That is, their scope will be limited to the box only. Which we will call local scope.

Similarly, whatever is outside this box, we can use it both outside and inside the box, it will be called global scope.

Thus there are two types of scope - local and global.

The variables, objects and functions that are defined in local scope cannot be accessed in global scope. Whereas the variables, objects and functions that are defined in global scope can be easily accessed in local scope.

We can understand this through an example. We created a function named helloUser() and defined a variable named user in it. When we try to access this variable outside this function then we get error but this variable works well inside the function.

Similarly, if we take another variable and define it outside the function, then you will see that we are able to access this variable easily. 

let admin = 'Hello Admin';

function helloUser() {

let user = 'Hello User';

}

helloUser();
console.log(admin); // Output: Hello Admin

console.log(user); // Output: it shows error like 'user' is not defined code-box

2. Closures

A closure is a function that is inside another function. A function that is inside another function can access variables defined inside its parent function. Whereas the outer function cannot access the variables defined inside its inner function.

function outerFun() {

let outerFunVar = 'Outer Function Variable';

function innerFun() {

let innerFunVar = outerFunVar;

console.log(innerFunVar );

}

innerFun();

}

outerFun(); code-box

3. IIFE

IIFE means Immediately Invoked Function Expression, are JavaScript functions defined as expressions that are immediately invoked and executed as soon as they are defined. Variables that are declared within an IIFE are unable to be accessed externally.

The syntax of IIFE :

(function(a,b){

return a + b;

})(2,3); code-box

We can also use an arrow function to define an IIFE :

( (a,b) => {
return a + b;
} )(4,5); code-box

4. Hoisting

Hosting is a feature of JavaScript that is essential to be aware of. Many times developers get unexpected results without the knowledge of hosting.

In JavaScript, we are able to call a function before it is defined without getting a ReferenceError. 

JavaScript interpreter moves variable and function declarations to the top of the current scope (whether local or global) prior to execution. 

We can understand this well by the example given below:

// Call a function

ourFunction();

//Define a function

function ourFunction() {

console.log('This is Our Funtion');

} code-box