Один из наиболее частых вопросов на собеседовании, с которым сталкивается каждый разработчик JavaScript в своей карьере: «В чем разница между == и ===?» Что ж, я думаю, большинство из читающих это уже подумали с наиболее частым ответом, который

‘’ == ’’ сравнивает значение, а «===» сравнивает значение и тип.

Что, если я скажу, что это неправильный ответ 🙈. Давайте углубимся и разберемся, что происходит за кулисами. Согласно спецификациям сценария ECMA, как ==, так и === проверяют тип переменных. Если типы совпадают, и ==, и === работают с одним и тем же постом, который они возвращают true или false в зависимости от значений. Это когда типы переменных не совпадают, оба различаются. 😳

Когда типы не совпадают, == выполняет неявное приведение, а === напрямую возвращает false. Неявное принуждение - это не что иное, как преобразование переменной из одного типа в другой.

Согласно спецификации ECMAScript, всякий раз, когда JavaScript встречает оператор ==, вызывается абстрактная операция с именем IsLooselyEqual ( x, y ). Точно так же, когда он встречает оператор ===, выполняется абстрактная операция с именем IsStrictlyEqual ( x, y ). Я понимаю, что на данный момент это может быть слишком много, чтобы переварить, но давайте попробуем разобраться в обеих этих операциях с помощью некоторых фрагментов кода. Мы не будем рассматривать все случаи операции, скорее мы попытаемся рассмотреть некоторые из распространенных сценариев, с которыми мы обычно сталкиваемся.

Дело 1:

var stringOne = '1';
var numberOne = 1;
if (stringOne == numberOne) {
  console.log("IsLooselyEqual(x,y) is invoked");
}

В приведенном выше фрагменте кода у нас есть две переменные -stringOne и numberOne типов string и number соответственно. После этого у нас есть условный оператор, в котором мы проверяем, равны ли stringOne и numberOne, используя оператор ==. Как только JavaScript встречает оператор ==, он применяет абстрактную операцию IsLooselyEqual(x,y). В соответствии с этой операцией выполняются следующие шаги.

  1. Он проверяет, совпадают ли типы stringOne и numberOne. Если они одинаковы, он возвращает значение, применяя абстрактную операцию IsStrictlyEqual(x, y) (Шаг 2 фактического алгоритма), где x будет stringOne и y будет numberOne соответственно.
  2. Если типы не совпадают, он проверяет, является ли тип stringOne типом String, а типом numberOne Number типом (Шаг 6 фактического алгоритма). Поскольку это правда, он преобразует stringOne переменную в Number тип, применяя абстрактную операцию ToNumber(x). ToNumber(x) - еще одна абстрактная операция, которая преобразует переменную в Number Type. В этом сценарии stringOne будет x, применение ToNumber(x) операции будет ToNumber(stringOne), где stringOne будет преобразовано из типа String в тип Number на основе this. После чего он возвращает значение, снова применяя IsLooselyEqual(x, y) абстрактную операцию, где теперь и x, и y имеют один и тот же тип.
  3. Поскольку оба они одного типа, он возвращает значение, применяя абстрактную операцию IsStrictlyEqual(x,y).
  4. IsStrictlyEqual(x,y) проверяет, совпадают ли типы x и y. Если типы совпадают, он проверяет значение как x, так и y. Если значения также совпадают, тогда операция вернет true, иначе она вернет false.

Случай 2:

var arrayOne = ['1'];
var numberOne = 1;
if (arrayOne == numberOne) {
  console.log("IsLooselyEqual(x,y) is invoked");
}

В приведенном выше фрагменте кода у нас есть две переменные arrayOne и numberOne типов object и number соответственно. После этого у нас есть условный оператор, в котором мы проверяем, равны ли arrayOne и numberOne, используя оператор ==. Как только JavaScript встречает оператор ==, он применяет абстрактную операцию IsLooselyEqual(x,y). В соответствии с этой операцией выполняются следующие шаги.

  1. Он проверяет, совпадают ли типы arrayOne и numberOne. Если они одинаковы, он возвращает значение, применяя IsStrictlyEqual(x, y) абстрактную операцию, где x будет arrayOne и y будет numberOne соответственно.
  2. Если типы не совпадают, он проверяет, является ли тип arrayOne типом Object, а типом numberOne String, Number etc типом (Шаг 12 фактического алгоритма). Поскольку это правда, он преобразует переменную типа Object в тип Primitive, применяя абстрактную операцию ToPrimitive(). Вкратце, эта операция пытается преобразовать тип Object в тип Primitive, который будет либо типом String, либо Number (ToPrimitive).
  3. Затем он возвращает значение, применяя операцию IsLooselyEqual(x, y), передавая x и y, и повторяет те же шаги до тех пор, пока типы x и y не станут равными или когда операция IsLooselyEqual(x, y) вернет false.

Случай 3:

var objectOne = [];
var booleanOne = true;
if(objectOne) {
  console.log("This check whether array is empty or not won't work !!")
}

В приведенном выше фрагменте кода у нас есть две переменные objectOne и booleanOne типов object и boolean соответственно. После этого у нас есть условный оператор, в котором мы проверяем, является ли objectOne true. Как только JavaScript обнаруживает это, он применяет новую абстрактную операцию под названием ToBoolean(x). Эта операция преобразует переменную в тип Boolean в зависимости от справочной таблицы в этом (ToBoolean).

На основе этой таблицы, поскольку наша переменная имеет тип Object, она вернет нам true независимо от того, пуст массив или нет. Это основная причина, по которой нам нужны другие параметры при сравнении Object типов. В нашем случае, поскольку мы четко знаем, что это объект массива, мы могли бы использовать свойство length. Теперь мы можем реорганизовать приведенный выше код следующим образом для проверки пустоты.

К настоящему времени я надеюсь, что вы поняли, как JavaScript обрабатывает операторы == и === и случаи, когда они на самом деле различны. Вышеупомянутое - лишь несколько сценариев из многих. Если вам действительно интересно копнуть глубже, я бы порекомендовал вам ознакомиться с Спецификациями ECMA, где вы найдете полную реализацию как IsLooselyEqual(x,y), так и IsStrictlyEqual(x,y) абстрактных операций. Я также рекомендую вам прочитать эту книгу, если вы еще этого не сделали - You Don't Know JS от Kyle Simpson.

Спасибо

Надеюсь, вам понравилось это чтение об операторах == и === и о том, как работают сравнения в JavaScript. Теперь вы можете использовать эти знания, чтобы по-настоящему ответить на поставленный выше вопрос в ваших предстоящих интервью 😜. Сообщите мне свои мысли в разделе комментариев ниже. Если вы считаете, что эта статья полезна, пожалуйста, проявите свою любовь и поделитесь этим со своими собратьями, которые могут извлечь из этого максимум пользы.

Всегда свободно связывайтесь со мной через Twitter, LinkedIn или электронную почту. Рад помочь всеми возможными способами. 😊

Пока мы не встретимся снова, The Mallu Dev подписывает контракт 👋 Ура! 🥂

Больше контента на plainenglish.io