Fonctions et usages JavaScript

La notion de fonction "auto-exécutée"

Cet article peut sembler simpliste, mais il apparaît utile de connaître les principales possibilités de déclarer une fonction en JavaScript.
Personnellement, il m'arrive de produire du Javascript ponctuellement pour des besoins simples, je pense que c'est toujours constructif de s'interroger sur les bases de ce langage, l'objectif est avant tout de mieux comprendre ce que l'on écrit en JavaScript.

La tentation est souvent grande de bidouiller du code qui fonctionne malgré tout, mais c'est parfois bon aussi de s'arrêter pour faire le point sur de "modestes" notions.

Loin de moi l'idée, de faire de ce post, un exposé hasardeux sur les fonctions en JavaScript. Il faut bien plus que quelques lignes pour faire le tour du sujet, par contre, je suis parti de la notion de fonction en JavaScript pour mieux comprendre de quelle manière les usages actuels évoluent.

Petit tour d'horizon concernant les fonctions en JS pour arriver au sujet :
- La fonction déclarative (déclaration classique voire basique)

function hello() {
    console.log(hello.name); //affiche hello  
}
hello();

- L'expression de fonction anonyme

var myFunction = function() {
    console.log('myFunction called');
};
myFunction(); //affiche myFunction called

- L'expression de fonction nominative

var myFunction = function hello() {
    console.log(hello.name);
};
myFunction(); //affiche hello
console.log(myFunction.name); //affiche hello

- La méthode d'objet

//déclaration d'une fonction qui est un objet
var hello = function hello() {
};
//déclaration d'une méthode de l'objet
hello.myMethod = function() {
    console.log(this.name);
};
//appel
hello.myMethod(); //affiche hello

- L'expression de fonction immédiatement invoquée (IIFE pour Immediatly Invoked Function Expression)

var myFunction = function hello() {
    console.log(hello.name); //affiche hello
}();
console.log(myFunction); //affiche undefined

- L'expression de fonction immédiatement invoquée évaluée sans variable

// écriture 1
(function hello() {
    console.log(hello.name); //affiche hello
})();

ou

// écriture 2
(function hello() {
     console.log(hello.name); //affiche hello
}());

- Un exemple avec des arguments :

// écriture 1
(function hello(argument1, argument2) {
    console.log(hello.name); //affiche hello
    console.log(argument2); //affiche 1
})('test', 1);

- L'instanciation de fonction avec constructeur "Function"

var hello = new Function('a', 'b', 'return a+b;');
console.log(hello(2, 3)); //affiche 5

- Avec l'écriture "Arrow function" ES6 (plusieurs variantes de déclaration existent selon le nombre d'arguments !) :

((argument1, argument2) => {
    //votre script
})('test', 1);

Une pratique désormais répandue est d'utiliser l'IIFE pour structurer et surtout encapsuler voire "protéger ses scripts" au sein de la fonction avec la notion de "scope" (contexte) local à lui opposer au scope global (l'objet "window" du navigateur) : voici un très bon article qui présente l'IIFE comme une bonne approche.

La notion de programmation en objet JavaScript en utilisant une IIFE est abordée avec humour ici.

Pour aller plus loin et comprendre comment travaillent finalement les "spécialistes" du JavaScript, il est désormais question de concept modulaire, et là ça devient assez technique avec les approches du moment !

L'objectif de cet article est finalement d'y voir plus clair et comprendre quels sont les bons usages du JavaScript à l'heure actuelle et pointer le fait que l'IIFE (fonction "auto-exécutée" pour faire court) répond à des besoins bien spécifiques pour structurer son code.

Enfin un témoignage assez sympa (en anglais) qui montre bien que JavaScript est vraiment une jungle et qu'il faut en faire une compétence particulière pour rester dans les "rails" comme beaucoup d'autres domaines ...

Cet article Fonction en JavaScript, « IIFE », et usage dit professionnel … est apparu en premier sur DOTPROGS.