Fonctions

Les fonctions sont au cœur de JavaScript et de React. Voyons les différentes syntaxes.

Fonction classique

javascript

function greet(name) {
  return `Hello ${name}!`;
}

console.log(greet('Alice')); // "Hello Alice!"

Fonction anonyme

javascript

const greet = function(name) {
  return `Hello ${name}!`;
};

Arrow Functions ⭐

La syntaxe moderne, indispensable pour React !

javascript

// Syntaxe complète
const add = (a, b) => {
  return a + b;
};

// Return implicite (une seule expression)
const add = (a, b) => a + b;

// Un seul paramètre : parenthèses optionnelles
const double = n => n * 2;

// Sans paramètre
const hello = () => 'Hello!';

En React

Les composants React sont des fonctions ! Vous utiliserez constamment les arrow functions :

javascript

// Composant React
const Button = () => {
  return <button>Click me</button>;
};

// Event handler
<button onClick={() => alert('Hi!')}>
  Click
</button>

Quelle est la syntaxe correcte pour une arrow function avec return implicite ?

Différence importante

Les arrow functions n'ont pas leur propre this, ce qui est crucial en React !

Exemples pratiques

Fonction avec plusieurs opérations

javascript

const calculateTotal = (price, quantity, tax) => {
  const subtotal = price * quantity;
  const taxAmount = subtotal * tax;
  return subtotal + taxAmount;
};

console.log(calculateTotal(100, 3, 0.2)); // 360

Fonction qui retourne un objet

javascript

// ❌ Incorrect (interprété comme bloc de code)
const makeUser = (name, age) => { name, age };

// ✅ Correct (parenthèses pour retourner un objet)
const makeUser = (name, age) => ({ name, age });

console.log(makeUser('Alice', 25));
// { name: 'Alice', age: 25 }

Astuce

Pour retourner un objet avec une arrow function et return implicite, entourez l'objet de parenthèses : () => ({ key: value })

Fonctions de callback

javascript

const numbers = [1, 2, 3, 4, 5];

// Arrow function comme callback
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Avec plusieurs paramètres
const filtered = numbers.filter((n, index) => index % 2 === 0);
console.log(filtered); // [1, 3, 5]