Discussion :

[Mirabeau]

Bonjour,

Mon peu de connaissance de Javascript date de l'age de pierre , et je me lance dans NodeJS depuis quelques jours.
Du coup j'ai le sentiment de faire un bond dans le temps tant au niveau des "usages" que de certaines syntaxes.

un simple exemple, la création de "function"

j'ai toujours utilisé ce genre de choses:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function MaBelleFonction (arg1, arg2) {
 
}

et je decouvre, ici ou la, des choses comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
MaBelleFunction = function (arg1, arg2) {
 
}

ou encore:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
MaBelleFunction = function (arg1, arg2) => {
 
}

J'ai essayé les 3 (il y en a d'autres ?) et je ne vois aucune différence, donc pour ma culture perso, j'aimerai comprendre

• Si il y a une différence, ou un contexte d'utiliser telle ou telle syntaxe ?
• Est ce "uniquement" une évolution du langage, si oui ..why ?!
• Une façon sournoise de distinguer un vieux codeur d'un codeur "a la mode"
• Aucune différence, c'est juste pour faire "style" (avec l'accent anglais).. (sic)

J'ai pris que cet exemple, mais j'en constate pas mal des comme ça

Merci d'avance

[NoSmoking]

Bonjour,
rapidement ...

• Déclaration de fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function maFonction(arg1, arg2) {
  console.log(arg1, arg2):
}

• Expression de fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const maFonction = function (arg1, arg2) {
  console.log(arg1, arg2):
}

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const maFonction = function nomFacultatif(arg1, arg2) {
  console.log(arg1, arg2):
}

• Fonction fléchée (ES6), c'est une syntaxe plus concise que les expressions de fonction, elle s'écrit sans le mot clé function :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const maFonction = /*function*/ (arg1, arg2) => {
  console.log(arg1, arg2):
}

Pour approfondir : Fonctions et portée des fonctions

[Watilin]

Il y a aussi quelques détails sournois en ce qui concerne la « nature » des variables (à défaut d’un meilleur mot), je veux dire par là la façon dont elles sont déclarées (ou pas), et leur portée.
l’instruction-fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function MaBelleFonction (arg1, arg2) {
 
}

est équivalente à une déclaration avec var, et sa portée sera donc celle de la fonction englobante, ou du contexte global. Dans le contexte global, elle devient alors une propriété de window.

l’expression-fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
MaBelleFunction = function (arg1, arg2) {
 
}

Elle est techniquement une fonction anonyme qui est ensuite attribuée à la variable MaBelleFunction. Donc sa « nature » dépend de la façon dont on déclare la variable. Sans mot-clé de déclaration, en mode strict, ça lèvera une erreur. Déclarée avec var, elle a la même portée que ci-dessus ; déclarée avec let ou const, elle est locale au bloc englobant.

Tu n’est peut-être pas familier avec let et const donc je vais développer un peu. Ces deux mots-clés font la même chose à un détail près : une variable déclarée avec const (qui serait alors plus proprement nommée une constante), n’est pas modifiable. Elle reçoit sa valeur à l’initialisation, et si on tente de la modifier après, ça lève une erreur.
let et const ont les mêmes règles de portée : la variable est locale au bloc le plus proche, qui peut être un bloc if, for ou n’importe quoi, ou même un bloc tout seul juste pour le plaisir d’avoir un bloc.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
let reponse = 42;
{
  let reponse = "C’est faux";
  console.log(reponse); // affiche "C’est faux"
}
console.log(reponse); // affiche 42

Il y a deux détails à propos de let et const qui peuvent répondre à la qualification de « détail sournois » :

• même au niveau global, la variable ne devient pas une propriété de window ;
• il n’y a pas de hoisting.

Ce dernier point mérite une explication : le hoisting est un mécanisme caché de var qui fait que, dans une portée, tous les noms de variables accessibles sont « scannés » à l’avance avant l’exécution, et les déclarations var ainsi que les instructions-fonctions sont remontées, « hissées », au début de la portée. Ça permet, entre autres, d’appeler une fonction avant sa déclaration :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
maFonction(); // affiche "bonjour"
 
function maFonction() {
  console.log("bonjour");
}

Mais avec let et const, il n’y a pas de hoisting, il y a même un message d’erreur prévu exprès pour ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
maFonction(); // ReferenceError: can't access lexical declaration `maFonction' before initialization
 
const maFonction = function () {
  console.log("bonjour");
}

Dans la communauté NodeJS, l’usage de const est fréquent pour déclarer des fonctions, car on a rarement (sinon jamais) besoin de modifier une fonction.