JavaScript: инициализация переменных после внутренних функций

Question

В следующем эксперименте у нас есть одна "внешняя" функция outerFunction() и две внутренние функции, а также две переменных. Первая из них объявлена в начале внешней функции, вторая - тоже во внешней, но между внутренними функциями.

function outerFunction(){
    var testVar1 = 'test1';

    innerFunction1();
    innerFunction2();   

    function innerFunction1(){
        console.log('InnerFunction1() has been executed')
    }

    var testVar2 = 'test2';

    function innerFunction2(){
        console.log('testVar1: '+testVar1);
        console.log('testVar2: '+testVar2);
    }
}

outerFunction();

Если мы посмотрим в консоль, то увидим, что testvar2 имеет тип undefined. Тоже самое будет, если объявить эту переменную в конце внешней функции.

Я правильно понял, что сначала инициализируются переменные, идущие в начале внешней функции, далее - внутренние функции? Едва ли объявление переменной textVar2 стилистически верно, но всё же: когда она будет проинициализирована?

Answer 1

В JavaScript все переменные подымаются в начало функции. Этот процесс называется Hoisting. Не важно в каком месте функции вы описали переменную - она подымется в начало функции, а вот значение ей будет присвоено в том месте, где вы поставили оператор =.

Ваш код равнозначен следующему:

function outerFunction(){
    var testVar1;
    var testVar2;
    testVar1 = 'test1';

    innerFunction1();
    innerFunction2();   

    function innerFunction1(){
        console.log('InnerFunction1() has been executed')
    }

    // до этого момента testVar2 равен undefined
    testVar2 = 'test2';

    function innerFunction2(){
        console.log('testVar1: '+testVar1);
        console.log('testVar2: '+testVar2);
    }
}

outerFunction();

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