#4 JavaScript od Patysia czyli arrows - ES6

Hej

Wprowadzono wiele nowości do JavaScript. W dodatku są super. Zaczniemy od arrows. Pozwala pisać znacznie krócej funkcje. Jest to szczególnie przydatne w jednolinikowych funkcjach albo w callbackach.

Cztery linie w jednej

Gdy zobaczyłem jak wygląda kod ES6 na początku byłem zagubiony. Masa dziwnych znaków, brakujące nawiasy albo raz są a raz nie ma. Wydawało mi się to kompletnie nieintuicyjne. Jednak kiedy zacząłem używać ES6 to z każdym dniem doceniałem go coraz bardziej. Zobaczcie sami:

function sort(a, b) {
  if (a < b) return 1
  else return -1
}

Piękna i standardowa funkcja do sortowania. Jednak zajmuje sporo miejsca a mało robi. Spójrzcie teraz na to:

const sort = (a,b) => a < b ? 1 : -1

Jak dla mnie wygląda naprawdę spoko.

Robimy sobie stałą o nazwie sort.

const sort

Przypisujemy do niej funkcję.

sort = (a, b)

I określamy co ona ma robić.

(a ,b) => a < b ? 1 : -1

Słowem wyjaśnienia co robi funkcja:

a < b ? 1 : -1

czyli:

if (a < b) return 1 else return -1

Nasz if przeskakuje za warunek i zmienia się na ?, a else na :

Od podszewki

Tak wygląda arrow function.

() => {}

Na początku argumenty, następnie strzałka i co się dzieje.

Zasady

No i teraz wszystkie możliwe kombinacje po kolei :) Nie musisz ich znać na pamięć, ale z czasem staną się intuicyjne.

1. Brak {}

arg => arg + 1

arg => { return arg + 1 }

Obie funkcje powyżej robią to samo. Domyślnie arrow function robi return wyniku, czyli w powyższym przypadku zwróci nam arg powiększony o jeden.

2. Brak () w argumentach

(arg) => arg + 1

arg => arg + 1

Jeśli jest tylko jeden argument możemy spokojnie pominąć () wokół argumentu.

3. Długi kod

Oczywiście bez problemu można pisać wielolinikowe funkcje.

  // ... code goes here
}