Сравнение значений в JavaScript

• Что такое сравнение
• Результат сравнения
• Больше и меньше
• Больше или равно, меньше или равно
• Строгое равенство
• Строгое неравенство
• Оператор ==
• Сравнение строк
• Сравнение в переменных
• Сравнение в условиях
• Частые ошибки

Сравнение значений в JavaScript нужно для того, чтобы программа могла принимать решения.

Например, можно проверить возраст пользователя, количество баллов, введенный пароль, цену товара или любое другое значение.

let age = 18;

console.log(age >= 18);

Результат:

true

Так JavaScript сообщает: условие выполнено, значение подходит.

Сравнения часто используются вместе с условиями if, циклами и логическими операторами. Но сначала нужно спокойно разобраться с самими операторами сравнения.

Что такое сравнение

Сравнение - это проверка двух значений.

Мы можем проверить:

• одно число больше другого или меньше;
• равны ли два значения;
• отличается ли одно значение от другого;
• подходит ли значение под нужное условие.

console.log(10 > 5);
console.log(10 === 10);
console.log(10 !== 3);

Результат:

true
true
true

Каждое сравнение возвращает один из двух вариантов: true или false.

Результат сравнения

Результатом сравнения всегда будет булево значение.

• true - сравнение верное;
• false - сравнение неверное.

console.log(7 > 3);
console.log(7 < 3);

Результат:

true
false

Это удобно, потому что такие значения можно сразу использовать в условиях.

let isAdult = 20 >= 18;

console.log(isAdult);

Результат:

true

Мы не просто получили ответ в консоли, а записали результат сравнения в переменную.

Больше и меньше

Для сравнения чисел используются операторы > и <.

• > - больше;
• < - меньше.

console.log(10 > 5);
console.log(10 < 5);

Результат:

true
false

В первом случае 10 действительно больше 5, поэтому получаем true.

Во втором случае 10 не меньше 5, поэтому получаем false.

Такие сравнения часто нужны для проверок.

let temperature = 30;

console.log(temperature > 25);

Результат:

true

Можно прочитать так: температура больше 25? Да, значит результат true.

Больше или равно, меньше или равно

Иногда нужно проверить не просто больше или меньше, а еще и равенство.

• >= - больше или равно;
• <= - меньше или равно.

console.log(18 >= 18);
console.log(17 >= 18);

Результат:

true
false

В первом примере 18 подходит, потому что значение равно 18. Во втором 17 уже не подходит.

Еще один пример:

let score = 60;

console.log(score <= 100);

Результат:

true

Значение 60 меньше 100, поэтому условие верное.

Строгое равенство

Для проверки равенства лучше использовать оператор ===.

console.log(10 === 10);
console.log('JavaScript' === 'JavaScript');

Результат:

true
true

Оператор === называется строгим равенством. Он проверяет не только само значение, но и тип данных.

console.log(10 === '10');

Результат:

false

На экране значения похожи, но для JavaScript это разные вещи. 10 - число, а ‘10’ - строка.

Именно поэтому строгое равенство помогает избежать многих неожиданных ситуаций.

Строгое неравенство

Если нужно проверить, что значения не равны, используется оператор !==.

console.log(10 !== 5);
console.log('admin' !== 'user');

Результат:

true
true

Оператор !== тоже учитывает тип данных.

console.log(10 !== '10');

Результат:

true

Значение отличается по типу, поэтому JavaScript считает, что это не одно и то же.

Оператор ==

В JavaScript есть еще оператор ==. Он тоже проверяет равенство, но делает это нестрого.

console.log(10 == '10');

Результат:

true

Так происходит потому, что JavaScript сначала пытается привести значения к общему типу, а уже потом сравнивает.

Для новичка такое поведение часто выглядит странно. Поэтому на первых этапах лучше использовать === и !==. Так код будет понятнее и предсказуемее.

console.log(10 === '10');
console.log(10 !== '10');

Результат:

false
true

Здесь JavaScript ничего не преобразует автоматически. Он честно сравнивает и значение, и тип.

Сравнение строк

Строки тоже можно сравнивать.

console.log('cat' === 'cat');
console.log('cat' === 'dog');

Результат:

true
false

При строгом равенстве строки должны полностью совпадать.

console.log('JavaScript' === 'javascript');

Результат:

false

Для JavaScript это разные строки, потому что буквы отличаются регистром.

Строки можно сравнивать и через > или <, но на старте лучше не усложнять. В обычных задачах новичку чаще нужно именно проверить: строка равна нужному значению или нет.

Сравнение в переменных

Сравнивать можно не только готовые значения, но и переменные.

let userAge = 21;
let minAge = 18;

console.log(userAge >= minAge);

Результат:

true

JavaScript берет значения из переменных и сравнивает их между собой.

Результат сравнения можно сохранить в отдельную переменную.

let userAge = 21;
let minAge = 18;

let canRegister = userAge >= minAge;

console.log(canRegister);

Результат:

true

Такой подход часто делает код понятнее. По имени переменной canRegister сразу видно, что мы проверяем.

Сравнение в условиях

Самое частое место, где встречаются сравнения, - это условия.

let age = 20;

if (age >= 18) {
  console.log('Доступ разрешен');
}

В скобках после if стоит сравнение. Если результат будет true, код внутри фигурных скобок выполнится.

Если результат будет false, код не выполнится.

let age = 15;

if (age >= 18) {
  console.log('Доступ разрешен');
}

В этом примере сообщение не появится, потому что 15 меньше 18.

Условия мы будем разбирать отдельно, но уже сейчас важно понимать: сравнение помогает программе решить, что делать дальше.

Частые ошибки

Первая частая ошибка - путать = и ===.

let age = 18;

console.log(age === 18);

Оператор = присваивает значение, а === сравнивает.

Вторая ошибка - сравнивать число и строку, не замечая разницы в типах.

let age = '18';

console.log(age === 18);

Результат:

false

Если число пришло строкой, например из prompt(), его можно преобразовать.

let age = '18';
let numberAge = Number(age);

console.log(numberAge === 18);

Результат:

true

Третья ошибка - использовать ==, не понимая автоматического преобразования типов.

console.log(false == 0);

Результат:

true

Для новичка такой результат может быть неожиданным. Поэтому проще держаться правила: для равенства используем ===, для неравенства - !==.

Четвертая ошибка - усложнять сравнение без необходимости.

let isAdult = age >= 18 === true;

Так писать не нужно. Сравнение age >= 18 уже возвращает true или false.

Достаточно так:

let isAdult = age >= 18;

Что дальше

В этом уроке мы разобрали, как сравнивать значения в JavaScript и почему для равенства лучше использовать строгие операторы === и !==.

Теперь у нас есть база для условий. Дальше можно будет писать код, который выполняется не всегда, а только когда нужная проверка возвращает true.