Kiedy użyć function, a kiedy let/const?

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)

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

Niefortunnie się wyraziłem z tym 'Tutaj hoisting nie zadziała'.