Niuanse wyrażeń funkcyjnych w JavaScript

Nazwa Function Expression nie jest nadana bez powodu. Naprawdę oznacza to - że takie funkcje są częścią jakiegoś wyrażenia.

Na przykład, możemy dodać jakiś ciąg znaków i funkcję bez nazwy:

javascriptlet str = 'str' + function() {return 3;};
console.log(str); // wyświetli 'strfunction() {return 3;}'

Dlaczego widzimy taki dziwny wynik, a nie liczbę 3? Ponieważ drugi składnik - to nie wynik działania funkcji, a jej źródłowy kod (przecież tej funkcji nie wywołaliśmy, a po prostu napisaliśmy).

Czyli nazwa wyrażenie funkcyjne oznacza, że taka funkcja bierze udział w jakimś wyrażeniu.

Przypisanie do zmiennej też jest wyrażeniem:

javascriptlet func = function() {
  console.log('!');
};

Można również, na przykład, przekazać funkcję jako parametr do console.log i on wyświetli jej źródłowy kod w konsoli - to też będzie uważane za wyrażenie:

javascriptconsole.log(function() {return 3;});

Dlaczego to jest ważne: ponieważ różnica między Function Declaration a Function Expression wcale nie polega na tym, że pierwsza funkcja jest tworzona z nazwą, a druga początkowo nie ma imienia. Tak nie jest.

Przykład. Oto mamy funkcję bez nazwy, ale przy tym nie bierze udziału w żadnym wyrażeniu (to znaczy nie jest z nią wykonywana żadna akcja, mówiąc prosto):

javascript/*
  Ta funkcja będzie Function Declaration,
  ale z błędem składniowym:
*/
function() {
  console.log('!');
}

Tak kod w ogóle zwróci błąd! Dlaczego: tak jak funkcja nie bierze udziału w żadnym wyrażeniu, to przeglądarka uważa ją za Function Declaration, ale nie znajduje jej nazwy i zwraca błąd.

Aby błąd zniknął, trzeba sprawić, żeby funkcja stała się częścią jakiegoś wyrażenia. Na przykład, napiszmy przed nią operację +:

javascript+function() { // taki kod jest poprawny
  console.log('!');
};

Jak to działa: sama operacja + nic nie robi, to tak jak napisać zamiast liczby 3 liczbę +3 - dopuszczalne, ale nic nie zmienia.

Ale w przypadku funkcji - zmienia. Teraz nasza funkcja już nie jest po prostu napisana, a bierze udział w wyrażeniu. Dlatego błędu już nie będzie. Wyniku wykonania funkcji też nie będzie, przecież ją po prostu napisaliśmy, ale nie wywołaliśmy.

Zamiast + można napisać cokolwiek. Na przykład:

javascript-function() { // taki kod jest poprawny
  console.log('!');
};

!function() { // taki kod jest poprawny
  console.log('!');
};

Można również wziąć naszą funkcję w okrągłe nawiasy, w tym przypadku również stanie się wyrażeniem funkcyjnym:

javascript(function() { // taki kod jest poprawny
  console.log('!');
});

javascriptfunction func() {
  console.log('!');
}

javascriptlet func = function() {
  console.log('!');
}

javascript+function() {
  console.log('!');
}

javascript!function func() {
  console.log('!');
}

javascript-function func() {
  console.log('!');
}

javascript1 + function func() {
  console.log('!');
}

javascript(function func() {
  console.log('!');
})

javascriptconsole.log(
  function() {
    console.log('!');
  }
);