() => {} vs function
A 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.
Side-by-side comparison
#Its own this
Its own arguments
Calling it with new
Calling it before the declaration
Implicit return
Can be a generator function
Typical use
Example
#console.log(double(5))
function double(n) {
return n * 2
}
const triple = (n) => n * 3
console.log(triple(5))Definition and usage
#Both forms define a function: they accept parameters, run statements, and can return a result with return. A function declaration and a function () {} expression have their own this and arguments, depending on how they’re called, while an arrow function () => {} has neither: it takes this from the code where it was written.
function declarations are hoisted in full, so you can call them higher up in the file than where they’re written. An arrow, usually assigned to a const, only works from the line of assignment onward. A regular function can also be called with new as a constructor, but an arrow can’t: such an attempt throws a TypeError. An arrow, though, lets you skip the braces and return for a body that’s a single expression.
Use function for object and class methods that reference this, and for constructors. For short callbacks, especially ones meant to use the this of the method they’re nested in (e.g. inside map() or addEventListener()), reach for an arrow.
Syntax
#function name(param1, param2) {
return value
}
const name = (param1, param2) => valueMore examples
#const game = {
title: 'Space expedition',
players: ['Emma', 'Jack'],
announceWithArrow: function () {
return this.players.map((player) => `${this.title}: ${player}`)
},
announceWithFunction: function () {
return this.players.map(function (player) {
return `${this.title}: ${player}`
})
}
}
console.log(game.announceWithArrow())
try {
console.log(game.announceWithFunction())
} catch (error) {
console.log(error.name)
}The arrow inside map() takes this from the announceWithArrow() method. The regular function passed to map() gets its own this, which without a receiver is undefined, so this.title throws an error.
function Player(name) {
this.name = name
}
const ArrowPlayer = (name) => {
this.name = name
}
const player = new Player('Emma')
console.log(player.name)
try {
new ArrowPlayer('Jack')
} catch (error) {
console.log(error.name)
}Good practices
#- Write object and class methods that need to know their own
thiswithfunctionor the shorthandmethod() {}, not with an arrow. - In a callback that’s meant to use the
thisof the surrounding method (e.g. insidemap()within a class method), use an arrow. A regular function would get its own, differentthis. - Need to call a function before it’s written in the file? Declare it with
function, don’t assign it to aconstas an arrow.
Related entries
#- functionDeclares a named function: a block of code with parameters that you can call any number of times and that can return a result.
- () => {}An arrow function: a shorter function syntax, with no own this, and an implicit return for a single expression.
- returnEnds a function and passes a value back to the place where the function was called.
- 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.