7 каверзных вопросов для проверки знаний о JavaScript

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

Эти 7 вопросов проверят ваше знание различных аспектов JavaScript. Они лишь кажутся легкими, но могут застать вас врасплох! Если сможете ответить на эти вопросы — значит, вы хорошо знаете JavaScript!

Вопрос 1: Каков результат 0,1 + 0,2 === 0,3?

console.log(0.1 + 0.2 === 0.3);

Ответ

Результат — false.

Объяснение

В JavaScript числа с цифрами после запятой (называемые числами с плавающей запятой) не всегда складываются так, как ожидается.

Из-за того, как числа с плавающей запятой представлены в JavaScript, 0.1 + 0.2 не равно 0.3. Вместо этого получается 0.30000000000000004, что приводит к результату false. Эта проблема возникает из-за двоичного приближения десятичных чисел в JavaScript.

Вопрос 2: Каковы результаты «5» + 3 и «5» — 3?

console.log("5" + 3);
console.log("5" - 3);

Ответ

• Результатом "5" + 3 будет "53".

• Результатом "5" - 3 будет 2.

Объяснение

• "5" + 3: при использовании знака + со строкой и числом JavaScript воспринимает число как часть строки, поэтому вместо сложения 5 и 3 как чисел он соединяет их как текст, в результате чего получается "53".

• "5" - 3: оператор - не работает со строками, поэтому JavaScript преобразует "5" в число и вычитает 3, в результате получается 2.

Вопрос 3: Каково значение typeof null?

console.log(typeof null);

Ответ

Значение — "object".

Объяснение

Это одна из странностей JavaScript. Оператор typeof должен сообщать, какое значение у вас есть.

Но при проверке typeof null происходит ошибка: JavaScript сообщает, что это object, хотя на самом деле null — специальное значение, которое означает «ничего».

Это ошибка, существующая уже долгое время, так и не была исправлена, чтобы не «ломать» старый код.

Вопрос 4: Как работает замыкание?

function outerFunction() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const closure = outerFunction();
closure(); // ?
closure(); // ?

Ответ

Вывод будет таким:

1
2

Объяснение:

Замыкание происходит, когда функция запоминает окружающие ее переменные даже после завершения работы внешней функции.

В этом примере внутренняя функция по-прежнему имеет доступ к переменной count внутри outerFunction. Каждый раз при вызове closure(), она увеличивает count и показывает его.

Вопрос 5: Каковы результаты true + false и [] + {}?

console.log(true + false);
console.log([] + {});

Ответ

• Результатом true + false будет 1.
  
• Результатом [] + {} будет "[object Object]".

Объяснение

• true + false: в JavaScript true воспринимается как 1, false — как 0, поэтому при сложении 1 + 0 будет 1.

• [] + {}: при добавлении пустого массива [] к пустому объекту {} JavaScript меняет их на строки: пустой массив становится пустой строкой "", а пустой объект — "[object Object]"; таким образом, их сложение дает "[object Object]".

Вопрос 6: Что означает [] == ![]?

console.log([] == ![]);

Ответ

Результат — true.

Объяснение

Это очень сложно! Вот что происходит:

• ![] означает «не пустой массив»; пустой массив имеет значение «truth», поэтому ![] — false.

• Рассмотрим выражение [] == false.

• JavaScript пытается сравнить [] и false: он меняет [] на пустую строку "", а false — на 0.

• Тогда "" == 0 будет true, потому что JavaScript меняет пустую строку на 0 при сравнении.

Вопрос 7: Что выводит console.log(a) в следующем коде?

console.log(a);
var a = 5;

Ответ

Вывод — undefined.

Объяснение

Это происходит из-за концепции JavaScript, называемой «поднятием» (hoisting). Когда JavaScript читает код, то перемещает все объявления переменных в верхнюю часть их области видимости.

Итак, в данном случае JavaScript видит var a; вверху, но значение 5 еще не присвоено. Поэтому, когда вы пытаетесь записать переменную a в лог, она объявлена, но еще не определена (undefined).

Заключение

Ну как, справились? В рассмотренных аспектах странное поведение JavaScript сочетается с такими важными понятиями, как замыкание (closures) и поднятие (hoisting).

Овладение этими знаниями поможет вам избежать распространенных ошибок и лучше понимать, как JavaScript обрабатывает различные операции.

Читайте также:

• 5 концепций JavaScript, которые должен знать каждый разработчик
• Лучшие практики именования переменных в JavaScript
• Интуитивно понятное объяснение конструкции Async/await в JavaScript

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Arnold Gunter: If You Can Answer These 7 Questions Correctly You’re Decent at JavaScript