Search results
With arrow functions the this keyword always represents the object that defined the arrow function. Let us take a look at two examples to understand the difference. Both examples call a method twice, first when the page loads, and once again when the user clicks a button.
- Overview
- Syntax
- Description
- Examples
- Browser compatibility
- See also
An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:
•Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.
•Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.
•Arrow functions cannot use yield within their body and cannot be created as generator functions.
Rest parameters, default parameters, and destructuring within params are supported, and always require parentheses:
Arrow functions can be async by prefixing the expression with the async keyword.
Let's decompose a traditional anonymous function down to the simplest arrow function step-by-step. Each step along the way is a valid arrow function.
In the example above, both the parentheses around the parameter and the braces around the function body may be omitted. However, they can only be omitted in certain cases.
The parentheses can only be omitted if the function has a single simple parameter. If it has multiple parameters, no parameters, or default, destructured, or rest parameters, the parentheses around the parameter list are required.
The braces can only be omitted if the function directly returns an expression. If the body has additional lines of processing, the braces are required — and so is the return keyword. Arrow functions cannot guess what or when you want to return.
Using arrow functions Using call, bind, and apply
The call(), apply(), and bind() methods work as expected with traditional functions, because we establish the scope for each of the methods: With arrow functions, since our add function is essentially created on the globalThis (global) scope, it will assume this is the globalThis. Perhaps the greatest benefit of using arrow functions is with methods like setTimeout() and EventTarget.prototype.addEventListener() that usually require some kind of closure, call(), apply(), or bind() to ensure that the function is executed in the proper scope. With traditional function expressions, code like this does not work as expected: With arrow functions, the this scope is more easily preserved:
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Jul 8, 2024 · Learn how to define and use arrow functions in JavaScript, a concise syntax for function expressions with lexical this binding. See examples, advantages, limitations, and FAQs of arrow functions.
- 6 min
Learn how to use arrow functions to write concise and elegant code for function expressions in JavaScript. Arrow functions have a shorter syntax than regular functions and use lexical this, arguments, super and new.target.
Learn how to use arrow functions, a concise and simple syntax for creating functions in JavaScript. See examples of one-line and multiline arrow functions, and how they differ from Function Expressions.
Nov 30, 2023 · Learn how to use the arrow function syntax in JavaScript, which is a concise and convenient way to create functions. Compare the arrow function with the regular function, see how to convert them, and understand the benefits and drawbacks of arrow functions.
People also ask
How to use arrow function in Java?
What is the difference between arrow function and regular function?
What are the advantages of Arrow functions?
What are arrow functions in ES6?
Learn how to write concise and clear function expressions with arrow functions in JavaScript. See syntax, examples, differences with regular functions, and tips on using this keyword and expressions.
