Obiekty JS -> notacja kropkowa vs. nawiasowa

Jeju, jak to dziwnie brzmi po polsku! „Notacja kropkowa”. „Notacja nawiasowa”. Tak właśnie brzmi gwałt na języku JavaScript.

Pozwólcie więc, że łamiąc patriotyczny język tego bloga będę pisać dot notation albo bracket notation.

Niechlubnie się przyznając, często bezmyślnie stosowałam te techniki. Nawet nie potrafię powiedzieć, którą częściej wybierałam. Pewnie z kropką, jak większość internetów. Jakoś nie zastanawiałam się nad wyborem jednej czy drugiej opcji. Wiedziałam o ich istnieniu i tyle mi wystarczało do pełni szczęścia. Nadszedł jednak ten dzień, kiedy postanowiłam znaleźć różnice między tymi notacjami.

Operatory pamięci

Słowem wstępu – do wartości obiektu możemy dobrać się za pomocą dwóch notacji:  dot notation albo bracket notation. Są to tzw. operatory pamięci (klik).

let myObject = {
  myKey: myValue
}
myObject.myKey; //dot notation
myObject["myKey"]; //bracket notation

Teraz do konkretów. Taki przykład:

let food = {
 healthyFood: 'Warzywa i owoce!',
 junkFood: 'Wieśmac i inne hamburgery!'
};

let breakfast = food.healthyFood;
console.log(breakfast); // Warzywa i owoce!

let dinner = food['healthyFood'];
console.log(dinner); // Warzywa i owoce!

//A teraz gwóźdź programu...

let junkFood = 'healthyFood';

let lunch = food[junkFood];
console.log(lunch); // Warzywa i owoce!

let brunch = food.junkFood;
console.log(brunch); // Wieśmac i inne hamburgery!

Z pewnością już widzicie najbardziej istotną różnicę między omawianymi notacjami.

Porównanie

Bracket notation szuka w obiekcie klucza o wartości zmiennej junkFood, czyli szuka healthyFood.
Dot notation szuka w obiekcie klucza o wartości junkFood. Nie widzi zmiennej junkFood!

Bracket notation -> nazwą klucza MOŻE być zmienna!
 Dot notation -> nazwą klucza NIE MOŻE być zmienna!

Co mi to daje? Prosta sprawa – ile razy pisałeś podobną pętlę?

for (let key in object) {
  console.log(object[key]);
}

Bracket notation daje możliwość przeiterowania własności obiektu, nie znając ich kluczy. Choć uwaga – ES2017 daje nam takie magiczne sztuczki jak Object.values oraz Object.entries, za pomocą których dobierzesz się zarówno do kluczy, jak i wartości obiektu. Mimo wszystko – uważam, że dobrze znać różne rozwiązania tego samego problemu.

Ale to nie koniec różnic!

Bracket notation -> nazwa klucza może być dowolnym łańcuchem znaków; może zawierać odstępy, może zaczynać się od liczby

Dot notation –> nazwa klucza musi być sekwencją znaków alfanumerycznych (włączając w to znak podkreślenia  _ oraz znak dolara $), która nie zaczyna się od cyfry

Ktoś zapytałby – to której notacji używać? Która jest lepsza?

Ktoś odpowiedziałby – zależy. Od preferencji. Od stylu pisania. Od konwencji przyjętej w projekcie. Od humoru, ułożenia gwiazd czy fazy księżyca. Większość ludzi używa notacji z kropką – w teorii jest bardziej czytelna i szybciej się ją pisze. Pozwala też uniknąć wielu faux pas przy wymyślaniu nazw kluczy właściwości obiektów. Generalnie mówi się tak: używać notacji z kropką, a jeśli nie da rady – to z nawiasami.

Niby taka prosta, podstawowa wiedza, a jakże mało popularna, co nie?