Невозможно понять результат этого javascript-кода

Question

Почему следующий код печати undefined? Также после удаления блока if он выводит hello there в качестве выхода.

var message = "hello there!"; 

function hello(){ 
    console.log(message); 

    if (true) { 
    var message = "wassup?!"; 
    } 
} 

hello(); 

Answer 1

Это происходит, когда вы определяете локальную переменную с тем же именем, что и глобальная. Поскольку в рамках функции есть var message, она будет относиться только к локальному message, а не к глобальному. Поскольку в то время ему не было присвоено значение, это undefined. Обратите внимание, если вы переместите его после if, это будет "wassup?!".

Решение, которое вы, вероятно, не хотите создавать локальную переменную. Так что измените var message = "wassup?!" на message = "wassup?!".

Answer 2

Это называется Подъемник. Из the Mozilla docs (подчеркивание добавлено):

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

The var message объявлена ​​внутри блока if скрывает глобальную переменную message для всего кода внутри функции, в том числе призыв к console.log().

Два дополнительных пункта. Во-первых, JavaScript отделяет объявление переменных от инициализации переменных. Вот почему локальная переменная message имеет неопределенное значение, если выполняется console.log(message), а не "wassup?!". Во-вторых, поскольку подъем является таким контр-интуитивным поведением (по крайней мере, для программистов, используемых для других языков), большинство инструментов linting JavaScript предупреждают вас о var операторах, которые не находятся в начале контекста их выполнения. Я настоятельно рекомендую вам найти инструмент для литья (JSLint, JSHint, ESLint и JSCS) и использовать его.

Answer 3

Чтобы добавить к ответу @Spencer Wieczorek, определение переменной «поднято» в верхней части его области, в то время как назначение переменных остается в месте, где вы его пишете. Таким образом, код, который вы предоставили на самом деле переводится как это:

var message = "hello there!"; 

function hello(){ 
    var message; 
    console.log(message); 

    if (true) { 
    message = "wassup?!"; 
    } 
} 

hello(); 

Это объясняет немного более ясно, почему вы видите эти результаты - Прежде чем ваш console.log() вызова, переменная message создается в области видимости функции hello(), но не получает значение 'wassup?!' до более поздней функции.

EDIT: Here's a bit more info on this behaviour, который, как отмечает @TedHopps в комментариях, называется поднятым, а не «скрепленным».