Arrow functions - JavaScript

4 differences between regular functions and arrow functions:

1. Syntax

Regular function:

function multiply(num1, num2) {
    return num1 * num2;
}

Arrow function:

const multiply = (a,b) => a * b;

Note some differences in the syntax – Arrow functions are:

• Defined with ‘=>’
• No function keyword
• do not always need {}
• Implicit ‘return’ keyword

*If only one parameter, the parenthesis is not needed

2. Hoisting

Regular function:

sayHello(); 
//=> Hello!
function sayHello() {
    console.log(“Hello!”);
}

Arrow function:

sayHello();
//=> sayHello is not defined 
const sayHello = () => console.log("Hello!");

In this case, calling the respective function prior to defining them only worked for the first example due to hoisting. As noted here, functions expressions (arrow functions) are not hoisted, meaning that you can only call the function after it has been declared.

3. Callback functions / anonymous syntax

Regular function:

function squareNum(num) {
  return num * num;
}

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(squareNum);
console.log(squaredNumbers);
//=> [1, 4, 9, 16, 25]

Arrow function:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers);
//=> [1, 4, 9, 16, 25]

4. Lexical scope ‘this’

Regular function:

const person = {
  name: Alice,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
 };
person.sayHello();
//=> Hello, my name is Alice

Arrow function:

const person = {
  name: Alice,
sayHelloArrow: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
}
person.sayHelloArrow(); 
//=> Hello, my name is undefined

As observed, only in the first example the keyword ‘this’ was able to access the person object through the ‘name’ property (//=>‘Alice’). The same does not happen with arrow functions, since the arrow function does not have its own ‘this’ value, inheriting ‘this’ from the enclosing lexical scope, in this case is the global object which does not contain a ‘name’ property; therefore, returning ‘undefined’.

Conclusion:

Those are some differences and in most cases the benefits of arrow functions involve – 1- Allow us to write a shorter function syntax. 2- Avoid issues with hoisting. 3- Make it easier to write concise and reusable callback functions, especially for array operations. In the other hand, 4- arrow functions can be tricky to use when having the keyword ‘this’, therefore, is important to ensure that the ‘this’ value is correctly bounding to the object that the method is called on.