Hoisting in JavaScript and some more concepts

JavaScript moves all the declarations at the top of the scope before executing the code. This behavior is called hoisting. In this article, we will learn about JavaScript’s hoisting behavior.

Variable Hoisting

Before executing your code JavaScript engine moves all the variable declarations at the top of the scope.

console.log(name) // undefined
var name = 'Ashik'
console.log(name) // Ashik

Here the first line doesn’t throw an error because the variable declaration of name is moved at the top before executing. In JavaScript, variables which are not initialized has a default value of undefined .

The let keyword

Variables declared with let keyword are hoisted but not initialized with value undefined . Therefore unlike var declarations they will throw an error when used before initialization.

console.log(name)
let name = 'Ashik'
console.log(name)

Running this code will throw following error:

"ReferenceError: Cannot access 'counter' before initialization

Wondering will it throw the same error if the variable is not declared? Let’s check that out

console.log(age) // "ReferenceError: age is not defined
let name = 'Ashik'
console.log(name)

That throws a different error.

Function Hoisting

Function declarations are also hoisted in JavaScript.

console.log(add(5, 10)); // 15
function add(a, b) {
return a + b;
}

Notice that, we used the function in first line and then wrote the function body. We get the expected output because the functions are hoisted at the top of the scope.

Arrow Function

Although regular functions are hoisted in JavaScript, the arrow functions are not hoisted.

const result = add(5, 19); 
console.log(result);
const add = (a, b) => {
return a + b;
};

When we run the code snippet we get

ReferenceError: Cannot access 'add' before initialization

That’s because arrow functions are not hoisted in JavaScript. Hence it can not be used before initialization.

Event Bubbling

When an event is triggered from an element, the event handler / event listener tied to that event is called. When an event is fired on an element that has parent elements, it runs through a “bubbling” phase. During the “bubbling” phase, the browser checks to see if the element that triggered the event has an event handler registered to it. If it does, it runs the event handler. If it does not, it moves to the parent element and checks if it has an event handler registered to it. The browser continues to move up the chain of parent elements, checking for and executing registered event handlers, until it reaches the root element.

Value of “this”

this refers to the value of the object that is currently executing or invoking the function. I say currently due to the reason that the value of this changes depending on the context on which we use it and where we use it.

IIFE

An IIFE or Immediately Invoked Function Expression is a function that gets invoked or executed after its creation or declaration.

Functional Programming

Functional Programming is a declarative programming paradigm or pattern on how we build our applications with functions using expressions that calculates a value without mutating or changing the arguments that are passed to it.

Callback function

A callback function is a function that is passed as an argument to another function, to be “called back” at a later time.

‘strict’ mode

The most important answer here is that use strict is a way to enforce stricter parsing and error handling on your JavaScript code at runtime voluntarily. Code errors that would otherwise have been ignored or would have failed silently will now generate errors or throw exceptions. In general, it is a good practice.

Generator function

Generator functions are a new feature in ES6 that allow a function to generate many values over time by returning an object which can be iterated over to pull values from the function one value at a time.

Conclusion

JavaScript hoists variables and functions. But to be on the safe side, we should avoid using variables and arrow functions before initialization.