Пошук уроків, статей та іншого контенту
Навчіться порівнювати значення за допомогою >, <, >=, <=, == та ===. Дізнайтеся, як результатом порівняння стає логічне значення true або false.
Оператори порівняння використовують, щоб перевірити відношення між двома значеннями:
чи одне значення більше за інше;
чи одне значення менше за інше;
чи значення рівні;
чи значення не рівні.
Результатом будь-якого порівняння є логічне значення:
true — умова істинна;
false — умова хибна.
const age = 20;
console.log(age >= 18); // true
console.log(age < 18); // falseЗначення age дорівнює 20, тому перевірка age >= 18 повертає true, а age < 18 — false.
> і <Оператор > перевіряє, чи є ліве значення більшим за праве.
Оператор < перевіряє, чи є ліве значення меншим за праве.
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(3 > 3); // false
console.log(3 < 3); // falseЯкщо значення однакові, обидва оператори повертають false, адже число не є ані більшим, ані меншим за саме себе.
Оператори можна використовувати зі змінними:
const temperature = 25;
console.log(temperature > 20); // true
console.log(temperature < 10); // false>= і <=Оператор >= означає «більше або дорівнює».
Оператор <= означає «менше або дорівнює».
console.log(10 >= 5); // true
console.log(10 >= 10); // true
console.log(10 >= 15); // false
console.log(3 <= 5); // true
console.log(3 <= 3); // true
console.log(3 <= 1); // falseВажливо не плутати ці оператори з > і <:
const score = 60;
console.log(score > 60); // false
console.log(score >= 60); // trueУ першому випадку score має бути строго більшим за 60. У другому випадку достатньо, щоб він був більшим або дорівнював 60.
==Оператор == перевіряє, чи рівні два значення. Під час такого порівняння JavaScript може автоматично перетворити типи значень.
console.log(5 == 5); // true
console.log(5 == 10); // false
console.log(5 == "5"); // trueУ третьому прикладі число 5 порівнюється з текстом "5". Оператор == автоматично перетворює значення, тому результатом є true.
Таке автоматичне перетворення типів може бути несподіваним:
console.log(0 == false); // true
console.log("" == false); // trueЧерез це в сучасному JavaScript зазвичай краще використовувати строгий оператор рівності ===.
===Оператор === перевіряє і значення, і їхні типи. Значення будуть рівними лише тоді, коли збігаються обидві характеристики.
console.log(5 === 5); // true
console.log(5 === 10); // false
console.log(5 === "5"); // falseУ прикладі 5 і "5" мають однаковий вигляд, але різні типи:
5 — це число;
"5" — це рядок.
Тому 5 === "5" повертає false.
Оператор === допомагає уникати неочікуваного перетворення типів:
console.log(0 === false); // false
console.log("" === false); // false
console.log(null === undefined); // falseУ більшості випадків для перевірки рівності використовуйте ===.
Щоб перевірити, що значення не рівні, використовують оператори:
!= — нестроге порівняння на нерівність;
!== — строге порівняння на нерівність.
console.log(5 != 10); // true
console.log(5 != "5"); // false
console.log(5 !== 10); // true
console.log(5 !== "5"); // trueЯк і у випадку з ==, оператор != може автоматично перетворювати типи. Тому зазвичай безпечніше використовувати !==.
Числа порівнюються за своїм математичним значенням:
const firstNumber = 12;
const secondNumber = 8;
console.log(firstNumber > secondNumber); // true
console.log(firstNumber === secondNumber); // falseРядки порівнюються посимвольно, відповідно до порядку символів:
console.log("apple" < "banana"); // true
console.log("cat" === "cat"); // trueПорівняння рядків чутливе до регістру:
console.log("JavaScript" === "javascript"); // falseВелика і мала літери — це різні символи.
Для строгого порівняння типи повинні збігатися:
const userAge = 18;
const ageFromForm = "18";
console.log(userAge == ageFromForm); // true
console.log(userAge === ageFromForm); // falseЗначення можуть виглядати однаково, але перша змінна містить число, а друга — рядок.
Найчастіше оператори порівняння використовують в операторі if:
const age = 21;
if (age >= 18) {
console.log("Доступ дозволено");
} else {
console.log("Доступ заборонено");
}Якщо age дорівнює або більший за 18, виконується перший блок. В іншому випадку виконується блок else.
Порівняння можна зберегти у змінній:
const passwordLength = 10;
const isPasswordLongEnough = passwordLength >= 8;
console.log(isPasswordLongEnough); // trueНазви на кшталт isPasswordLongEnough, isAdult або hasAccess допомагають зрозуміти, що змінна містить логічне значення.
const userAge = 20;
const requiredAge = 18;
const enteredCode = "1234";
const correctCode = "1234";
const isAdult = userAge >= requiredAge;
const hasCorrectCode = enteredCode === correctCode;
if (isAdult && hasCorrectCode) {
console.log("Користувач отримав доступ");
} else {
console.log("Доступ заборонено");
}У цьому прикладі:
userAge >= requiredAge перевіряє вік користувача.
enteredCode === correctCode порівнює два рядки без перетворення типів.
Результати порівнянь зберігаються як true або false.
На основі цих значень програма приймає рішення.
= замість ===Оператор = присвоює значення змінній, а не порівнює його.
const number = 5;
// Присвоєння, а не порівняння
// number = 10;
// Порівняння
console.log(number === 5); // trueДля порівняння рівності використовуйте === або, у спеціальних випадках, ==.
> і >=const points = 100;
console.log(points > 100); // false
console.log(points >= 100); // true> не враховує випадок рівності, а >= враховує.
const input = "25";
console.log(input === 25); // false
console.log(input === "25"); // trueЯкщо значення отримано з текстового поля, воно часто є рядком. Перед порівнянням переконайтеся, що тип значення відповідає очікуваному.
NaNNaN означає, що значення не є коректним числом. Особливість NaN полягає в тому, що воно не дорівнює навіть самому собі:
const result = Number("hello");
console.log(result); // NaN
console.log(result === NaN); // falseДля перевірки використовуйте Number.isNaN():
console.log(Number.isNaN(result)); // trueДля об’єктів === порівнює посилання, а не вміст:
const firstUser = { name: "Олена" };
const secondUser = { name: "Олена" };
console.log(firstUser === secondUser); // falseЦе два різні об’єкти, навіть якщо вони мають однакові властивості. На початковому етапі достатньо пам’ятати, що === найпередбачуваніше працює з примітивними значеннями: числами, рядками, логічними значеннями, null та undefined.
Оператори порівняння повертають true або false.
> перевіряє, чи значення більше.
< перевіряє, чи значення менше.
>= означає «більше або дорівнює».
<= означає «менше або дорівнює».
== порівнює значення з можливим перетворенням типів.
=== порівнює і значення, і типи.
!= та !== перевіряють нерівність.
Для більш передбачуваної поведінки зазвичай використовуйте === і !==.
Результати порівнянь можна зберігати у змінних і використовувати в умовах.