JavaScript Arrow Functions Syntax & Examples
Direct Answer & Overview
JavaScript arrow functions provide a concise syntax for writing function expressions using the => token. Unlike traditional functions, arrow functions do not bind their own this, arguments, or super, lexically capturing them from their enclosing scope.
JavaScript Source Code
const multiply = (a, b) => a * b;
console.log(multiply(5, 4));How does this JavaScript code work?
Introduced in ECMAScript 2015 (ES6), arrow functions (`() => {}`) provide an alternative to traditional function expressions. When an arrow function body consists of a single expression, the curly braces and `return` keyword can be omitted for an implicit return. Crucially, arrow functions establish lexical `this` binding: they do not create their own `this` context at runtime, making them the standard choice for array callbacks and timer methods.
What is the expected terminal output?
Executing this code in JS CodeLab produces the following stdout sequence in the developer console:
20Common mistakes to avoid
- !Attempting to return an object literal directly with () => { a: 1 }, which parses braces as a code block; wrap in parens () => ({ a: 1 }).
- !Using arrow functions as object methods when access to the parent object via this is required.
- !Attempting to instantiate an arrow function using the new keyword, throwing a TypeError: is not a constructor.
- !Assuming arrow functions have access to the arguments object; use modern rest parameters (...args) instead.
Frequently Asked Questions
How does 'this' behave inside a JavaScript arrow function?
Arrow functions do not have their own this binding. Instead, they lexically capture the this value of the enclosing execution context at the time they are defined.
When should you NOT use arrow functions in JavaScript?
Avoid arrow functions when defining object methods that need to access other object properties via this, as prototype methods, or as constructor functions with the new keyword.
What is an implicit return in an arrow function?
When an arrow function has a one-line expression body without curly braces, that expression is automatically evaluated and returned without needing the return keyword.
Do arrow functions have a prototype property?
No. Arrow functions lack a prototype property and cannot be used as constructor functions with new.
Comprehensive Tutorial
Want an in-depth understanding of this topic?
Read our complete, interactive tutorial covering memory management, edge cases, and best practices.
Read the full functions tutorial →