Типы данных и конструкция if-else в JavaScript

При использовании конструкции if можно сравнивать и строки. Для примера пусть в переменной test хранится какая-то строка, например 'abc':

let test = 'abc';

Давайте проверим, равно ли содержимое переменной test строке 'abc':

let test = 'abc';

if (test == 'abc') {
	alert('верно'); // сработает этот alert, так как переменная равна 'abc'
} else {
	alert('неверно');
}

Числа в кавычках

Как вы знаете, число в кавычках представляет собой строку. Например, '3' - это строка. Однако, при сравнении таких строк с настоящими числами JavaScript считает, что строка в кавычках равна такому же числу.

Давайте для примера сравним строку '3' и число 3:

if ('3' == 3) {
	alert('верно'); // сработает этот alert - значения равны
} else {
	alert('неверно');
}

Равенство по значению и типу

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

Для этого вместо оператора == следует использовать оператор ===. В следующем примере при сравнении строки '3' и числа 3 на экран выведется 'неверно', так как переменные, хотя и равны по значению, но не равны по типу:

if ('3' === 3) {
	alert('верно');
} else {
	alert('неверно'); // сработает этот alert
}

А вот при сравнении двух строк '3' на экран выведется 'верно':

if ('3' === '3') {
	alert('верно'); // сработает этот alert
} else {
	alert('неверно');
}

Так же, как и при сравнении чисел:

if (3 === 3) {
	alert('верно'); // сработает этот alert
} else {
	alert('неверно');
}

Разница между оператором == и оператором === проявляется именно тогда, когда значения одинаковые, но разный тип данных. В остальных случаях эти операторы работают одинаково. К примеру, при сравнении разных чисел, конечно же, выведется 'неверно':

if (2 === 3) {
	alert('верно');
} else {
	alert('неверно'); // сработает этот alert
}

Не запуская код, определите, что выведется на экран:

let test1 = '3';
let test2 = '3';
		
if (test1 == test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = '3';
let test2 = '3';
		
if (test1 === test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = 3;
let test2 = '3';
		
if (test1 == test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = 3;
let test2 = '3';
		
if (test1 === test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = 3;
let test2 = 3;
		
if (test1 === test2) {
	alert('верно');
} else {
	alert('неверно');
}

Неравенство по значению и типу

Кроме оператора != существует также оператор !==, учитывающий тип при сравнении. Давайте рассмотрим различия между ними на примерах.

Пусть с помощью оператора != сравниваются два числа 3. Данный оператор сравнивает значения на то, что они НЕ равны. Так как наши значения как раз-таки равны, то на экран выведется 'неверно':

if (3 != 3) {
	alert('верно');
} else {
	alert('неверно'); // сработает этот alert, так как значения равны
}

Пусть теперь одно из наших значений будет в кавычках. В этом случае оператор != все равно посчитает их равными (так как совпадает значение, а тип не важен для данного оператора) и опять выведет 'неверно':

if ('3' != 3) {
	alert('верно');
} else {
	alert('неверно'); // сработает этот alert, так как значения равны
}

Давайте теперь сравним два числа 3 с помощью оператора !==. Он также посчитает их равными и выведет 'неверно':

if (3 !== 3) {
	alert('верно');
} else {
	alert('неверно'); // сработает этот alert, так как значения равны
}

А вот если теперь одну из троек взять в кавычки, то оператор !== посчитает наши тройки неравными, так как, хотя значения их и совпадают, но у них разный тип:

if ('3' !== 3) {
	alert('верно'); // сработает этот alert, так как значения НЕ равны
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = '3';
let test2 = '3';
		
if (test1 != test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = '3';
let test2 = '3';
		
if (test1 !== test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = 3;
let test2 = '3';
		
if (test1 != test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = 3;
let test2 = '3';
		
if (test1 !== test2) {
	alert('верно');
} else {
	alert('неверно');
}

Не запуская код, определите, что выведется на экран:

let test1 = 3;
let test2 = 2;
		
if (test1 !== test2) {
	alert('верно');
} else {
	alert('неверно');
}

Нюансы

Обратите внимание на следующий код:

if (0 == '') {
	alert('верно'); // выведет 'верно'
} else {
	alert('неверно');
}

И на следующий:

if (0 == '0') {
	alert('верно'); // выведет 'верно'
} else {
	alert('неверно');
}