Can we use Hoisting with Arrow function ?

In this article we will see how does exactly Hoisting works using both normal function as well as arrow function in JavaScript.

Arrow function: Arrow function introduced in ES6, provides a concise way to write functions in JavaScript. Another significant advantage it offers is the fact that it does not bind its own. In other words, the context inside arrow functions is lexically or statically defined. We may also define arrow functions as this is a fat arrow syntax which reduces efforts of any user in order to declare function with traditional long syntax.

Hoisting: In JavaScript, Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution. Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

Syntax: Let us have a look over the below illustrated syntaxes for creating an arrow function in JavaScript:

1. Using var:

var geekforggeks = (argument1, argument2, ...other_arguments) => {
    // body
}

2. Using let:

let geekforggeks = (argument1, argument2, ...other_arguments) => {
    // body
}

3. Using const:

const geekforggeks = (argument1, argument2, ...other_arguments) => {
    // body
}

Like all other functions in JavaScript, the arrow function is not hoisting the main reason that you cannot call them before initialization. Because hoisting is the by-default action of moving all the declarations at the top of the scope before the execution of code. JavaScript allocates memory for all its variables. So it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local. The other reason is that the arrow function is anonymous function or function expression

Now lets us understand this by taking some of the examples:

Example 1: In this example, we show that we can access the function before defining the function. If you call variable before the initialization then it will not throw an error rather it gives undefined as output. It means that the value is not defined.  Here we have used a normal function instead of an arrow function.

Output:

Explanation: So we can access the variable name input1  then it throws the undefined in the console of the browser. The main reason for throwing the undefined in JavaScript is reserved for the memory of x and place the special placeholder undefined to it 

Example 2: In this example, we will show that if we use the arrow function (with the syntax illustrated above using var keyword itself) and then if we want to access the value then it will throw the uncaught TypeError in the console of the browser. 

Output: 

Explanation: Now it shows throw an uncaught type error that gfg2 is not a function. The reason is that gfg2 behaves like another variable and it allocated the memory with a placeholder like undefined.