Hoisting (поднятие) в js. Сравнение var, let, const, function, class

Откуда вообще это странное слово hoisting? В русской документации оно чаще всего употребляется как “поднятие” или “всплывание”. От англ. hoist = rais = lift = поднимать.

Function Hoisting

printHello();
// hello

function printHello() {
  console.log("hello")
}

Прежде чем интерпретатор выполнит весь код, он сначала поднимает (поднимает) объявленную функцию на вершину области, в которой она определена. В этом случае она определена printHelloв глобальной области видимости, поэтому функция поднимается наверх. глобального масштаба.
Функция поднимается (hoisting) только до верха области видимости, в которой он был объявлен.

Variable Hoisting

VAR

При поднятии значение по умолчанию = undefined (переменная проинициализирована)

console.log(name) //undefined
var name = "Serge"
console.log(name) //Serge

!!! И вот тут интересный момент! Размещаем этот скрипт в самом корне, и…
1. Если попробуйте выполнить вот этот код в браузере , то у вас отобразиться в первый раз (Открывайте страницу в инкогнито. Галочка с очисткой кеша в открытой консоли разработчика в Хроме тут не поможет): пустая строка, Serge. а потом, и во все последующие обновления страницы; Serge, Serge.
2. Если вы выполните в командной строке через node script.js. то будет как и показано в примере: undefined, Serge.

Если мы обернем этот пример в функцию и вызовем ее, то результат будет идентичен в браузере и в Node.
Если вы хотите завалить и озадачить кого-то, в том числе на собеседовании по javascript – вот отличная задача для этого!

LET, CONST

При поднятии значение по умолчанию никакое не присваивается (переменная не проинициализирована), но поднятие-hoisting происходит). И интерпретатор знает о нашей переменной!

console.log(name)
// ReferenceError: Cannot access 'name' before initialization
let name = "Serge"

Переменные поднимаются в начало области, в которой они объявлены (локальной, глобальной или блочной), но недоступны, поскольку не были инициализированы. Эту концепцию также называют временной мертвой зоной (temporal dead zone).

CLASS Hoisting

Аналогичная ситуация происходит и с классами, к в let и const.

const Dog = new Animal("Bingo")
// ReferenceError: Cannot access 'Animal' before initialization

class Animal {
  constructor(name) {
    this.name = name
  }
}

Данная статья – краткая выдержка на основе https://www.freecodecamp.org/news/what-is-hoisting-in-javascript-3/