Arrow Functions

Arrow functions are a concise way to write functions in JavaScript. They provide a shorter syntax compared to traditional function expressions.

Syntax

The syntax for defining an arrow function is as follows:

(parameters) => { // function body };

Or even shorter if the function contains and returns single expression.

(parameters) => expression

Examples

Multiline arrow function

const printNumberType = (num) => { if (num % 2 == 0) { console.log('Even'); } else { console.log('Odd'); } } printNumberType(3); printNumberType(4);

This arrow function code is the same as:

function printNumberType(num) { if (num % 2 == 0) { console.log('Even'); } else { console.log('Odd'); } } printNumberType(3); printNumberType(4);

Output:

Odd Even

Single line arrow function

const multiplyBy2 = (num) => num * 2 console.log(multiplyBy2(10));

This arrow function code is the same as:

function multiplyBy2(num) { return num * 2 } console.log(multiplyBy2(10));

Output:

20

This Context

Inside arrow function this points to the parent scope.

Let's look at the following example:

let person = { firstName: 'Alex', lastName: 'Joe', printGreetingsArrow: () => console.log('Hello, I am ' + this.firstName + ' ' + this.lastName), printGreetingsTraditional: function() { console.log('Hello, I am ' + this.firstName + ' ' + this.lastName); } }; person.printGreetingsArrow(); person.printGreetingsTraditional();

Output:

Hello, I am undefined undefined Hello, I am Alex Joe

Both arrow and traditional function use this. This inside arrow function points to the parent which doesn't have properties firstName and lastName. That's why undefined is printed for their values.

This inside a traditional function points to the current scope. That's why the object's properties values - Alex and Joe are printed since this points to the object scope.

Another way to understand it is via the following example:

let person = { firstName: 'Alex', lastName: 'Joe', printGreetings: function() { console.log('Hello'); let nestedObject = { age: 24, firstName: 'Smith', lastName: 'James', presentArrow: () => console.log('I am ' + this.firstName + ' ' + this.lastName), presentTraditional: function() { console.log('I am ' + this.firstName + ' ' + this.lastName); } }; nestedObject.presentTraditional(); nestedObject.presentArrow(); } }; person.printGreetings();

Output:

I am Smith James I am Alex Joe

The this keyword inside the function presentTraditional points to the current scope so it has the values 'Smith' and 'James' for the properties firstName and lastName.

The this keyword inside the function presentArrow points to it's parent scope so it has the values 'Alex' and 'Joe' for the properties firstName and lastName.

If at line 4 we change the function declarations from traditional to arrow, then the presentArrow function would have undefined values for the properties firstName and lastName since this would point to the global scope inside the function printGreetings.