JavaScript Functions
JavaScript Arrow 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
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.
What is an Arrow Function?
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
Syntax
javascript
const name = (parameters) => {
// code to run
};The arrow sits between the parameter list and the body.
Implicit Return
If the body is a single expression, you can drop the braces and the return.
The value of that expression is returned automatically.
Example
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.
One Parameter Needs No Brackets
With exactly one parameter, the round brackets are optional.
Example
Example
javascript
const square = n => n * n;
console.log(square(5));With no parameters, or with two or more, the brackets are required.
Arrow Functions as Callbacks
This is the most common place you will meet them.
Example
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.
Returning an Object
To return an object with the short form, wrap it in round brackets.
Without them, JavaScript reads the braces as a function body.
Example
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.
Arrow Functions and this
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
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.
When Not to Use an Arrow
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
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
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>Try It Yourself
Run the above example in the Try It Editor.
Try a different callback:
Change n * 2 to n * n to square each number instead.
Important Points
- An arrow function is a short form of a function expression.
- A single expression body returns its value automatically.
- Round brackets are optional with exactly one parameter.
- Wrap a returned object in round brackets.
- An arrow function has no
thisof its own, so avoid it for object methods.
Conclusion
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.