var foo = function bar(){} vs function foo(){}

Question

Witam. Juz ktorys raz spotykam sie z takim czyms

var foo = function bar(){console.log('test')}

Czym to sie rozni od

function foo(){console.log('test')}

I kiedy sie tego uzywa? Czym to przypisanie funkcji do zmiennej w ogole jest?

Answer 1

Function expression vs function declaration

Bardzo ciekawie różnica jest wyjaśniona w tym artykule. (Przy okazji dowiesz się czym jest hoisting)

---

Function declaration jest trochę pobłażliwe, ale moim zdaniem krótsze i czytelniejsze. Ważne, żeby wiedzieć, gdzie go używać.

Comments

Czemu pobłażliwe?

---

Ponieważ, na poziomie kodu, toleruje wywołanie funkcji przed jej definicją

---

Od tego są lintery. IMO ograniczenia spowodowane zrobieniem z funkcji zmiennej są o wiele gorsze niźli przewidywalny hoisting.

---

Przypisywanie funkcji do zmiennej ma taką zaletę, że można przez let/const ograniczyć dostępność funkcji do bloku. Pamiętam też, że w IE i bodajże starszych Firefox nie można tworzyć zagnieżdżonych funkcji słówkiem function.

---

Pamiętam też, że w IE i bodajże starszych Firefox nie można tworzyć zagnieżdżonych funkcji słówkiem function.

W sensie

function cos() {
    function cos2 {}
}

? Taki kod bez problemu działa w IE nawet w quirks mode.

Przypisywanie funkcji do zmiennej ma taką zaletę, że można przez let/const ograniczyć dostępność funkcji do bloku.

Przecież ES6 definiuje w strict mode blokowy zasięg dla funkcji:

'use strict';

{
	function fn() {}
}

fn(); // Error

 

---

Taki kod bez problemu działa w IE nawet w quirks mode

Pamiętam, że pojawiał się podobny błąd.

Tu nawet jest coś o tym wspomniane:

https://msdn.microsoft.com/library/br230269(v=vs.94).aspx

, konkretnie w wierszu tabeli, gdzie znajduje się komórka:

Funkcja zadeklarowana wewnątrz instrukcji lub bloku

Kojarzę, że napotkałem kiedyś problem z tworzeniem funkcji w funkcji lub w bloku przez słówko function. 

---

Przecież ES6 definiuje w strict mode blokowy zasięg dla funkcji:

Tego nie wiedziałem.

---

No tak, bo strict mode w ES5 zabraniał definiowania funkcji wewnątrz bloków… Niemniej ES6 zmienia to zachowanie. Więc na dobrą sprawę zostajemy z IE10-11, które mogą rzucać błędami dla funkcji deklarowanych w blokach ;)

---

Hmm..., to może w tym przypadku przypisanie funkcji do zmiennej ma sens:

let fooRef;

{
	const bar = 'Hello World!';
	fooRef = foo;

	function foo() { console.log(bar); }
}

fooRef(); // Hello World!

"Wyciągnięta" z bloku funkcja foo ma, dzięki domknięciu, dostęp do zmiennej blokowej bar. Przykład pewnie nie życiowy, ale myślę że jakieś zastosowanie by się znalazło.

Answer 2

W pierwszym przypadku masz przypisanie funkcji do zmiennej - użyć tej funkcji będziesz mógł dopiero po deklaracji, w przypadku drugim natomiast w obrębie całego pliku.

Comments

Wybacz ale dalej nie rozumiem. Jak sie wywoluje taka zmienna/funkcje? I dlaczego ma ta deklaracja fcji nazwe?

---

w przypadku drugim natomiast w obrębie całego pliku

Nie do końca. Jeśli funkcję utworzoną ze słówkiem function utworzysz w lokalnym scope, to nie będziesz mieć do niej dostępu spoza tego scope.

Jak sie wywoluje taka zmienna/funkcje?

Tak samo. Funkcja to w JavaScript obiekt, który posiada wewnętrzną metodę [[call]]. Dzięki niej możesz wywołać kod znajdujący się wewnątrz niej.

W jaki sposób byś nie stworzył funkcji: przez wyrażenie (czyli przypisując do zmiennej lub tworząc IIFE), twierdzeniem (statement, wspomniane słówko function), konstruktorem (ze słówkiem new) - wywołujesz ją tak samo poprzez dopisanie po jej nazwie dwóch nawiasów i ewentualnie przekazując tam parametry.

 

---

Dobra dalej mam troche ziemniaka w glowie. Po co w takim razie jest to bar w tym wypadku?

var foo = function bar (){} ? W sensie po co dajemy bar do tej funkcji? I jak to wywolac? foo() czy bar()?

Jakby bylo po prostu function bar(){} to wywolanie wyglada bar(). A w przypadku wyzej?

---

bar to bezpośrednia nazwa dla funkcji i jest dostępna w ciele tej funkcji. Korzystając z niej, możesz bez udziału zewnętrznego scope, czy wskaźnika this (który lubi się "zgubić") wywołać funkcję bar rekurencyjnie lub zrobić z nią coś innego. Rzadko jednak widziałem stosowanie takiej techniki.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function#Named_function_expression

---

Najlepszy opis tego mechanizmu: https://kangax.github.io/nfe/

Rzadko jednak widziałem stosowanie takiej techniki.

Osobiście dość często go stosuję. 

---

Osobiście dość często go stosuję.

Jakie korzyści Cię do tego skłaniają?

---

Głównie elegancka rekurencja czy taka sztuczka, jak możliwość odpięcia anonimowego listenera wewnątrz niego samego.

---

Czy nazywasz wtedy funkcję tak jak zmienną do niej przypisaną (albo klucz obiektu), czy stosujesz jakąś konwencję nazewniczą?

---

Zależy. Ostatnio np. chciałem po prostu mieć wewnętrzny uchwyt i tyle.