arrow function
An arrow function is a compact function expression, written with =>, that takes this, arguments, and super from the surrounding code instead of binding its own.
The short form drops the function keyword. With an expression body, it also drops the braces and return, so (price) => price * 2 returns its result directly. A body in braces is a block and needs an explicit return.
Because an arrow function has no this binding of its own, a callback written as one sees the same this as the method around it. The .call(), .apply(), and .bind() methods can’t change that value. The same rule makes arrow functions a poor fit for object methods that read this.
Arrow functions also have no .prototype property and can’t act as constructors. They’re common as short callbacks for array methods, promise handlers, and timers, where they often form a closure over nearby variables.
Example
Say a shopping cart class applies its tax rate to each price inside .map(), and the callback needs to read that rate from the instance:
> class Cart {
… constructor(taxRate) {
… this.taxRate = taxRate;
… }
… withArrow(prices) {
… return prices.map((price) => price * (1 + this.taxRate));
… }
… withFunction(prices) {
… return prices.map(function (price) {
… return price * (1 + this.taxRate);
… });
… }
… }
undefined
> const cart = new Cart(0.25);
undefined
> cart.withArrow([8, 20])
[ 10, 25 ]
> try {
… cart.withFunction([8, 20]);
… } catch (error) {
… error.message;
… }
"Cannot read properties of undefined (reading 'taxRate')"
The arrow callback reads this from withArrow(), so it finds the cart. The function callback gets its own binding, and because .map() calls it as a plain function in strict class code, this is undefined.
Say a helper builds line-item objects from product names. A braced body that looks like an object literal is a block, and calling an arrow function with new throws:
> const toItem = (name) => { name };
undefined
> toItem("pen")
undefined
> const toItemFixed = (name) => ({ name });
undefined
> toItemFixed("pen")
{ name: 'pen' }
> try {
… new toItemFixed("pen");
… } catch (error) {
… error.message;
… }
'toItemFixed is not a constructor'
In toItem(), the braces start a block and name is a bare expression statement, so the call returns undefined. Wrapping the object literal in parentheses turns it back into the returned value. Calling toItemFixed() with new throws a TypeError because arrow functions can’t be used as constructors.
Related Resources
Have a question about this? Mentor AI can show you examples, compare related terms, and point you to tutorials.
Ask Mentor AI
By Leodanis Pozo Ramos • Updated Nov. 5, 2026
