Инкремент и hoisting var в функции

Инкремент и hoisting var

Задача

Что будет в консоли и почему?

'use strict';
var x = 5;
 
console.log(++x); // ?
console.log(x++); // ?
 
fn();
console.log(x); // ?
 
function fn() {
    console.log(x); // ?
    x += 10;
    console.log(x); // ?
    console.log(typeof x); // ?
    var x = 3;
    console.log(x); // ?
}

Ответ

6
6
undefined
NaN
number
3
7

Разбор

Пошаговый разбор

Шаг	Что происходит	Вывод
++x	Пре-инкремент: x становится 6, возвращается новое значение	6
x++	Пост-инкремент: возвращается 6, затем x становится 7	6
fn() вход	Внутри fn есть var x → он всплывает (hoisting), локальный x = undefined	—
console.log(x)	Читается локальный x, ещё не присвоен	undefined
x += 10	undefined + 10 → NaN	—
console.log(x)	Локальный x теперь NaN	NaN
typeof x	NaN — это значение типа number	number
var x = 3	Присваивание локальному x	—
console.log(x)	Локальный x	3
console.log(x) (снаружи)	Внешний x не менялся внутри fn — там свой скоуп	7

Ключевая идея

var x внутри fn всплывает в начало функции, поэтому внутренние обращения к x относятся к локальной переменной, а не к внешней. Внешний x остаётся 7.