Arrow Function is an alternative of function expression with a difference in syntax and cannot be used in all cases. If you haven't read about functions expression in javascript yet, I would recommend you to read this before continuing any further. Now, let's try to understand arrow functions with respect to it's syntax, execution, scope and hoisting along with code examples.

1. Syntax

const arrowFunctionSyntax = () => {
  console.log("Hi, I am an arrow function");
}
arrowFunctionSyntax();

In the above code example, we can see that arrow function is similar to function expressions as they are being assigned as a value to a variable. The major difference is the way in which the function is written. Following are the observations from the above code that we can make based on it's syntax

1. It does not contain the function keyword.
2. It does not have a function name which means that these are anonymous function.
3. An arrow => symbol is being introduced

const arrowFunctionWithOneParam = number => number + 1;
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => {
  let sum = numberOne + numberTwo;
  return sum;
}
console.log(arrowFunctionWithOneParam(5));
console.log(arrowFunctionWithMultipleParams(5,6))

If we observe both arrowFunctionWithOneParam and arrowFunctionWithMultipleParams, we can find difference in three things - parenthesis (), block {} and the usage of return keyword. According to the syntax of arrow function, parenthesis() can be ignored if the function just accepts one parameter, block{} can be ignored if the function contains only a single statement and finally the return can also be ignored if the function contains only a single statement.

2. Execution

const arrowFunctionExecution = () => {
  console.log("Hi, my execution is similar to normal function");
}
arrowFunctionExecution();

When it comes to the execution of an arrow function, they execute in a similar manner as that of any normal function. When the JS engine executes arrowFunctionExecution(), it creates a function execution context and gets pushed to the call stack. As soon as the execution context is created, it initiates the creation phase. In this phase, it will create the arguments object and declare all the variables in it's local memory heap. The major difference when compared to the normal function is the declaration of this. Arrow function does not have a this variable of their own. this when used inside an arrow function get's lexically resolved. Soon after the creation phase, the execution phase get's initiated. This is the phase where it executes the statement console.log() and prints "Hi, my execution is similar to normal function" to the console.

3. Scope

const arrowFunctionScope = () => {
 console.log("Hi, my scoping rules works similar to function expression")
}

These functions follows the same scoping rules as that of any function expression. These functions have their own scope and any variables declared inside the function cannot be accessed outside the function. These functions are also not suitable for call, apply and bind methods, which generally rely on establishing scope. If in case you haven't read about scopes in javascript yet, I would recommend you to read this

4. Hoisting

amIGoingToBeHoisted();
var amIGoingToBeHoisted = () => {
  console.log("The answer is NO");
}

Arrow functions are not hoisted as they are also function expressions where the function is assigned as a value to the variable. When the JS engine executes the above code, in the creation phase the declaration statement var amIGoingToBeHoisted will be moved to the top and initialised with a value undefined, leaving the initial value behind. During the execution phase, it will throw a type error when it encounters the statement amIGoingToBeHoisted as it's value is undefined, which is not a function type after hoisting. To know more about hoisting in javascript, I would recommend you to read this.

I hope this clears how arrow functions works in Javascript. If you feel this article was useful, please do show your love and share this to your fellow beings. Always feel free to connect with me on twitter, linkedIn or email.

Until we meet again, The Mallu Dev signing off 👋 Cheers 🥂