C'est ce qu'on appelle une Expression de fonction:

var getRectArea = function(width, height) {
    return width * height;
};

console.log("Area of Rectangle: " + getRectArea(3,4));
// This should return the following result in the console: 
// Area of Rectangle: 12

C'est ce qu'on appelle une déclaration de fonction:

var w = 5;
var h = 6;

function RectArea(width, height) {  //declaring the function
  return area = width * height;
}                                   //note you do not need ; after }

RectArea(w,h);                      //calling or executing the function
console.log("Area of Rectangle: " + area);
// This should return the following result in the console: 
// Area of Rectangle: 30

J'espère que cela aidera à expliquer quelle est la différence entre l'Expression de fonction et la Déclaration de fonction et comment les utiliser. Grâce.

Le premier est une Expression de fonction anonyme :

var functionOne = function() {
  // some code
};

Alors que le second est une déclaration de fonction :

function functionTwo () {
  // some code
}

La principale différence claire entre les deux est le nom de la fonction puisque Les fonctions anonymes n'ont pas de nom à appeler.

Fonctions Nommées Vs. Fonctions Anonymes

La fonction anonyme est rapide et facile à taper, et de nombreuses bibliothèques et outils ont tendance à encourager ce style de code idiomatique. Cependant, les fonctions anonymes ont certains inconvénients:

• Lisibilité: les fonctions anonymes omettent un nom qui pourrait causer un code moins lisible.

• Débogage: les fonctions anonymes n'ont pas de nom dans les traces de pile, ce qui peut rendre le débogage plus difficile.

• Auto-référence: que faire si la fonction a besoin de se référer à elle-même, pour la récursivité par exemple.

Expression de la fonction de nommage:

Fournir un nom pour votre expression de fonction traite assez efficacement tous ces inconvénients et n'a aucun inconvénient tangible. La meilleure pratique consiste à toujours nommer vos expressions de fonction:

setTimeout(function timeHandler() { // <-- look, a name here!
  console.log("I've waited 1 second");
}, 1000);

Nommer IIFEs (Expression de Fonction Immédiatement Invoquée):

(function IIFE(str) { // <-- look, always name IIFEs!
  console.log(str); // "Hello!"
})('Hello!');

Pour les fonctions assignées à une variable, nommer la fonction, dans ce cas, n'est pas très courant et peut causer de la confusion, dans ce cas, la fonction flèche peut être un meilleur choix.

Je préfère définir la fonction comme variable:

let first = function(x){
   return x[0];
}

Au Lieu de:

function first(){
    ....
}

Parce que je peux utiliser des expressions et des décorateurs lors de la définition de la fonction. Par exemple:

let safe = function(f){
  try {f()...}
}
let last = safe(function(x){return x[0]}).

Aussi avec ES6 son beaucoup plus court:

 let last = x => x[0]
 ...........
 function last(x){
     return x[0];
 }
......

let last = safe(x => x[0]);

Expression dans JS : Quelque chose qui renvoie une valeur
Exemple: Essayez ce qui suit dans la console Chrome:

a = 10
output : 10

(1 + 3)
output = 4

Déclaration/Discours: quelque Chose qui ne retourne pas de valeur
Exemple:

if (1 > 2) {
 // do something. 
}

Ici (1>2) est une expression mais l'état " si " ne l'est pas. Son pas de retourner quoi que ce soit.

De même, nous avons une Déclaration de fonction / Déclaration vs Expression de fonction
Prenons un exemple:

// test.js

var a = 10;

// function expression
var fun_expression = function() {
   console.log("Running function Expression");
}

// funciton expression

function fun_declaration() {
   console.log("Running function Statement");
}

Important: Que se passe-t-il lorsque les moteurs JavaScript exécutent le fichier js ci-dessus.

• Lorsque ce js s'exécute, les choses suivantes se produiront:

  1. La mémoire sera créée variable 'a' et 'fun_expression'. Et la mémoire sera créée pour l'instruction de fonction 'fun_declaration'
  2. " a "seront affectés "indéfini". 'fun_expression' sera affecté à 'undefined'. 'fun_declaration' sera dans la mémoire dans son intégralité.
     Remarque: Les étapes 1 et 2 ci-dessus sont appelées " Contexte d'exécution - Phase de création ' .

Supposons maintenant que nous mettions à jour le js.

// test.js

console.log(a)  //output: udefined (No error)
console.log(fun_expression)  // output: undefined (No error)
console.log(fun_expression()) // output: Error. As we trying to invoke undefined. 
console.log(fun_declaration()) // output: running function statement  (As fun_declaration is already hoisted in the memory). 

var a = 10;

// function expression
var fun_expression = function() {
   console.log('Running function expression')
}

// function declaration

function fun_declaration() {
   console.log('running function declaration')
}

console.log(a)   // output: 10
console.log(fun_expression()) //output: Running function expression
console.log(fun_declaration()) //output: running function declaration

La sortie mentionnée ci-dessus dans les commentaires devrait être utile pour comprendre la différence entre l'expression de fonction et l'instruction/déclaration de fonction.

Un point important à noter est :-

Soit deux fonctions: -

sum(1,2);

const sum = function(first, second) {
  return first + second;
}

Dans le cas ci-dessus, cela donnera l'erreur que sum n'est pas défini, mais

sum(1,2);

function sum(first, second) {
  return first + second;
}

Cette fonction n'aura aucune erreur car Le levage aura lieu dans ce cas.

Déclaration de fonction de différence et expression de fonction:

Javascript a des fonctions de première classe. Cela signifie qu'ils peuvent être traités comme toute autre variable. Les fonctions peuvent être passés comme arguments dans une fonction, être renvoyée par une fonction, et peuvent être stockées dans des variables.

Cependant, stocker une fonction dans une variable ( function expression) n'est pas le seul moyen de créer une fonction, cela peut également être fait via une déclaration de fonction . Voici les principales différences:

1. Les expressions de fonction peuvent être anonymes alors qu'une déclaration de fonction doit avoir un nom.
2. Les deux ont une propriété name qui est utilisée pour identifier la fonction. La propriété name d'une expression de fonction est le nom de la variable à laquelle elle est liée, alors que le nom d'une déclaration de fonction est simplement le nom donné.
3. Les déclarations de fonction sont hissées alors que les expressions de fonction ne le sont pas. Seule la variable est hissée pour avoir la valeur de undefined.

Voici un exemple:

try {
  functionOne();
} catch (e) {
  console.log('i cant run because im not hoisted');
}

functionTwo();

// function expression, does not get hoisted
let functionOne = function randomName() {
    // Some code
};

// function declaration, gets hoisted
function functionTwo() {
   console.log('I get hoisted');
}

try {
  randomName(); // this isn't the proper name, it is functionOne
} catch (e) {
  console.log('You cant call me with randomName my name is function one');
}

:

Une autre différence entre les deux fonctions est que functionOne peut être utilisée comme variable pouvant contenir plusieurs fonctions et functionTwo contient un bloc de code qui est exécuté lorsqu'il est appelé. Veuillez vérifier ci-dessous:

   var functionOne = (function() {
      return {

         sayHello: function(){
                console.log('say hello')

         },
         redirectPage:function(_url){
                window.location.href = _url;
         }

      }
})();

Vous avez le choix de la fonction à appeler. par exemple functionOne.sayHello ou functionOne. redirectPage. Et si vous appelez functionTwo, tout le bloc de code sera exécuté.

Le var functionOne = function() {} définit au moment de l'exécution et de la function functionTwo() {} définit lors de l'analyse en temps.

// Run-Time function declaration 
functionOne(); // Calling functionOne function here will give an Error
var functionOne = function () {
  // Some code
};

// Parse-Time function declaration 
functionTwo(); // Calling functionTwo function will not give an Error
function functionTwo() {
  // Some code...
}

L'explication entre l'exécution et l'analyse temps d'exécution javascript vs temps d'analyse

Vous ne pouvez pas utiliser la méthode .bind() sur les déclarations de fonction, mais vous pouvez sur les expressions de fonction.

Déclaration de Fonction:

function x() {
  console.log(this)
}.bind('string')

x()

Expression de la fonction:

var x = function() {
  console.log(this)
}.bind('string')

x()