[JAVASCRIPT] - Урок 3 - "Поднятие" (Hoisting)

12 часов назад я опубликовала пост в вопросом "Как будет называться тема следующего урока" и первым на оба вопроса правильно ответил @aim. Сегодня темой урока будет специальное значение undefined.

Именно этот результат вы могли увидеть в консоли, запустив первый вариант кода:

    var user; //объявляем переменную user
    console.log(user); //вывести переменную user в консоли
    var user = 'qqc'; //присвоить переменной user значение 'qqc'

Давайте начнем по порядку. Запуская веб-приложение, как мы уже говорили в предыдущих уроках, движок JavaScript создает оболочку, так называемое глобальное окружение, в котором находятся глобальный объект, переменная this, внешнее окружение и ВАШ КОД. В момент создания этого контекста выполнения, когда парсер бежит по вашему коду, он считывает то, что вы написали для трансляции. Он распознает, КАКИЕ переменные вы объявили и ГДЕ создали функции, "настраивает" память для переменных и функций. Эта "настройка" называется "поднятием" переменных (Hoisting).

JavaScript, прежде чем начнет выполнять ваш код строчку за строчкой, резервирует для каждой вашей переменной и функции местечко в памяти. Получается, они уже существуют в памяти. И когда код начинает выполнятся, доступ к ним уже есть.

Когда движок JS оставляет место в памяти для переменной, он ещё не знает, чему она будет равна в конце концов, когда код будет выполнен. И он присваивает ей значение undefined, что означает да, эта переменная существует, для нее "забито" местечко, но пока что я не знаю, чему она равна. То есть undefined - это такая затычка, значение по умолчанию.

Что касается второго варианта:

    var user; //объявляем переменную user
    var user = 'qqc'; //присвоить переменной user значение 'qqc'
    console.log(user); //вывести переменную user в консоли

Здесь у нас уже вывелось значение переменной. Потому что код выполняется строчка за строчкой, соответственно к моменту вывода значения переменной user, ей уже было присвоено значение 'qqc'.

Ну а в третьем варианте, где переменная не была объявлена вовсе:

console.log(user); //вывести переменную user в консоли

должна была появиться ошибка:

Uncaught ReferenceError: user is not defined

user is not defined и undefined - вроде бы одно и то же, но в первом случае ошибка означает, что такая переменная вообще не была объявлена и её не существует, во втором случае, что её значение пока неизвестно.

Давайте посмотрим, как поведут себя функции:

function hello() {
  console.log("Функция выполняется!"); //Выводим в консоль сообщение 
}
hello(); //вызываем функцию

Если мы запустим веб-приложение с этим кодом, то в консоли увидим сообщение "Функция выполняется!". Что будет, если мы вызовем функцию до ее создания?

hello(); //вызываем функцию
function hello() {
  console.log("Функция выполняется!"); //выводим в консоль сообщение 
}

Всё равно увидим, что функция выполняется. Почему? Потому что во время "поднятия" движок посмотрит, какую функцию вы создали, и где она расположена, и, когда код начнет выполняться, уже будет известно куда "бежать" смотреть инструкции.