В отличие от строго типизированных языков, таких как Java, C, C++, иногда JavasScript ведет себя не так, как мы ожидаем. Рассмотрим пример ниже

console.log(“colour is”, colour);
var colour;

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

colour is undefined

Вам будет интересно, как это возможно? прежде чем объяснять это, рассмотрим приведенный ниже фрагмент кода с небольшими изменениями.

console.log(“colour is”, colour);
let colour;

Из-за приведенного выше объяснения можно было бы ожидать, что вывод должен быть color is undefined, и здесь. Но на выходе будет ошибка ссылки,если мы используем const вместо let, мы получим ошибку времени выполнения. Та же переменная, из-за процесса объявления, как меняется ответ?

Подъем

«Подъем — это стандартное поведение JavaScript для перемещения объявлений наверх». Это можно связать с хостингом флагов, где флаг будет водружаться на вершину шеста.

Простыми словами в JavaScript все переменные, объявленные с помощью let, var или const, будут подняты или объявлены в верхней части блока во время компиляции. Только для переменных, созданных с помощью ключевого слова var, значением по умолчанию будет undefined. Таким образом, после компиляции приведенный выше код выглядит так, как показано ниже.

var color = undefined; // this is just indicatory
console.log(“colour is”, colour);
var colour;
let colour; // Since there is no default value we will get reference error (this line is just indicatory)
console.log(“colour is”, colour);
let colour;
// Here we get run time error, because when you declare a variable with const it must have a default value. We cannot create a const variable without initial value.
console.log(“colour is”, colour);
const colour;
//Even in this case we get run time error as we are trying to access const variable before it is defined. 
console.log(“colour is”, colour);
const colour = "red";

Примечание:Важно отметить, что компилятор JavaScript не просто поднимает переменные, объявленные с помощью ключевого слова var, он также поднимает переменные, созданные с помощью let и const. Просто потому, что переменные не инициализированы значением по умолчанию, мы получаем ошибку ссылки в случае let и ошибку времени выполнения в случае const.

Фрагменты для практики

var rate = 10
function getRate() {
  if (rate == undefined) {
      var rate = 6;
      return rate;
   } else {
      return 10;
   }
}
console.log("Rate is", getRate());

Большинство из вас думают, что вывод Rate равен 10; Но ответом будет Rate is 6.Потому что в функции getRate внутри условия if есть переменная с именем rate, объявленная с помощью var. > ключевое слово. Во время компиляции переменная скорости будет поднята в начало метода getRate() со значением по умолчанию как неопределенным. Таким образом, во время выполнения для rate == undefined будет установлено значение true, авозвращаемое значение будет равно 6.

Как избежать описанных выше сценариев?

Если вы на собеседовании решили вышеописанную головоломку, следующий вопрос, который вам задаст интервьюер, — как решить эту проблему. Самый простой способ решения — использовать let вместо var внутри функции.

var rate = 10
function getRate() {
if (rate == undefined) {
let rate = 6;
return rate;
} else {
return 10;
}
}
console.log("Rate is", getRate());

Попробуйте разные комбинации с let, const и var. Всего наилучшего в обучении!!

Другие статьи того же автора:

  1. Как все обстоит с Object в JavaScript?
  2. Проблема с возвратом значений из асинхронных функций ожидания
  3. Подъем в JavaScript: горячая тема для интервью
  4. Мемоизация в JavaScript — горячая тема для интервью

Все статьи автора читайте здесь.