Questa è chiamata espressione di funzione:

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

Questa è chiamata una dichiarazione di funzione:

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

Spero che questo aiuti a spiegare qual è la differenza tra l'espressione della funzione e la dichiarazione della funzione e come usarle. Grazie.

La prima è un'espressione di funzione anonima :

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

Mentre la seconda è una dichiarazione di funzione :

function functionTwo () {
  // some code
}

La principale chiara differenza tra entrambi è il nome della funzione poiché Le funzioni anonime non hanno un nome da chiamare.

Funzioni denominate vs. Funzioni anonime

La funzione anonima è veloce e facile da digitare, e molte librerie e strumenti tendono ad incoraggiare questo stile idiomatico di codice. Tuttavia, le funzioni anonime hanno alcuni svantaggi :

• Leggibilità: le funzioni anonime omettono un nome che potrebbe causare un codice meno leggibile.

• Debug: le funzioni anonime non hanno nome nelle tracce dello stack, il che può rendere più difficile il debug.

• Self-Reference: cosa succede se la funzione deve fare riferimento a se stessa, ad esempio per la ricorsione.

Espressione della funzione di denominazione:

Che fornisce un nome per la tua espressione di funzione risolve in modo abbastanza efficace tutti questi inconvenienti e non ha aspetti negativi tangibili. La migliore pratica è nominare sempre le espressioni della funzione:

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

Denominazione IIFEs (espressione di funzione invocata immediata):

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

Per le funzioni assegnate a una variabile, nominare la funzione, in questo caso, non è molto comune e può causare confusione, in questo caso, la funzione freccia potrebbe essere una scelta migliore.

Preferisco definire la funzione come variabile:

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

Invece di:

function first(){
    ....
}

Perché posso usare espressioni e decoratori quando definisco la funzione. Ad esempio:

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

Anche con ES6 è molto più breve:

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

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

Espressione in JS : Qualcosa che restituisce un valore
Esempio: Prova a seguire in chrome console:

a = 10
output : 10

(1 + 3)
output = 4

Dichiarazione / Dichiarazione : Qualcosa che non restituisce un valore
Esempio:

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

Qui (1 > 2) è un'espressione ma lo stato 'if' non lo è. Non restituisce nulla.

Allo stesso modo, abbiamo Dichiarazione di funzione / Dichiarazione vs Espressione di funzione
Facciamo un esempio:

// 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");
}

Importante: Cosa succede quando i motori JavaScript eseguono il file js sopra.

• Quando questo js viene eseguito le seguenti cose accadranno:

  1. Memoria verrà creata variabile ' a 'e ' fun_expression'. E la memoria verrà creata per l'istruzione function 'fun_declaration'
  2. 'a' verrà assegnato 'undefined'. 'fun_expression' verrà assegnato 'undefined'. 'fun_declaration' sarà nella memoria nella sua interezza.
     Nota: i passaggi 1 e 2 sopra sono chiamati " Contesto di esecuzione - Fase di creazione " .

Ora supponiamo di aggiornare il js a.

// 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

L'output menzionato sopra nei commenti, dovrebbe essere utile per comprendere la differenza tra espressione di funzione e istruzione/dichiarazione di funzione.

Un punto importante da notare è: -

Lascia che ci siano due funzioni: -

sum(1,2);

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

Nel caso precedente, darà errore che sum non è definito, ma

sum(1,2);

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

Questa funzione non sarà alcun errore come Sollevamento avrà luogo in questo caso.

Dichiarazione di funzione di differenza ed espressione di funzione:

Javascript ha funzioni di prima classe. Ciò significa che possono essere trattati come qualsiasi altra variabile. Le funzioni possono essere passate come argomenti in una funzione, essere restituite da una funzione, e possono essere memorizzate nelle variabili.

Tuttavia la memorizzazione della funzione in una variabile (espressione di funzione) non è l'unico modo per creare una funzione, questo può essere fatto anche tramite una dichiarazione di funzione . Qui ci sono i differenze chiave:

1. Le espressioni di funzione possono essere anonime mentre una dichiarazione di funzione deve avere un nome.
2. Entrambi hanno una proprietà name che viene utilizzata per identificare la funzione. La proprietà name di un'espressione di funzione è il nome della variabile a cui è associata, mentre il nome di una dichiarazione di funzione è semplicemente il nome dato.
3. Le dichiarazioni di funzione vengono sollevate mentre le espressioni di funzione non lo sono. Solo la variabile viene issata per avere il valore di undefined.

Ecco un esempio:

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');
}

:

Un'altra differenza tra entrambe le funzioni è functionOne può essere usato come una variabile che può contenere più funzioni all'interno e functionTwo contiene un blocco di codice che viene eseguito tutto quando viene chiamato. Si prega di controllare qui sotto:

   var functionOne = (function() {
      return {

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

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

      }
})();

Hai la possibilità di scegliere quale funzione chiamare. ad esempio functionOne.sayHello o functionOne. redirectPage. E se chiami functionTwo, l'intero blocco di codice verrà eseguito.

var functionOne = function() {} definisce in fase di esecuzione e function functionTwo() {} definisce in fase di analisi.

// 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...
}

La spiegazione tra Run-time e Parse-time tempo di esecuzione javascript vs tempo di analisi

Non è possibile utilizzare il metodo .bind() sulle dichiarazioni di funzione, ma è possibile sulle espressioni di funzione.

Dichiarazione di funzione:

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

x()

Espressione della funzione:

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

x()