Mam wstydliwe Noob pytanie! Robię into JS z innego języka i przez tłumaczenie kumpla już całkiem zgłupiałem. Czym się różnią poszczególne zapisy?
function rangeNum(arr) {
}
const rangeNum = (arr) => {
}
let rangeNum = (arr) => {
}
Wiem, że let i const są z ES6 i kolega mówił żeby nie zważać na var i function. Tami trzema zapisami na dobrą sprawę da się osiągnąć dokładnie to samo... Coś mi tu jednak lekko nie pasuje i wolałbym dopytać kogoś żyjącego z JS na co dzień.
Używając funkcji strzałkowej () => {} zachowujesz kontekst funkcji nadrzędnej. Nie zawsze chcemy osiągnąć taki rezultat, więc "klasyczny" zapis z użyciem function jest jak najbardziej na miejscu. Co do użycia let i const, to po prostu przy const zabezpieczasz się przed potencjalnym nadpisaniem tej zmiennej i nic poza tym.
Warto jeszcze wspomnieć, że JS ma coś takiego co się zwie 'hoisting' (dotyczy deklaracji)
JavaScript foo(); // Zauważ, że wykonujemy 'foo' przed zadeklarowaniem. To się wykona poprawnie.
function foo() {
...
}
natomiast:
bar(); // TypeError: bar is not a function. Tutaj hoisting nie zadziała.
var bar = function bar() {
...
}
Co do let i const - wprowadzają one zakres blokowy (w JS mamy 'domyślnie' zakres w stosunku do funkcji).
function baz() {
if(true) {
let someLet = 'let';
var someVar = 'var';
}
console.log(someVar); // 'var' <- var ma zakres funkcji
console.log(someLet); // ReferenceError: someLet is not defined
}
Co do const, to tak jak napisał orkin - zapobiega nadpisaniu, czyli:
function foo() {
const SOME_VALUE = 21;
SOME_VALUE = 22; // TypeError: invalid assignment to const `SOME_VALUE'
}
ale mała uwaga, np.:
function foo() {
const SOME_ARR = [1, 2, 3];
SOME_ARR.push(4); // Ok, można dodać do tablicy kolejny element.
}
To z czym powinieneś się jeszcze zapoznać, to this w funkcji klasycznej vs funkcji strzałkowej.
A jeśli idzie o let i const to TDZ (the temporal dead zone).
Czarny Mleczarz napisał(a):
natomiast:
bar(); // TypeError: bar is not a function. Tutaj hoisting nie zadziała. var bar = function bar() { ... }
No właśnie hoisting tutaj zadziałał. Hoisting polega tylko i wyłącznie na przerzuceniu deklaracji zmiennej na początek scope'a, a nie całej definicji. Powyższy przykład, który napisałeś potwierdza te założenia.
Jeżeli próbujesz odwołać się do zmiennej zadeklarowanej poprzez var jeszcze zanim deklaracja nastąpi:
console.log(zmienna)
var zmienna = 'text'
Otrzymasz wartość undefined, co jest spowodowane właśnie działaniem hoistingu, bo powyższy kod zostanie przez interpreter przerobiony na:
var zmienna
console.log(zmienna)
zmienna = 'text'
Jeżeli natomiast zrobisz to samo, ale z użyciem let lub const:
console.log(zmienna)
let zmienna = 'text'
Nie otrzymasz już undefined, tylko throw z błędem zmienna is not defined, bo przez brak hoistingu deklaracja zmiennej nie została przerzucona na początek scope'a
Trochę odbiegłem od tematu, ale wolałem wyjaśnić sprawę by nie było niedopowiedzeń :P