Les Fonctions en JavaScript

imgArt

Je ne vais pas rentrer plus dans les détails pour l’instant, mais sache que chaque point abordé ici, fera le sujet d’un article en particulier. Let’s go !

“Function Declaration” et “Function Expression”

// Declaration de fonction
function bonjour(){
  console.log('Bonjour depuis une Function Declaration');
};

bonjour();
// Bonjour depuis une Function Declaration
// Expression de fonction
var bonjour = function(){
  console.log('Bonjour depuis une Function Expression');
};

bonjour();
// Bonjour depuis une Function Expression
// Expression de Fonction => variable dont la valeur est une fonction

Tu vois ici, qu’il existe deux façons de déclarer des fonctions en JavaScript, des déclarations de fonction et des expressions de fonction. La première peut être utilisée n’importe où dans ton code et la seconde, peut être stockée dans une variable.

Déclaration de fonction : contrairement à une expression de fonction, avec une déclaration, la fonction peut être appelée avant même qu’elle ait été déclarée, car l’interpréteur recherche les variables et les déclarations de fonction avant de parcourir la suite de notre script.

Expression de fonction : fonction créée, stockée et traitée comme une variable. Il n’y a généralement pas de nom pour les expressions de fonctions, c’est pourquoi on dit qu’elles sont des fonctions anonymes. La fonction est stockée dans une variable et peut être appelée comme n’importe quelle fonction. Sache toutefois que la fonction n’est traitée uniquement que quand l’interpréteur de notre navigateur lis la déclaration ; ce qui veut dire que tu ne peux pas appeler cette fonction avant que l’interpréteur ne l’ait lu.

Le callback: passer une fonction à une autre fonction

addEventListener('click', function(){});

Cette fonction addEventListener(), prend deux arguments :

  • le premier, est l’événement que l’on souhaite écouter, en l'occurrence le click de la souris;
  • le second, est une fonction anonyme => c’est cette fonction qui est appelée callback.
btn.addEventListener('click', function(){
  console.log('click');
};

Les callbacks sont très utiles pour les fonctions asynchrones => quand on souhaite qu’une fonction soit exécutée après un événement spécifique. Dans notre cas, on souhaite que notre fonction soit exécutée après le click sur notre bouton (btn).

callback = fonction passée en paramètre d’une autre fonction, cette fonction peut être anonyme.

Portée des variables en ES5 puis ES6 (via let et const)

JavaScript est un langage fonctionnel et prototypale.

  • une variable déclarée à l’intérieur d’une fonction n’est pas accessible en dehors de cette fonction, cette variable est dite “locale”;
  • en revanche, une variable déclarée en dehors d’une fonction, est elle accessible à l’intérieur d’une fonction. Qu’elle soit déclarée avec var, let ou const;
  • les variables globales sont rattachées à l’objet window => et les variables globales représentent un gros problème, évite au max d’utiliser des variables globales au sein de contexte local (à l’intérieur d’une fonction) pour des raisons évidentes de clarté et de lisibilité de ton code;
  • ce sont les fonctions qui déterminent le scope d’une variable. En ES5, seule les fonctions ont le pouvoir de limiter le scope.

Par exemple, dans un if(), bien qu’il y ai des {} si la variable est déclarée avec le mot-clé var, la variable sera accessible dans le scope globale ALORS qu’en déclarant cette même variable avec let ou const, le scope se limite au {} du if().

var isYoung = true;

if(isYoung){
  var nextAction = 'go voyage';
};

La variable nextAction est accessible dans le scope global, car elle est déclarée avec le mot-clé var, et existera toujours une fois l’accolade fermante passée.

if(isYoung){
  let nextAction = 'go voyage';
};

if(isYoung){
  const nextAction = 'go voyage';
};

Grâce à let ou const, la variable nextAction n’est pas accessible dans le scope globale de notre application. Une fois l’accolade fermante passée nextAction n’existe plus.

À noter que toutes variables déclarées avec le mot-clé let peut être réassignées, chose qui est impossible une fois déclarées avec le mot clé const. Voir cet excellent post pour plus de détails.

let name = 'quentin';

console.log(name);
// quentin

name = 'valentin';

console.log(name);
// valentin
const age = 27;

console.log(age);
// 27

age = 28;
// Uncaught TypeError : Assignement to constant variable

IIFE (Immediately Invoked Function Expression)

Plus tellement d’actualité depuis ES6, car let et const permettent de gérer le scope, mais tu rencontreras certainement ce type de fonction dans du code legacy. Alors abordons brièvement ces fonctions.

L’utilisation des IIFE a pour objection de ne pas polluer le scope globale de ton application.

Astuce de ceux qui ont compris qu’en JavaScript il n’y a que les fonctions qui permettent de créer de nouveaux scope.

Le principe est de créer entre parenthèses, une fonction anonyme, et de l’appeler immédiatement grâce aux paranthèses.

(
  function(){
    console.log('Je suis une IIFE');
  }();
)

Cette fonction sera appelée immédiatement, et permet de ne pas polluer le scope globale avec les variables, éventuellement, créées dans cette fonction.

En effet, toutes variables créées à l’intérieur d’une IIFE n’est plus accessible une fois la fonction exécutée.

Au fil du temps, cette astuce perd de son utilité.

Fonction fléchée (Arrow Function) ES6

Une fonction fléchée (arrow function en anglais) permet d’avoir une syntaxe plus courte que les fonctions “classiques” et hérite de la valeur de this de son parent. Je t’ai linker un article que je trouve très intéressant concernant le this. Un article consacré à ces fonctions est prévus.

// ES5
function(){};

// ES6
() => {};
(param1, param2) => {};

Les fonctions fléchées sont souvent anonymes et ne sont pas destinées à être utilisées pour déclarer des méthodes.

Arguments et paramètres

On a tendance, à utiliser l’un pour l’autre et inversement. Alors faisons le point une bonne fois pour toutes sur ce que représente arguments et paramètre.

Les paramètres sont les noms que l’on spécifie dans la signature de la fonction.

Les arguments sont les valeurs passées lors de l’appel de la fonction.

function eat(food, quantity){
  return `J'ai mangé ${quantity} ${food};`
};

eat('beignets', 2);
// J'ai mangé 2 beignets

Paramètres = food, quantity

Arguments = ‘beignets’, 2

En résumé, on définit des paramètres et on passe des arguments.

Paramètre par défaut ES6

Si à l'appelle de ma fonction eat() qui prend deux arguments, je décide de passer seulement un argument. Je peux spécifier une valeur par défaut pour un paramètre.

function eat(food, quantity = 3){
  return `${food} ${quantity}`;
};

eat('beignets', 2);
// beignets 2

eat('beignets');
// beignets 3

Si à l’appel de la fonction eat(), l’argument ‘quantity’ n’est pas spécifier, il vaudra automatiquement 3.

Fonction utilisée comme constructeur

Quand une fonction commence avec une majuscule, cette fonction sera utilisée comme constructeur à l’aide du mot-clé new.

On en verra plus dans le chapitre sur la création de constructeur, de classe.


Et voilà, tu es à la fin de mon deuxième article sur la série JavaScript. J’espère qu’il va te permettre d’en savoir un peu plus sur ce vaste univers des fonctions en JavaScript. Le troisième sujet choisi pour cette série est, les objets en JavaScript. En attendant, je te mets le lien d’un dj près de chez moi, que j’écoute pendant l’écriture de ce post. Si tu kiffes la musique électro, c'est une bonne découverte fais moi confiance ! See you soon.

Latest Blogposts

Hoisting en JavaScript

Voici une notion qui peut être un peu déroutante au début, le hissage en français.

3 January 2021

ARRAY JavaScript

On aborde aujourd'hui le thème des tableaux qui sont eux aussi un élément incontournable de la programmation informatique.

23 January 2020