Skip to main content

​
The arrow function syntax

Arrow functions are a shorter way to write functions. They were added in ES6 and are now the most common function syntax in modern JavaScript — especially in React. 
// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => {
  return a + b;
};

console.log(add(3, 5)); // 8
Drop the function keyword, add => after the parameters. That’s it.

​
Implicit return

When your function body is a single expression, you can skip the curly braces and the return keyword: 
// Full syntax
const double = (n) => {
  return n * 2;
};

// Implicit return — same thing, shorter
const double = (n) => n * 2;

console.log(double(5)); // 10
This works because JavaScript automatically returns the expression after => when there are no curly braces. 
// More examples of implicit return
const greet = (name) => `Hello, ${name}!`;
const isAdult = (age) => age >= 18;
const getFullName = (first, last) => `${first} ${last}`;

console.log(greet("Sarah"));            // "Hello, Sarah!"
console.log(isAdult(25));               // true
console.log(getFullName("Sarah", "Chen")); // "Sarah Chen"
If your function does one thing and returns a value, use the implicit return. If it has multiple lines or side effects (like console.log), use curly braces with an explicit return.

​
Single parameter shorthand

When an arrow function has exactly one parameter, you can drop the parentheses: 
// With parentheses
const double = (n) => n * 2;

// Without parentheses — same thing
const double = n => n * 2;

// Zero parameters — parentheses required
const getTimestamp = () => Date.now();

// Multiple parameters — parentheses required
const add = (a, b) => a + b;
Some teams require parentheses around all parameters for consistency. Either style is fine — Prettier will handle this for you based on your config.

​
Where you’ll use arrow functions

Arrow functions shine as callbacks — functions you pass to other functions. You’ll write these constantly: 
// Array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);        // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// Sorting
const names = ["Charlie", "Alice", "Bob"];
names.sort((a, b) => a.localeCompare(b)); // ["Alice", "Bob", "Charlie"]

// Timers
setTimeout(() => {
  console.log("This runs after 1 second");
}, 1000);
In React, arrow functions are everywhere: 
// Event handlers
<button onClick={() => setCount(count + 1)}>Increment</button>

// Rendering lists
{users.map(user => <li key={user.id}>{user.name}</li>)}

// Effects
useEffect(() => {
  fetchUsers();
}, []);

​
Arrow functions vs regular functions

For this course, here’s the practical rule:
Use caseSyntax
Standalone, named functionsfunction greet(name) { }
Callbacks and inline functions(params) => expression
React event handlers() => doSomething()
Array methods (.map, .filter)item => transform(item)
Arrow functions have a technical difference with this binding, but you won’t encounter it in this course. React function components and hooks don’t rely on this, so it’s a non-issue. If you’re curious, MDN has a detailed explanation.

​
Comparing to Python lambdas

// Arrow functions can have multiple lines
const calculateTotal = (price, taxRate) => {
  const tax = price * taxRate;
  return price + tax;
};

// Or a single expression
const double = n => n * 2;

// Used as callbacks
const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.08);
JavaScript’s arrow functions are more versatile than Python’s lambdas. They can have multiple lines, multiple statements, and they’re used far more often because JavaScript relies heavily on callbacks.

​
Common mistakes

// ❌ Wrong: Curly braces but no return
const double = (n) => {
  n * 2; // This computes but doesn't return anything
};
console.log(double(5)); // undefined

// ✅ Correct: Either add return...
const double = (n) => {
  return n * 2;
};

// ✅ ...or use implicit return (no curly braces)
const double = (n) => n * 2;
With curly braces, you must use return. Without curly braces, the return is implicit. Mixing these up is the most common arrow function mistake.
// ❌ Wrong: JavaScript thinks {} is a function body
const getUser = () => { name: "Sarah", age: 28 }; // SyntaxError

// ✅ Correct: Wrap the object in parentheses
const getUser = () => ({ name: "Sarah", age: 28 });
console.log(getUser()); // { name: "Sarah", age: 28 }
When implicitly returning an object, wrap it in parentheses (). Without them, JavaScript interprets the curly braces as a function body, not an object.

​
What’s next?

You can write functions in both styles. Now let’s look at what goes inside the parentheses — parameters, default values, and destructuring.

Parameters and arguments

Default values, rest parameters, and destructuring