Recommended Free Tools
In JavaScript, an anonymous function expression is a function written without a name; an arrow function is a concise function form often used for callbacks; and an object literal stores information as key-value properties. The key distinction is that arrows change behavior as well as syntax: they inherit this from their surrounding context, have no own arguments, and cannot be called with new.
What is an anonymous function expression?
A function expression creates a function value. In this example, the function has no written name and is assigned to the variable square:
As an Amazon Associate I earn from qualifying purchases.
const square = function (number) {
return number * number;
};
square(4); // 16“Anonymous” describes how the function expression is written; it does not mean the function cannot be stored or called. Here, you call it through square. Defining the function does not run its body; the call square(4) does. A function expression can also include an internal name, which can be useful for self-reference or stack traces. MDN notes that arrow functions are always anonymous in its Functions guide.
How do you convert a callback to arrow syntax?
A callback is a function passed to another function to be called as part of its work. For example, map calls its callback for each array item and uses the returned value to build a new array:
#1 Best Overall
const lengths = words.map(function (item) {
return item.length;
});
const lengthsWithArrow = words.map((item) => item.length);The arrow version keeps the same result but writes the callback more compactly. Since item.length is the arrow body’s single expression, its value is returned implicitly. For one parameter, the parentheses around the parameter can be omitted, as in item => item.length; keeping them is also valid and can be clearer when learning.
When does an arrow function return a value implicitly?
An arrow with an expression body returns that expression’s result without a return keyword:
Rank #2
const add = (a, b) => a + b;
add(2, 3); // 5If the body is a statement block enclosed in braces, use an explicit return when the function should produce a value:
const add = (a, b) => {
return a + b;
};A block body that reaches its end without a return produces undefined. The braces here mark a function body, not an object result.
How do key-value pairs work in an object literal?
An object literal uses braces to define properties. Each property pairs a key with a value; in this example, name and day are keys, and "Ada" and 12 are their values:
const learner = {
name: "Ada",
day: 12
};To have an arrow function return an object literal directly, wrap the object in parentheses:
Rank #4
const makeLearner = (name) => ({ name: name });
makeLearner("Ada"); // { name: "Ada" }Without those parentheses—(name) => { name: name }—JavaScript parses the braces as a statement block, not as the object to return. For more on object properties, see MDN’s Working with objects guide.
How do arrow functions differ from ordinary functions?
Arrow functions are not interchangeable with ordinary function expressions in every context. Their syntax may be shorter, but their behavior differs in several important ways:
| Feature | Ordinary function expression | Arrow function |
|---|---|---|
| Syntax and return | Uses function; a block body needs an explicit return to return a value. |
Can use a concise expression body with an implicit return, or a block body with explicit return. |
this |
Its this depends on how the function is called. |
Has no own this; it uses the value from the surrounding execution context. |
arguments |
Has its own arguments binding. |
Has no own arguments; use a rest parameter such as (...args) => args to collect arguments. |
| Constructor use | Can generally be used as a constructor when invoked with new. |
Cannot be used as a constructor with new. |
The lexical this behavior is useful when a callback inside a method needs to retain the method’s surrounding this. For an object method whose this should be the object on which it is called, ordinary method syntax is generally appropriate:
const counter = {
value: 0,
increment() {
this.value++;
}
};Because an arrow does not get a new this from the call site, replacing increment() with an arrow property would not give it the same method-call behavior. MDN explains these distinctions in its arrow function reference.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problems
