Functions hoisting in JavaScript

Yahya Gok
3 min readMar 4, 2021

We have three ways to declare a function in JavaScript

1-) function declaration

2-) function expression

3-) arrow function

1-) function declaration

Function declaration is a traditional way to write a function with function name like this traditional way.

We could be able to execute the function above this code or below this code.

On picture 1, We are executing the function before writing the function, This way is called hoisting.

being executed before the function. (picture 1)
being executed after the function.(Picture 2)

With this above two function, result would be 6 here with no issue.

2-) function expression

Function expressions are assigned to a variable, and can be anonymous. That is how we type function expression below code as an example.

If need to execute this function we need to run it after the function.

if we run this code, we will be having error, saying that cannot access to multiple before initialization. we have to run the multiple(2,3) after the function. Like this above code will run with no issue.

If we declare a function expression we should be able to think hoisting. We don’t have hoisting option with function expression.

3–) Arrow function

arrow functions are hoisted which means that we can’t also run code before declaring the function. Those above code show how can we write it.

We can also declare it, without using return and brackets. Like this below.

References

https://blog.logrocket.com/anomalies-in-javascript-arrow-functions/#:~:text=Arrow%20functions%20cannot%20be%20used,called%20with%20the%20new%20keyword.&text=Hence%2C%20the%20prototype%20property%20does,it%2C%20will%20throw%20an%20error.

--

--