#4 JavaScript od Patysia czyli arrows – ES6

#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.

 arg => {
  // ... code goes here
}

2 Replies to “#4 JavaScript od Patysia czyli arrows – ES6”

  1. Jeszcze jedna rzecz nt funkcji strzałek – nie tworzą one nowego scopa dla `this`. Ogólnie arrowy najlepiej sprawdzają się tam, gdzie trzeba przekazać prostego callbacka, np. przy [].sort(). W wielu miejscach warto pozostać przy standardowym zapisie.

Leave a Reply

Your email address will not be published. Required fields are marked *

*