Operatory porównania, logiczne oraz bitowe w JavaScript

Tak jak obiecałem, we wczorajszym artykule wracamy dzisiaj to tematu operatorów w języku JavaScript. Przypomnę, że operatory w JavaScripcie możemy podzielić na 5 grup: operatory arytmetyczne, operatory przypisania, operatory porównania, operatory logiczne oraz operatory bitowe. Operatory arytmetyczne oraz przypisania zostały już omówione, także dzisiaj omówimy pozostałe 3 grupy tj. operatory porównania, logiczne oraz bitowe.

Zacznijmy od operatorów porównania. Operatory porównania, zwane też relacyjne, często są używane w instrukcjach warunkowych "if", instrukcje te zostaną dopiero opisane w kolejnych artykułach. Dzięki tym operatorom możesz porównać lewą stronę wyrażenia do prawej. Wynikiem takiego porównania jest zawsze boolean, czyli prawda (true) lub fałsz (false). Przejdę od razu do przykładu:

let x = 1;
console.log(x > 0); //true, ponieważ 1 jest większe od 0
console.log(x >= 1); //true, ponieważ 1 jest większe bądź równe 1
console.log(x < 1); //false, ponieważ 1 nie jest mniejsze od 1
console.log(x <= 1); //true, ponieważ 1 jest mniejsze bądź równe 1

Powyższe przykłady są proste i na pewno znałeś już je wcześniej z matematyki. Przejdźmy do czegoś bardziej skomplikowanego:

console.log(x === 1); //true
console.log(x !== 1); //false

Na powyższym przykładzie sprawdzamy czy x jest równy 1 (x === 1), oraz czy x jest różny od 1 (x !== 1). Porównanie, w którym występują 3 znaki równości porównuje typ zmiennej oraz wartość.

console.log(1 === 1); //true
console.log('1' === 1); //false

Jak widzisz na powyższym przykładzie, w 1 równaniu otrzymaliśmy wartość true, ponieważ zarówno wartość jak i typ zmiennych są takie same. W 2 równaniu otrzymaliśmy wartość false, ponieważ, wartość jest taka sama, ale typ zmiennych jest różny. W JavaScript występuję jeszcze inny typ porównań - 2 znaki równości, którego interesuje tylko wartość porównywanych zmiennych:

console.log(1 == 1); //true
console.log('1' == 1); //true, to jest to samo co ('1' == '1')
console.log(true == 1); //true,  to jest to samo co (true == true)

Jeżeli typy się nie zgadzają, konwertuje typ, który jest po prawej stronie do typu, który jest po stronie lewej.

Przejdźmy to operatorów logicznych. W tym akapicie przedstawię Ci 3 typy operatorów logicznych: koniunkcję, alternatywę oraz negację.

Koniunkcja czyli && (AND) zwraca "true", jeżeli oba warunki po lewej i prawej stronie są spełnione:

console.log(true && true); //true
console.log(false && true); //false
console.log(true && false); //false
console.log(false && false); //false

Myślę, że również nie jest to nic skomplikowanego. Koniunkcję również, często jest używana w instrukcjach warunkowych. Abyś lepiej zrozumiał, jak to działa w praktyce postaram Ci się to przedstawić na przykładzie. Powiedzmy, że aby kupić w kinie bilet musisz mieć 30 zł i mieć ukończone 15 lat. Czyli, aby kupić ten bilet muszą być spełnione oba warunki, czyli koniunkcja.

let enoughMoney = true;
let atLeastFifteenYearsOld = true;
console.log(enoughMoney && atLeastFifteenYearsOld); //true, możesz kupić bilet
enoughMoney = false;
atLeastFifteenYearsOld = true;
console.log(enoughMoney && atLeastFifteenYearsOld); //false, nie możesz kupić biletu (nie masz pieniędzy na bilet)
enoughMoney = true;
atLeastFifteenYearsOld = false;
console.log(enoughMoney && atLeastFifteenYearsOld); //false, nie możesz kupić biletu (nie masz ukończone 15 lat)
enoughMoney = false;
atLeastFifteenYearsOld = false;
console.log(enoughMoney && atLeastFifteenYearsOld); //false, nie możesz kupić biletu (nie masz pieniędzy, ani nie masz ukończone 15 lat)

Alternatywa czyli || (OR), zwraca "true", jeżeli przynajmniej 1 z 2 warunków jest spełniony.

console.log(true || true); //true
console.log(false || true); //true
console.log(true || false); //true
console.log(false || false); //false

Negacja czyli ! (NOT), zwraca po prostu przeciwieństwo.

let enoughMoney = false;
console.log(!enoughMoney); //true

W JavaScripcie operatorów logicznych możesz używać również do wartości innych niż boolean.

console.log(false || true); //true
console.log(false || 'Kazimierz'); //'Kazimierz'
console.log(false || 312); //312

Zastanawiasz się pewnie jak to działa. Zanim przejdę do wyjaśnienie, przedstawię Ci coś takiego jak falsy (false) oraz truthy (true). W JavaScripcie falsy to: undefined, null, 0, false, '', Nan. Wszystko co nie jest falsy jest truthy. Wracając do powyższych przykładów:

console.log(false || 'Kazimierz'); //'Kazimierz', ponieważ 'Kazimierz' jest truthy
console.log(false || 312); //312, ponieważ 312 jest truthy
console.log(false || 312 || 222); //312, ponieważ zwraca pierwszy truthy.

Ostatnim typem operatorów, który omówię Ci w tym artykule są operatory bitowe. Przedstawię Ci operator bitowy OR oraz operator bitowy AND. Aby zrozumieć operatory bitowe, trzeba wiedzieć jak zapisywane są liczby w zapisie binarnym, przedstawię Ci to na prostym przykładzie:

//1 = 00000001
//2 = 00000010
console.log(1 | 2); //3

Wynikiem jest 3, ponieważ robisz alternatywę (pionową) liczby 1 i liczby 2 zapisanej bitowo. Czyli tam gdzie jest są dwa 0 zapisujesz 0, a tam gdzie jest przynajmniej jedna 1 zapisujesz 1. Czyli alternatywa zapisana bitowo będzie wyglądać w taki sposób:

//S = 00000011; //3, w zapisie dziesiętnym
console.log(1 & 2); //0

Wynikiem jest 0, ponieważ robisz koniunkcję (pionową) liczby 1 i liczby 2 zapisanej bitowo. Czyli tam gdzie są dwie 1 zapisujesz 1, a w pozostałych przypadkach 0. Czyli koniunkcja zapisana bitowo będzie wyglądać w taki sposób:

//S = 00000000; //0, w zapisie dziesiętnym

Jeszcze na koniec przypomnę o kolejności operatorów. Kolejność operatorów jest taka sama jak w matematyce.

let x = 2 + 2 * 2;
console.log(x); //6, ponieważ mnożenie ma pierwszeństwo
x = (2 + 2) * 2;
console.log(x); //8, ponieważ działanie w nawiasach wykonuje się najpierw

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam do kolejnego artykułu z serii podstawy programowania w języku JavaScript.

Kolejny artykuł - Instrukcja warunkowa if w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Operatory porównania, logiczne oraz bitowe w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły