JavaScript - Méthode apply()

Bonjour à tous, futurs magiciens JavaScript ! Aujourd'hui, nous allons plonger dans une des méthodes les plus puissantes et flexibles de JavaScript : la méthode apply(). D'ici la fin de ce tutoriel, vous serez capable d'utiliser apply() comme un pro ! Mettons-nous en route pour cette aventure passionnante ensemble.

Qu'est-ce que la méthode apply() ?

La méthode apply() est une fonction intégrée de JavaScript qui nous permet d'appeler une fonction avec une valeur donnée de this et des arguments fournis sous forme de tableau (ou d'un objet similaire à un tableau). C'est comme avoir une baguette magique qui vous permet de contrôler comment une fonction est exécutée !

Pourquoi apply() est-elle importante ?

1. Elle nous offre une flexibilité dans l'appel des fonctions.
2. Elle nous permet d'emprunter des méthodes d'autres objets.
3. Elle est super utile lors de l'utilisation d'un nombre variable d'arguments.

Maintenant, regardons la syntaxe puis plongons dans quelques exemples !

Syntaxe de apply()

Voici la syntaxe de base de la méthode apply() :

functionName.apply(thisArg, [argsArray])

Décomposons cela :

• functionName : La fonction que vous souhaitez appeler.
• thisArg : La valeur de this fournie pour l'appel de la fonction.
• argsArray : Un tableau ou un objet similaire à un tableau spécifiant les arguments avec lesquels functionName doit être appelée.

Ça peut sembler un peu confus maintenant, mais ne vous inquiétez pas ! Nous allons traverser pleins d'exemples pour le rendre parfaitement clair.

Exemples de apply() en action

Exemple 1 : Utilisation de base

Commençons par un exemple simple :

function greet(name) {
console.log(`Bonjour, ${name} ! Mon nom est ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

Sortie :

Bonjour, Bob ! Mon nom est Alice.

Dans cet exemple :

1. Nous définissons une fonction greet qui utilise this.name.
2. Nous créons un objet person avec une propriété name.
3. Nous utilisons apply() pour appeler greet, en définissant this comme person et en passant 'Bob' comme argument.

La magie ici, c'est que apply() permet de définir à quoi this fait référence à l'intérieur de la fonction. Génial, non ?

Exemple 2 : Utilisation de apply() avec Math.max()

Voici un exemple pratique en utilisant Math.max() :

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

Sortie :

7

Dans ce cas :

1. Nous avons un tableau de nombres.
2. Nous utilisons apply() pour passer ce tableau directement à Math.max().
3. null est utilisé comme premier argument car Math.max() n'utilise pas this.

C'est super pratique lorsque vous avez un tableau de nombres et que vous souhaitez trouver le maximum !

Exemple 3 : Emprunter des méthodes d'array

Maintenant, voyons comment nous pouvons utiliser apply() pour emprunter des méthodes :

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

Sortie :

['a', 'b', 'c']

Que se passe-t-il ici ?

1. Nous avons un objet qui ressemble à un tableau mais ne l'est pas.
2. Nous empruntons la méthode slice() de Array.prototype.
3. apply() nous permet d'utiliser slice() sur notre objet similaire à un tableau, le convertissant en un vrai tableau.

C'est incroyablement utile lors de l'utilisation de éléments DOM ou d'autres objets similaires à des tableaux !

Exemple 4 : Appliquer des fonctions avec plusieurs arguments

Essayons quelque chose de plus complexe :

function introduce(greeting, hobby) {
console.log(`${greeting}, je suis ${this.name}. J'adore ${hobby} !`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Salut', 'coder']);
introduce.apply(person2, ['Bonjour', 'peindre']);

Sortie :

Salut, je suis Charlie. J'adore coder !
Bonjour, je suis Diana. J'adore peindre !

Dans cet exemple :

1. Nous définissons une fonction introduce qui prend deux arguments.
2. Nous créons deux objets person.
3. Nous utilisons apply() pour appeler introduce pour chaque personne, en passant des arguments différents.

Cela montre comment apply() peut être utilisé avec plusieurs arguments et différents valeurs de this.

Comparaison des méthodes de fonction

Comparons apply() avec ses frères call() et bind() :

Méthode	Syntaxe	Description
apply()	func.apply(thisArg, [argsArray])	Appelle une fonction avec une valeur donnée de this et des arguments sous forme de tableau
call()	func.call(thisArg, arg1, arg2, ...)	Similaire à apply(), mais les arguments sont passés individuellement
bind()	func.bind(thisArg, arg1, arg2, ...)	Crée une nouvelle fonction avec une valeur fixe de this et des arguments initiaux

Chacune a ses cas d'utilisation, mais apply() brille lorsque vous avez des arguments dans un tableau ou que vous devez travailler avec des objets similaires à des tableaux.

Conclusion

Félicitations ! Vous venez de plonger profondément dans le monde de apply(). De l'utilisation de base à l'emprunt de méthodes et au travail avec plusieurs arguments, vous avez vu à quel point cette méthode peut être polyvalente et puissante.

Souvenez-vous, apply() est comme un couteau suisse dans votre boîte à outils JavaScript. Il peut prendre un peu de pratique pour le maîtriser, mais une fois que vous le faites, vous le trouverez utile dans toutes sortes de situations.

Continuez à expérimenter avec apply(), et n'ayez pas peur de vous montrer créatif. Qui sait ? Vous pourriez bien vous apply() vous-même directement dans le rang des maîtres JavaScript ! Bon codage, futurs développeurs !

Credits: Image by storyset