2.5 fleche function

In this video we look at arrow functions, a shorter syntax for declaring JavaScript functions that you will use constantly in React. A classic function expression looks like const myFunc = function() { ... };. An arrow function rewrites the same thing as const myFunc = () => { ... };: the keyword function disappears, the parameter list comes first and an arrow leads to the body.

Syntax shortcuts

Beyond being shorter, arrow functions solve many of the well-known this problems of regular functions. Inside an arrow function, this stays bound to the surrounding context, so methods called from event handlers or callbacks behave the way you would intuitively expect.

const printMyName = (name) => {
  console.log(name);
};
printMyName("Matthieu");

const printSingle = name => console.log(name);   // 1 arg, no parentheses, no braces
const printTwo = (name, age) => console.log(name, age);   // multiple args need parentheses

const multiply = number => number * 2;   // implicit return: no braces, no return keyword
console.log(multiply(2));   // 4

Three useful shortcuts to remember. With exactly one parameter you can drop the parentheses around it. With zero parameters or more than one, parentheses are mandatory. And when the body is a single expression you can omit both the braces and the return keyword: the value of the expression is returned automatically. These are the forms you will keep meeting in the React code samples, so make sure you can read them all.

Summary

Arrow functions provide a modern, concise syntax for writing JavaScript functions using the `=>` operator instead of the traditional `function` keyword. A key advantage is that arrow functions automatically preserve the `this` context, eliminating scope-related issues commonly encountered with regular functions. This lesson covers the full spectrum of arrow function syntax, from basic multi-argument forms to advanced shorthand notations that simplify code readability and brevity.

Key points

• Arrow function syntax uses `=>` between arguments and function body, replacing the `function` keyword and delivering more concise code
• Arrow functions automatically retain the `this` context at execution time, solving the common problem where `this` doesn't reference what you expect in regular functions
• Single-argument arrow functions can omit parentheses (e.g., `name => console.log(name)`), while multiple arguments or no arguments require parentheses
• Implicit return allows omitting curly braces and the return keyword when the function body contains only a single expression (e.g., `multiply = x => x * 2`)
• Arrow functions are typically stored in constants using `const functionName = () => {}` declaration style
• Various syntax shorthand options exist for different scenarios, allowing developers to choose clarity or brevity depending on the use case

FAQ

What's the primary advantage of arrow functions over traditional JavaScript functions?

Arrow functions offer two main benefits: shorter syntax (omitting the `function` keyword) and automatic `this` context binding. Unlike regular functions where `this` can change unexpectedly at runtime, arrow functions always preserve the context from where they were defined.

When can I use the shorthand arrow function syntax without parentheses or curly braces?

You can omit parentheses only when your function has exactly one argument. You can omit curly braces and the return keyword only when your function body contains a single expression that you want to return implicitly.

Can arrow functions completely replace traditional function declarations?

While arrow functions work for most use cases and are preferred for cleaner syntax, traditional functions are still useful when you need explicit `this` binding or named function expressions for recursion. Arrow functions are the modern standard for most JavaScript development.