() => {}
An arrow function: a shorter function syntax, with no own this, and an implicit return for a single expression.
Example
#const add = (a, b) => a + b
const greet = (name) => `Hello, ${name}!`
const getDefaults = () => ({ level: 1, points: 0 })
console.log(add(2, 3))
console.log(greet('Mia'))
console.log(getDefaults())Definition and usage
#An arrow function is a compact way to write a function expression. Instead of the word function, you write the parameters, an arrow =>, and the function body. It works great as a short callback in map(), filter(), or addEventListener().
If the body is a single expression, you can skip the curly braces and return: the expression’s result is returned automatically. With a single parameter, the parentheses around it are optional. When returning an object in the short form, wrap it in parentheses: () => ({ ok: true }).
Arrows don’t have their own this or arguments, they just take them from the surrounding code. That makes writing callbacks inside methods easier, but for the same reason arrows don’t work well as object methods that rely on this. You also can’t call them with new.
Syntax
#() => expression
param => expression
(param1, param2) => expression
(param1, param2) => {
// statements
return value
}
() => ({ key: value })More examples
#const students = [
{ name: 'Emma', points: 120 },
{ name: 'Jack', points: 80 },
{ name: 'Mia', points: 150 }
]
const passed = students
.filter((student) => student.points >= 100)
.map((student) => student.name)
console.log(passed)const course = {
title: 'JavaScript',
lessons: ['Variables', 'Functions'],
list() {
return this.lessons.map((lesson) => `${this.title}: ${lesson}`)
}
}
console.log(course.list())The arrow inside map() uses the this of the list() method. A regular function function (lesson) {} would have its own this equal to undefined.
const player = {
name: 'Jack',
arrowHello: () => `Hello, ${this?.name}`,
methodHello() {
return `Hello, ${this.name}`
}
}
console.log(player.arrowHello())
console.log(player.methodHello())The arrow doesn’t get the object as this, it takes this from its surroundings, and at the top level of a module that’s undefined. Without ?., that read would throw a TypeError. Write object methods with the shorthand methodHello() {}.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- When returning an object in the short form, remember the parentheses:
() => ({ id: 1 }). Without them, the braces are read as the function body and you getundefined. - Use regular method syntax for object and class methods. Save arrows for callbacks and short helper functions.
- When the body spans several lines, add braces and an explicit
return. Without it, the function returnsundefined.
Related entries
#- () => {} vs functionA regular function has its own this and arguments, is hoisted, and can be called with new. An arrow function is shorter and takes this from its surroundings.
- functionDeclares a named function: a block of code with parameters that you can call any number of times and that can return a result.
- returnEnds a function and passes a value back to the place where the function was called.
- thisA keyword pointing to the object a function was called on.
- Array.prototype.map()Creates a new array with the results of calling a function for every element.
- classDefines a class: a template for creating objects that share the same fields and methods.
Spotted a mistake or missing an example? Write to us.