Что такое hoisting?




hoisting это поднятие или всплытие переменных (не путать с всплытием событий, там про другое).
Ещё до выполнения кода интерпретатор JavaScript загружает в память функции, объявленные как function declaration а также объявления переменных и функций function expression, но не их значения. В результате функцию function declaration можно вызвать ещё до того, как до неё дойдёт построчное выполнение кода

summ(3, 4);   // 7

function summ(a, b) {
  return a + b;
}


Функции function expression при таких условиях работать не будут:

summ(3, 4);   // TypeError

var summ = function(a, b) {
  return a + b;
}


Значение объявленной через var переменной переменной или function expression до того как интерпретатор дойдёт до её кода, равно undefined. Кстати, переменные, объявленные через let, не всплывают.

Задача.
Каков результат выполнении следующего фрагмента кода?

var myname = "Дядя"; 
function fn() { 
  console.log(myname); 
  var myname = "Фёдор"; 
  console.log(myname); 


fn();

// undefined
// Фёдор


Объяснение. Объявленная через var  переменная myname всплывает. До того, как выполнение кода дойдёт до неё, значение переменной равно undefined. В первую очередь интерпретатор ищет переменную внутри области видимости функции, находит её и дальше уже не ищет. Поэтому первый результат выведет undefined - внутри кода функции переменная уже объявлена, но ещё не инициализирована. Инициализация - присвоение переменной значения.

Дополнено

Первый результат поисковой выдачи Google по запросу "hoisting": "Поднятие или hoisting  — это механизм в JavaScript в котором переменные и объявления функций передвигаются вверх своей области видимости перед тем, как код будет выполнен."

На самом деле нет. hoisting  - загрузка объявления переменной в память до начала выполнения кода. То, что вначале переменная ищется внутри своей области видимости, это уже про другое

Вывод. Вначале переменную объявляем, потом инициализируем, потом используем.