Les fonctions en JavaScript

Introduction

L'élément le plus important dans le langage JavaScript, c'est la fonction. Il faut donc maîtriser les fonctions en JavaScript : les différentes façons de les créer, et les différentes façon de les appeler (on dit aussi les invoquer ou encore les exécuter).

Une fonction, en JavaScript est un « citoyen de première classe » : il s'agit d'une valeur comme une autre, qui peut être stockée dans une variable, passée en paramètre à une autre fonction, ou être retournée par une fonction.

Une fonction est un objet (cf. plus loin pour les types en JavaScript), qui a un super pouvoir : celui de pouvoir être invoqué. On invoque une fonction en ajoutant des parenthèses à la fin de son nom.

Pour créer une fonction, il y a 3 possibilités (en fait 4, mais la quatrième est déconseillée, je n’en parlerai pas), avec chacune des nuances que nous verrons.

Déclaration de fonction

function createMovie(id, title, frenchTitle) {
  return {
    imdbID: id,
    title,
    frenchTitle,
  }
}

• Ceci est une déclaration de fonction ;
• createMovie est une fonction déclarée avec le mot-clé function (il existe d'autres façons de créer des fonctions) ;
• elle a 3 paramètres (une fonction peut attendre de 0 à Infinity paramètre, il est fortement déconseillé de dépasser 3) ;
• elle renvoie un objet (ce qui n’est pas du tout une obligation, elle peut ne rien renvoyer - et donc renvoyer la valeur undefined, ou renvoyer une primitive).

Expression de fonction

const createMovie = function createMovie(id, title, frenchTitle) {
  return {
    imdbID: id,
    title,
    frenchTitle,
  }
}

• Ici, il n'y a pas de déclaration de fonction
• Il y a une déclaration de variable createMovie
• à droite de l’opérateur d’affectation (=), il y a une expression de fonction
• elle a 3 paramètres
• elle renvoie un objet

Fonction fléchée

function createMovie(id, title, frenchTitle) {
  return {
    imdbID: id,
    title,
    frenchTitle,
  }
}

• Ici, il n'y a pas de déclaration de fonction ;
• il y a une déclaration de variable createMovie ;
• à droite de l’opérateur d’affectation (=), il y a une (expression de) fonction fléchée ;
• elle a 3 paramètres ;
• elle renvoie un objet.

Quelques précisions pour les fonctions fléchées

Pour les fonctions fléchées et uniquement pour les fonctions fléchées :

• les parenthèses autour des paramètres ne sont pas obligatoires s’il y a un et un seul paramètre
• les accolades et le mot-clé return ne sont pas obligatoires s’il n’y a qu’une instruction :

function noop() {} // parenthèses obligatoires si aucun paramètre, accolades obligatoires s’il n’y a pas d’instruction
const add40 = n => 40 + n // parenthèses facultatives si un et un seul paramètre, accolades et return facultatif si une seule instruction

Attention dans certains cas :

var createMovie = (id, title, frenchTitle) => {
  id: id,
  title: title,
  frenchTitle: frenchTitle
} // Syntax Error !!!

Ici, les accolades signifient « début de corps de fonction », et ne jouent pas le rôle d’initiateur d’objet ! Il faut donc soit être plus verbeux...

function createMovie(id, title, frenchTitle) {
  return {
    id,
    title,
    frenchTitle
  }
}

... soit entourer les accolades de parenthèses :

function createMovie(id, title, frenchTitle) {
  return {
    id,
    title,
    frenchTitle
  }
}

D’autres subtilités

Il existe encore d’autres subtilités concernant les différences entre les fonctions et les fonctions fléchées que nous n’aurons pas le temps de voir dans ce module. Pour bien comprendre ces subtilités, il faut comprendre comment fonctionne le mot-clé this en JavaScript.