Как работает return в функциях js?

Question

После return ничего же не должно работать, так как мы выходим из функции, но по какой-то причине мы можем объявить функцию и использовать её. Связано ли это как-то со всплытием функций, которые объявлены через Function Declaration? Если да, то разве не должно быть так, что мы сначала объявили функцию, а потом её перезаписали на 10?

let x = 3;
function fn() {
    x = 10;
    return;
    function x() {
    }
}

fn()
console.log(x); // 3

Answer 1

Сперва, до исполнения, содержимое функции fn компилируется. Компилятор читает тело функции целиком (на этапе компиляции положение return ни на что не влияет) и узнаёт, что внутри объявлен локальный символ x. Локальное объявление скрывает глобальное. Компилятор не оставляет ссылок на глобальный x внутри тела fn.

Когда fn исполняется, то сперва локальный x получает значение функции (это из-за всплытия), затем получает значение 10. Глобальный x не меняется.

Само всплытие функции на результат не влияет. И без всплытия локальные символы скрывают глобальные.

Answer 2

Это происходит потому, что function declaration создаются не тогда, когда выполнение доходит до него, а раньше.

console.log(add(5, 5)); // 10, функция add уже объявлена
function add(x, y){
    return x + y;
}

В примере выше происходит по сути то же самое:

let x = 3;
function fn() {
    // Функция x объявляется здесь, x перекрывается и становится глобальной
    x = 10; // Изменилась локальная x, но не глобальная (window.x)
    return;
    function x() {} // Тут ничего не происходит
}

fn()
console.log(x); // 3

С function expression это не работает

console.log(add(5, 5)); // Ошибка, функция add не объявлена
var add = function(x, y){
    return x + y;
}

И

let x = 3;
function fn() {
    x = 10; // На этот раз переменная x не становится локальной и изменяется
    return;
    x = function () {
    }
}

fn()
console.log(x); // 10

БЛОГ НА HUSL

Как работает return в функциях js?

Ответы (2 шт):