Operatory
Pisząc nasze skrypty nie raz i nie dwa będziemy wykonywać wiele równań. Część zapisów znamy z lekcji matematyki, natomiast w programowaniu pojawia nam się kilka specyficznych zapisów, które omówimy sobie poniżej.
const x = 5;
//dodawanie, odejmowanie, mnożenie, dzielenie
console.log(x + 2); //7
console.log(x - 1); //4
console.log(x * 3); //15
console.log(x / 2); //2.5
//% - modulo czyli reszta z dzielenia
console.log(x % 2); //1
console.log(9 % 3); //0
//** - potęgowanie
console.log(x ** 2); //25 - równoznaczne z Math.pow(x, 2)
console.log(3 ** 3); //27 - równoznaczne z Math.pow(3, 3)
let y = 24;
if (y % 2 === 0) {
console.log(`Liczba ${y} jest parzysta`);
}
Operatory przypisania
Czyli operatory, które służą do przypisania do zmiennej jakiejś wartości, pola, obiektu itp.
Poniżej zamieszczamy przykłady dla x = 10 i y = 5:
{
let x = 5;
x += 3; //równoznaczne z x = x + 3;
console.log(x);
}
{
let x = 5;
x -= 3; //równoznaczne z x = x - 3;
console.log(x);
}
{
let x = 5;
x *= 3; //równoznaczne z x = x * 3;
console.log(x); //15
}
{
let x = 12;
x /= 3; //równoznaczne z x = x / 3;
console.log(x); //4
}
{
let x = 11;
x %= 3; //równoznaczne z x = x % 3;
console.log(x); //2
}
Zwiększenie lub zmniejszenie wartości o 1 możemy wykonać tak jak w powyższych przykładach, ale też możemy skorzystać z operatorów inkrementacji i dekrementacji:
let x = 5;
x++; //równoznaczne z x = x + 1;
console.log(x); //6
let y = 5;
y--; //równoznaczne z y = y - 1;
Operatory inkrementacji i dekrementacji, które mogą występować przed zmienną lub po zmiennej.
Gdy występuje przed zmienną, zwiększenie jej wartości nastąpi w danej instrukcji. Jeżeli występuje po zmiennej, zwiększona wartość wystąpi dopiero w kolejnej instrukcji.
let x = 5;
console.log(x++); //5
console.log(x); //6
let y = 5;
if (y-- < 5) { //nie zadziała
console.log(y); //4
}
let x = 5;
console.log(++x); //6
console.log(x); //6
let y = 5;
if (--y < 5) {//zadziała
console.log(y); //4
}
Z powodu takiego zachowania, dość często inkrementację/dekrementację wykonuje się w oddzielnej linii - tak by poprawić czytelność kodu:
let y = 5;
y++;
if (y > 5) {
console.log(y);
}
Operatory porównania
Możemy je znaleźć między innymi w instrukcjach warunkowych. Służą one do porównywania lewej strony równania do prawej, w wyniku której zawsze zwracana jest prawda albo fałsz (true/false).
{
//== - porównuje obie wartości bez porównania ich typów
let a = 10;
console.log(a == 10) //true
console.log(a == "10") //true
}
{
//!= - czy wartości są różne, bez sprawdzenia typu
let a = 10;
console.log(a != 20) //true
console.log(a != 10) //false
console.log(a != "10") //false
}
{
//=== - porównuje obie wartości i ich typ
let a = 10;
console.log(a === 10) //true
console.log(a === "10") //false
}
{
//!== - czy wartości lub typy są różne
let a = 10;
console.log(a !== 10) //false
console.log(a !== "10") //true
}
{
//< i > - mniejsze i większe
let a = 10;
let b = 20;
console.log(a < 20) //true
console.log(a < b) //true
console.log(a > b) //false
}
{
//<= i >= - mniejsze-równe i większe-równe
let a = 10;
let b = 20;
let c = 10;
console.log(a <= b) //true
console.log(a <= c) //true
}
Więcej na ten temat dowiemy się podczas stosowania instrukcji warunkowych.
Operatory logiczne
Operatory logiczne używane będą przez nas głównie w instrukcjach warunkowych. Służą do sprawdzania czy dane warunki są spełnione zwracając w wyniku true
lub false
.
Operator | Opis | Przykład | Wynik |
---|---|---|---|
&& | and (i) | (x < 10 && y > 1) | Prawda, bo x jest mniejsze od 10 i y jest większe od 1 |
|| | or (lub) | (x > 8 || y > 1) | Prawda, bo x nie jest większe od 8, ale y jest większe od 1 |
^ | xor (jeden z, ale nie dwa równocześnie) | (x === 6 ^ y === 3) | Fałsz, bo obydwa są prawdziwe |
! | not (negacja) | !(x === y) | Prawda, bo negujemy to, że x === y |
{
//&& - operator "i" - wszystkie warunki muszą być spełnione
let x = 6;
let y = 3;
console.log(x > 3 && y > 3); //false bo drugie równanie nie jest prawdą
}
{
//|| - operator "lub" - przynajmniej jeden warunek musi być spełniony
let x = 0;
let y = 3;
console.log(x > 3 || y > 2); //true bo drugi warunek jest spełniony
}
{
//^ - operator "xor" - przynajmniej jeden warunek musi być spełniony, ale nie wszystkie naraz
let x = 3;
let y = 3;
let z = 5;
console.log(x > 2 ^ y < z); //0 czyli false, bo wszystkie są spełnione
}
{
//! - "negacja" czyli odwrócenie true na false i odwrotnie
let x = 2;
let y = 0;
console.log(!true); //false
console.log(!false); //true
console.log(x && y); //false bo y === 0
console.log(!(x && y)) //true
}
Operatory logiczne w równaniach
Powyższe operatory możemy też wykorzystać w momencie podstawiania pod zmienną nowej wartości. Dzięki temu możemy skrócić nasz zapis pozbywając się dodatkowych instrukcji if.
Pierwszym z nich jest operator &&
. Jeżeli pierwsza wartość nie jest falsy (0
, ""
, null
, undefined
, NaN
, document.all
), wtedy podstawiana jest druga wartość. W przeciwnym razie wybierana jest pierwsza wartość:
{
const a = 100 && 300;
console.log(a); //300 - a jest prawdą, więc weź drugą wartość
}
{
const a = 200 && 0;
console.log(a); //0 - a jest prawdą, więc weź drugą wartość
}
{
const a = 0;
const b = 200;
const c = a && b;
console.log(c); //0 bo a jest falsy, więc zostań na niej
}
Kolejny operator - ||
podstawia pod zmienną wartość pierwszą w przypadku, gdy jest ona inna od falsy. W przeciwnym wypadku podstawiana jest wartość druga.
{
const text = "kot" || "brak"
console.log(text); //"kot"
}
{
const text = "" || "pies"
console.log(text); //"pies"
}
{
const a = 0 || 200;
console.log(a); //200
}
{
const a = 200;
const b = 100;
const c = a || b;
console.log(c); //200
}
{
const tab = ["ala", "bala"]; //3 elementu nie ma czyli undefined
const x = tab[2] || "brak";
console.log(x); //"brak"
}
Wartość falsy oznacza, że w powyższych testach zmienna a
nie może mieć także wartości 0
lub ""
. W wielu sytuacjach będzie to problematyczne.
W nowym Javascript mamy też operator ??
, który działa bardzo podobnie, z tym, że prawa wartość zwracana jest tylko w przypadku, gdy lewa ma wartość nie falsy, a nullish (undefined
lub null
):
{
const x = null || 10;
const y = null ?? 10;
console.log(x); //10
console.log(y); //10
}
{
const x = "" || 10;
const y = "" ?? 10;
console.log(x); //10
console.log(y); //""
}
{
const tab = ["ala", "bala"];
const x = tab[2] || "brak";
const y = tab[2] ?? "brak";
console.log(x); //"brak"
console.log(y); //"brak"
}
W EcmaScript 2021 powyższe zapisy możemy jeszcze bardziej uprościć za pomocą operatorów ||=
, ??=
i &&=
.
Operator ||= podstawi nową wartość tylko wtedy, gdy obecna wartość jest falsy:
{
let a = 0;
let b = "kot"
a ||= b
console.log(a); //"kot"
}
{
let a = "pies";
let b = "kot"
a ||= b
console.log(a); //"pies"
}
Operator &&= podstawi pod zmienną nową wartość gdy obecna wartość jest inna niż falsy (jest truthy):
let a = 1;
let b = 0;
a &&= 20;
console.log(a); //20
b &&= 20;
console.log(b); //0
Operator ??=
podstawi nową wartość, gdy obecna wartość jest nullish (null
lub undefined
):
{
let a = null;
a ??= 200;
console.log(a); //200
}
{
let a = 0;
a ??= 200;
console.log(a); //0
}
{
let a = {
nr : 100
}
a.something ??= 200;
a.nr ??= 300;
console.log(a.something); //200
console.log(a.nr); //100
}
Trening czyni mistrza
Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania