Пошук уроків, статей та іншого контенту
Розберіть різницю між нестрогою == та строгою === рівністю. Дізнайтеся, як автоматичне приведення типів впливає на порівняння і чому в сучасному коді зазвичай віддають перевагу ===.
У JavaScript є два основні оператори для порівняння значень:
== — нестрога рівність;
=== — строга рівність.
Обидва оператори повертають логічне значення:
console.log(5 == 5); // true
console.log(5 === 5); // true
console.log(5 == 10); // false
console.log(5 === 10); // falseРізниця стає помітною, коли значення мають різні типи.
==Оператор == порівнює значення, але перед цим може автоматично привести їх до одного типу.
console.log(5 == "5"); // true
console.log(true == 1); // true
console.log(false == 0); // true
console.log(null == undefined); // trueУ першому прикладі число 5 порівнюється з рядком "5". JavaScript перетворює рядок на число, після чого порівнює:
5 == 5Тому результатом є true.
console.log("10" == 10); // true
console.log("0" == false); // true
console.log("" == false); // trueПід час таких порівнянь JavaScript виконує неочевидні перетворення:
"10" може перетворитися на число 10;
false може перетворитися на число 0;
порожній рядок "" також може трактуватися як 0.
Через це код із == іноді складно читати та передбачати його поведінку.
===Оператор === порівнює і тип, і значення. Автоматичного приведення типів не відбувається.
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(true === 1); // false
console.log(false === 0); // falseУ виразі:
5 === "5"значення мають однаковий вигляд, але різні типи:
5 — це number;
"5" — це string.
Тому результат — false.
Для перевірки типу використовується оператор typeof:
const numberValue = 5;
const stringValue = "5";
console.log(typeof numberValue); // "number"
console.log(typeof stringValue); // "string"
console.log(numberValue === stringValue); // false== і ===Розглянемо однакові значення з використанням обох операторів:
console.log(10 == "10"); // true
console.log(10 === "10"); // false
console.log(0 == false); // true
console.log(0 === false); // false
console.log("" == false); // true
console.log("" === false); // false== ігнорує різницю типів у деяких випадках, а === вимагає, щоб типи також збігалися.
null та undefinedЗначення null і undefined позначають відсутність значення, але вони не є однаковими типами.
console.log(null == undefined); // true
console.log(null === undefined); // falseОператор == має спеціальне правило: null і undefined вважаються рівними лише одне одному.
console.log(null == 0); // false
console.log(undefined == 0); // false
console.log(null === 0); // false
console.log(undefined === 0); // falseЯкщо потрібно перевірити саме null, краще використовувати:
const value = null;
if (value === null) {
console.log("Значення дорівнює null");
}Якщо потрібно перевірити і null, і undefined, можна написати:
const value = undefined;
if (value === null || value === undefined) {
console.log("Значення відсутнє");
}У деяких випадках також використовують:
if (value == null) {
console.log("Значення — null або undefined");
}Це один із небагатьох свідомих випадків використання ==, оскільки така перевірка спеціально охоплює лише null та undefined.
const userInput = "25";
const expectedAge = 25;
console.log(userInput == expectedAge); // true
console.log(userInput === expectedAge); // false
if (userInput === expectedAge) {
console.log("Значення мають однаковий тип і значення");
} else {
console.log("Значення відрізняються за типом або значенням");
}
// Явно перетворюємо рядок на число
const numericInput = Number(userInput);
if (numericInput === expectedAge) {
console.log("Вік збігається");
}У цьому прикладі краще не покладатися на автоматичне приведення типів. Замість цього рядок явно перетворюється на число за допомогою Number(), а потім використовується ===.
===У сучасному JavaScript зазвичай рекомендують використовувати ===, тому що він:
не виконує неочікуваних перетворень;
робить умови зрозумілішими;
допомагає раніше виявити помилки в типах;
робить поведінку коду передбачуваною.
Наприклад:
const userId = "42";
const requestedId = 42;
if (userId === requestedId) {
console.log("Користувач знайдений");
} else {
console.log("Типи значень відрізняються");
}Якщо ці значення справді повинні бути одного типу, їх варто явно привести:
if (Number(userId) === requestedId) {
console.log("Користувач знайдений");
}Так у коді явно видно, яке перетворення відбувається.
Для примітивних значень === порівнює саме значення. Об’єкти порівнюються за посиланням.
const firstUser = { name: "Олена" };
const secondUser = { name: "Олена" };
const sameUser = firstUser;
console.log(firstUser === secondUser); // false
console.log(firstUser === sameUser); // truefirstUser і secondUser мають однакові властивості, але це два різні об’єкти в пам’яті. Тому вони не рівні.
sameUser посилається на той самий об’єкт, що й firstUser, тому результат — true.
Це правило однаково стосується == і ===:
const first = {};
const second = {};
console.log(first == second); // false
console.log(first === second); // falseОсобливим значенням є NaN — результат невдалої числової операції.
const result = Number("текст");
console.log(result); // NaN
console.log(result === NaN); // falseNaN не дорівнює навіть самому собі. Для перевірки використовуйте Number.isNaN():
const value = Number("текст");
if (Number.isNaN(value)) {
console.log("Значення не є коректним числом");
}= замість ===Оператор = не порівнює значення, а присвоює його:
let age = 18;
if (age === 18) {
console.log("Вік дорівнює 18");
}Помилковий варіант:
let age = 18;
// Помилка: тут відбувається присвоєння
if (age = 20) {
console.log(age);
}Умови зазвичай потрібно писати з ===, !==, >, < або іншими операторами порівняння.
const age = "18";
console.log(age === 18); // falseЯкщо рядок містить число, явно перетворіть його:
console.log(Number(age) === 18); // true==console.log("0" == false); // true
console.log([] == false); // trueТакі результати можуть бути неочевидними для людини, яка читає код. У більшості ситуацій краще використовувати === і виконувати потрібні перетворення явно.
const first = { id: 1 };
const second = { id: 1 };
console.log(first === second); // falseЯкщо потрібно порівняти конкретні дані, порівнюйте властивості:
console.log(first.id === second.id); // trueУ більшості випадків дотримуйтеся такого підходу:
Використовуйте === для перевірки рівності.
Використовуйте !== для перевірки нерівності.
Явно перетворюйте типи за допомогою Number(), String() або Boolean().
Використовуйте == лише тоді, коли свідомо потрібне автоматичне приведення типів.
const input = "100";
if (Number(input) === 100) {
console.log("Отримано число 100");
}== порівнює значення з можливим автоматичним приведенням типів.
=== порівнює і тип, і значення без автоматичного приведення.
"5" == 5 повертає true, але "5" === 5 повертає false.
null == undefined — true, а null === undefined — false.
Об’єкти порівнюються за посиланням, а не за вмістом.
У сучасному JavaScript зазвичай варто надавати перевагу === та !==.
Явне перетворення типів робить код зрозумілішим і безпечнішим.