JavaScript arrow functions are a concise syntax for writing function expressions.
Here's a quick example of the arrow function. You can read the rest of the tutorial for more.
Example
// an arrow function to add two numbers
const addNumbers = (a, b) => a + b;
// call the function with two numbers
const result = addNumbers(5, 3);
console.log(result);
// Output: 8
In this example, addNumbers() is an arrow function that takes two parameters, a and b, and returns their sum.
Arrow Function Syntax
The syntax of the arrow function is:
let myFunction = (arg1, arg2, ...argN) => {
statement(s)
}
Here,
myFunctionis the name of the function.arg1, arg2, ...argNare the function arguments.statement(s)is the function body.
If the body has single statement or expression, you can write the arrow function as:
let myFunction = (arg1, arg2, ...argN) => expression
Note: Arrow functions were introduced in ES6. Some browsers may not support the use of arrow functions. Visit JavaScript Arrow Function support to learn more.
To see the difference between a regular function expression and an arrow function, let's consider a function that multiplies two numbers.
Using a regular function:
// regular function
let multiply = function(x, y) {
return x * y;
};
Using an arrow function:
// arrow function
let multiply = (x, y) => x * y;
Here, both the regular function expression and the arrow function perform the multiplication of two numbers.
As you can see, the syntax of the arrow function is more clear and concise.
Example 1: Arrow Function With No Argument
If a function doesn't take any argument, then you should use empty parentheses. For example,
const sayHello = () => "Hello, World!";
// call the arrow function and print its return value
console.log(sayHello());
// Output: Hello, World!
In this example, when sayHello() is called, it executes the arrow function which returns the string Hello, World!.
Example 2: Arrow Function With One Argument
If a function has only one argument, you can omit the parentheses. For example,
const square = x => x * x;
// use the arrow function to square a number
console.log(square(5));
// Output: 25
The arrow function square() takes one argument x and returns its square.
Hence, calling square() with the value 5 returns 25.
this Keyword With Arrow Function
Inside a regular function, this keyword refers to the function where it is called.
However, this is not associated with arrow functions. So, whenever you call this, it refers to its parent scope. For example,
// constructor function
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayAge = function () {
console.log(this.age);
let innerFunc = () => {
console.log(this.age);
}
innerFunc();
}
}
const x = new Person();
x.sayAge();
Output
25 25
Here, the innerFunc() function is an arrow function.
And inside the arrow function, this refers to the parent's scope, i.e., the scope of the Person() function. Hence, this.age gives 25.
As stated above, this keyword refers to the function where it is called. For example,
// constructor function
function Person() {
this.name = "Jack",
this.age = 25,
this.sayAge = function () {
// this is accessible
console.log(this.age);
function innerFunc() {
// this refers to the global object
console.log(this.age);
console.log(this);
}
innerFunc();
}
}
let x = new Person();
x.sayAge();
Output
25
undefined
<ref *1> Object [global] {...}
Here, this.age inside this.sayAge() is accessible because this.sayAge() is a method of an object.
However, innerFunc() is a normal function and this.age is not accessible because this refers to the global object.
Hence, this.age inside the innerFunc() function is undefined.
More on Arrow Function
You can also dynamically create an arrow function and use it as an expression. For example,
let age = 5;
// use arrow functions as expressions in ternary operator
// to dynamically assign functionality
let welcome = (age < 18) ?
() => console.log("Child") :
() => console.log("Adult");
welcome();
// Output: Child
In this example, an arrow function is created based on the condition of whether age is less than 18 or not.
If age is less than 18, the function will print Child. Otherwise, it will print Adult.
Hence, when the function is called, we get Child as output since age is 5.
If a function body has multiple statements, you need to put them inside curly brackets {}. For example,
let sum = (a, b) => {
let result = a + b;
return result;
};
let result1 = sum(5,7);
console.log(result1);
// Output: 12
1. You should not use arrow functions to create methods inside objects.
let person = {
name: "Jack",
age: 25,
sayAge: () => {
console.log(this.age);
}
}
person.sayAge(); // undefined
2. You cannot use an arrow function as a constructor.
let Foo = () => {};
let foo = new Foo();
// Output: TypeError: Foo is not a constructor
Also Read: