JavaScript Arrow Function

Arrow functions, introduced in ES6, provide a concise syntax for writing functions. They differ from regular functions in how they handle this.

Before Arrow:

Traditional functions can be verbose and sometimes confusing when dealing with this.

Example:

const numbers = [1, 2, 3]; const squared = numbers.map(function(num) { return num * num; }); console.log(squared); // Output: [1, 4, 9]

With Arrow Function:

Arrow functions simplify the syntax:

const squared = numbers.map(num => num * num); console.log(squared); // Output: [1, 4, 9]

Arrow Functions Return Value by Default:

Arrow functions implicitly return the value for single-line statements.

Example:

const add = (a, b) => a + b; console.log(add(2, 3)); // Output: 5

Arrow Function With Parameters:

Arrow functions can accept parameters like regular functions.

Example:

const greet = name => `Hello, ${name}`; console.log(greet(“Alice”)); // Output: Hello, Alice

Parentheses are optional if there is only one parameter.

Example:

const square = num => num * num; console.log(square(4)); // Output: 16

What About this?

Unlike traditional functions, arrow functions do not have their own this. Instead, they inherit this from the surrounding lexical scope.With arrow functions the this keyword always represents the object that defined the arrow function.

Example:

function Person(name) { this.name = name; this.sayName = () => { console.log(this.name); }; } const person = new Person(“Alice”); person.sayName(); // Output: Alice

Browser Support

Arrow functions are supported in all modern browsers. However, for older browsers like Internet Explorer, you may need a transpiler like Babel.

The earliest browser versions that fully supported JavaScript’s Arrow Functions are listed in below table:

Request more information

JavaScript Arrow Function