Przydatne operatory javascript cz. 1

Operatorów w JavaScript jest mnóstwo, a nadal wychodzą co nowsze i bardziej nowoczesne, stanowiące lukier składniowy do starszych konstrukcji. Przeczytaj o takich operatorach jak: ternary operator, OR, END, czy double negation.

Wprowadzenie

Często pisząc kod jesteśmy w stanie tak napisać daną funkcję, że po czasie zdajemy sobie sprawę, jak prościej można by było ją napisać. Dziś poruszymy sobie przypadki, w których sprawne posługiwanie się operatorami zwiększa czytelność, przyspiesza pisanie kodu oraz zwiększa performence aplikacji. Zapraszam do przeczytania pierwszego z dwóch wpisów o przydatnych operatorach w JS.

Operator potęgowania / Exponentiation operator [**]

Na początek coś lekkiego. Opeartor potęgowania [**] został wprowadzony w ES7, a jego głównym zadaniem jest zastąpienie wyrażeniaMath.pow() służącego do, a jakże, działania potęgowania. Operator jest przedstawicielem terminu syntactic sugar. Zapamiętaj go sobie dobrze, ponieważ większość nowych elementów składni w standardach ES to właśnie syntactic sugar. Oznacza ono nowe, często prostsze przekształcenie składniowe mające na celu wyeliminować konieczność korzystania ze starego, bardziej złożonego i najczęściej brzydszego wyrażenia skladniowego, ale zachowując przy tym dokładnie tą samą funkcjonalność.


Spójrzmy więc zatem, w jaki sposób używać nowego operatora potęgi:
2 ** 5; // 2^5 = 32
Prawda, że znacznie prostsza i czytelniejsza składnia. A jak wygląda stara?
Math.pow(2,5);    // korzystamy tutaj z obiektu predefiniowanego

Podwójna negacja / Double negation [!!]

Jest to raczej trik, aniżeli osobny operator, ale uznałem, że warto będzie o tym wspomnieć. Podwójna negacja złożona jest z dwóch operatorów negacji i zapewnia szybką weryfikację czy dana zmienna jest fałszopodobna (falsy value), czy prawdziwa. Do wartości falsy zaliczają się między innymi następujące wartości:

false słowo kluczowe false
0 liczba 0
"", '', `` pusty string
null przypisany null
undefined prymitywna wartość
NaN nie-liczba :)

Więc teoretycznie, do wszystkich powyższych wartości, dzięki zastosowaniu podwójnej negacji otrzymamy jej wartość przeciwną - a następnie jeszcze raz przeciwną do niej. Podwójna negacja zawsze będzie zwracać wartość prymitywną boolowską, czyli true lub false. Najlepiej opisać to na kodzie:

const someString = 'Hello World!';
!!someString;     // false

!!false     // false
!!true      // true

!!1             // true
!!0            // false

!!undefined      // false

Trik ten pozwala w szybki sposób sprawdzić, czy mamy do czynienia z wartością truthy, czy falsy, co często bywa przydatne.

Operator warunkowy / Ternary operator [?:]

Ternary operator w js dostępny chyba nawet przed ES5. Mimo, że jest obecny w składni JS już wiele lat, to nadal nie wszędzie wykorzystywany jest jego potencjał. Stanowi swoisty shorthand do konstrukcji if else, tym samym przyśpieszając pisanie kodu. Nie stosując ternary operatora napisalibyśmy podobny kawałek kodu:

let message;

if (isSignedIn) {
  message = 'Hello again!';
} else {
  message = 'Not signed in.';
}

A stosując shorthand:

const message = isSignedIn ? 'Hello again!' : 'Not signed in';

Zauważ, że oprócz zaoszczędzenia kilku linii kodu (co jest samą w sobie już wystarczającą zaletą), otrzymujemy inny scope zmiennej message - nie musimy jej deklarować tylko po to, żeby leksykalny zakres się zgadzał.

Operator OR [||] oraz AND [&&]

Nikomu nie muszę przedstawiać tych operatorów. Są one obecne prawdopodobnie w każdym języku programowania. Chciałbym je jednak tutaj umieścić, bo stanowią bardzo przydatny usage w wielu sytuacjach w kodzie, a ponadto są shorthandem do konstrukcji if, a nawet do poprzedniego operatora - porównania. W javascripcie podczas przypisania do instancji lub zwracania w funkcji, OR i AND zwracają konkretne wartości. Przeanalizujmy OR:

const someDummyValue = 'reactywny.pl';

const isTrue = someDummyValue || 1;
console.log(isTrue);   // reactywny.pl

W powyższym przykładzie używamy OR do przypisania wartości. Wartości zmiennej someDummyValue - jeśli jest ona truthy lub wartości - jeśli pierwsza lewa wartość będzie falsy. Nie ma znaczenia czy prawa skrajna wartość operatora OR będzie prawdziwa lub fałszywa - operator w ostateczności zawsze zwróci tą wartość. Tak jak w poniższym przypadku:

const isTrue = someDummyValue || null || false;
console.log(isTrue);   // false
isTrue

Jak widzisz możemy używać nawet więcej niż dwóch wartości. Operator OR przydatny jest również, kiedy przypisujemy to samą wartość zmiennej do instancji bądź obiektu. Używając ternary operatora wyglądałoby to przykładowo w ten sposób:

const isMallOpen = false;

const mallStore = {
  isOpen: isMallOpen ? isMallOpen : false,
};

Operator OR daję nam lepszą możliwość:

const mallStore = {
  isOpen: isMallOpen || false,
};

Prawda, że czystsze? Operator AND [&&] zwraca zawsze prawą skrajną wartość jeśli wszystkie z podanych warunków są prawdziwe:

const test = 'someString' && true && 1;
console.log(test);  // 1

Natomiast ciekawa sytuacja następuje kiedy więcej niż jeden z warunków jest fałszywych:

const test = 'someString' && null && false;
console.log(test);  // null

W takim przypadku nastąpi przypisanie pierwszej fałszywej wartości od lewej.

Zakończenie

Temat operatorów chciałbym podzielić na dwie części - dzisiejszą, nieco mniej nowoczesną jeżeli chodzi o operatory, i następną, która ukaże się niebawem. Dzisiaj przekazałem ci wiedzę na temat 4 operatorów, o których prawdopodobnie wiedziałeś, bądź wiedziałaś, ale chciałem zwrócić uwagę na poszczególne use cases, w któych te operatory mogą okazać się naprawdę przydatne. Do zobaczenia niebawem!

© Damian Kalka 2021
Wszelkie prawa zastrzeżone