Fonctions

Les fonctions sont au cœur de JavaScript. Voyons les différentes syntaxes et leurs cas d'usage.

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}!`;
};

Hoisting - Différence importante

Les fonction classiques sont "remontées" (hoisted) au début du scope. Vous pouvez les appeler avant leur déclaration.

javascript

// ✅ Fonctionne (hoisting)
console.log(greet('Alice')); // "Hello Alice!"
function greet(name) {
  return `Hello ${name}!`;
}

// ❌ Erreur (pas de hoisting)
console.log(sayHi('Bob')); // ReferenceError
const sayHi = (name) => `Hello ${name}!`;

En pratique, écrivez vos fonctions avant de les utiliser pour éviter toute confusion.

Que se passe-t-il si vous appelez une fonction anonyme (déclarée avec const/let) avant sa déclaration ?

Arrow Functions

Les arrow functions offrent une syntaxe plus concise pour déclarer des fonctions. Elles sont particulièrement pratiques pour les one-liners grâce au return implicite.

javascript

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

// Return implicite : parfait pour les one-liners !
const add = (a, b) => a + b;

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

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

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

Paramètres par défaut

Vous pouvez définir des valeurs par défaut pour les paramètres. Si l'argument n'est pas fourni, la valeur par défaut est utilisée.

javascript

// Sans valeur par défaut
const greet = (name) => `Hello ${name}!`;
console.log(greet()); // "Hello undefined!"

// Avec valeur par défaut
const greet = (name = 'World') => `Hello ${name}!`;
console.log(greet()); // "Hello World!"
console.log(greet('Alice')); // "Hello Alice!"

Cas d'usage pratique :

javascript

const createUser = (name, role = 'user', isActive = true) => ({
  name,
  role,
  isActive,
  createdAt: new Date()
});

console.log(createUser('Alice'));
// { name: 'Alice', role: 'user', isActive: true, createdAt: ... }

console.log(createUser('Bob', 'admin'));
// { name: 'Bob', role: 'admin', isActive: true, createdAt: ... }

Astuce

Les paramètres par défaut rendent vos fonctions plus robustes et évitent les vérifications manuelles comme role = role || 'user'.

Que se passe-t-il avec : const multiply = (a, b = 2) => a * b; console.log(multiply(5));

Exemples pratiques

Comprendre, pas mémoriser

Vous n'avez pas besoin de tout mémoriser sur les fonctions. L'important est de comprendre les concepts :

Les arrow functions offrent une syntaxe concise
Les callbacks sont des fonctions passées en argument
Les paramètres par défaut évitent les valeurs undefined

Avec la pratique, ces syntaxes deviendront naturelles. Consultez la documentation (MDN) ou demandez à l'IA si vous avez un doute.

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

Un callback est une fonction passée en argument à une autre fonction.

C'est un concept fondamental en JavaScript, utilisé partout : événements, manipulation de tableaux, opérations asynchrones...

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]

// Callback avec événement
const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('Bouton cliqué !');
});

// Callback avec setTimeout
setTimeout(() => {
  console.log('Exécuté après 2 secondes');
}, 2000);

Information

Les callbacks seront omniprésents dans votre code JavaScript : gestion d'événements, manipulation de tableaux (map, filter, reduce), appels réseau (fetch), timers, etc.

Qu'est-ce qu'un callback en JavaScript ?

Exercice rapide

Exercice : Manipulation de fonctions

Facile

Créez les fonctions suivantes en utilisant les arrow functions :

javascript

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const prices = [19.99, 49.50, 99.99];

calculatePriceTTC : Prend un prix HT et un taux de taxe (par défaut 0.2), retourne le prix TTC
createUser : Prend un nom, un email, et un rôle (par défaut "user"), retourne un objet utilisateur avec un id aléatoire
evenNumbers : Utilisez filter() pour extraire uniquement les nombres pairs du tableau numbers
adjustedPrices : Utilisez map() pour ajouter 10% à chaque prix et arrondir à 2 décimales