JavaScript Functions
JavaScript arrow functions are a shorter way to write a function expression.
An arrow function uses => instead of the word function.
They are especially common as callbacks passed to array methods.
Example
javascript
const double = (n) => {
return n * 2;
};
console.log(double(8));This does exactly the same job as a function expression.
The output is 16.
An arrow function is a compact function expression introduced in ES6.
It is always anonymous, so it is normally stored in a variable or passed as an argument.
It also treats the this keyword differently from a normal function.
Syntax
javascript
const name = (parameters) => {
// code to run
};The arrow sits between the parameter list and the body.
If the body is a single expression, you can drop the braces and the return.
The value of that expression is returned automatically.
Example
javascript
const double = (n) => n * 2;
const add = (a, b) => a + b;
console.log(double(8));
console.log(add(3, 4));This short form is why arrow functions are so common in callbacks.
With exactly one parameter, the round brackets are optional.
Example
javascript
const square = n => n * n;
console.log(square(5));With no parameters, or with two or more, the brackets are required.
This is the most common place you will meet them.
Example
javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
console.log(doubled);
console.log(evens);The short syntax keeps the focus on what the callback does.
To return an object with the short form, wrap it in round brackets.
Without them, JavaScript reads the braces as a function body.
Example
javascript
const makeUser = name => ({ name: name, active: true });
console.log(makeUser("Ada").name);The extra brackets tell JavaScript that the braces are an object.
A normal function gets its own this. An arrow function does not.
An arrow function keeps the this of the code around it, which is often what you want inside a callback.
Example
javascript
const timer = {
seconds: 0,
start: function () {
const tick = () => {
this.seconds++;
};
tick();
return this.seconds;
}
};
console.log(timer.start());Here, the arrow function still sees the object's this.
A normal function would not, which is a very common source of bugs.
Do not use an arrow function as an object method that needs this.
Because it has no this of its own, it cannot see the object.
Example
javascript
const person = {
name: "Ada",
greet: function () {
return "Hi " + this.name;
}
};
console.log(person.greet());Written as an arrow, this.name would be undefined.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Arrow Functions</title>
</head>
<body>
<h1>JavaScript Arrow Functions</h1>
<p id="result"></p>
<script>
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
document.getElementById("result").innerHTML = doubled.join(", ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a different callback:
Change n * 2 to n * n to square each number instead.
this of its own, so avoid it for object methods.JavaScript arrow functions give you a shorter way to write small functions.
They are the normal choice for callbacks passed to array methods.
Understanding how they treat this will save you a lot of debugging later.