Допустим, Вы только приступили к изучению JavaScript и, наверняка, столкнулись с некоторыми особенностями существующих справочных материалов и документации. Так, существует три различных способа объявления функции.

function myFunc(){}
var myFunc = function() {};
const myFunc = () => {};

Содержание

Ключевым понятием, определяющим различие этих трех методологий объявления функции является поднятие (hoisting). Термин поднятие не является частью документации JavaScript и относится к области видимости (scope) переменных. Так, при определенных условиях к переменным, физически написанным в конце кода, есть доступ, как-будто они были объявлены в самом начале области видимости.

Обратимся к примерам.

function

Ключевое слово function поднимает не только имя переменной (функции), но и отдаваемое значение. Даже, в случае, когда функция объявлена в конце документа, она может быть использована в начале кода самым различным образом:

console.log(add(1, 2)); // 3

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

Так, в этом примере, несмотря на то что функция объявлена после console.log, она будет определена, а ее значение доступно.

var

В случае с var картина несколько иная: будет доступно имя переменной, но не ее значение. Что означает поднятие имени переменной или функции, но не ее значения? Обратимся к примеру:

console.log(add); // Uncaught ReferenceError: add is not defined

В вышеприведенном примере возникает ошибка, так как переменной add не существует.

console.log(add); // undefined

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

console.log(add); // Function

А теперь сама переменная (функция) существует, но ее значение не определено. Так как в данном случае к началу области видимости поднимается только имя переменной (функции).

Посмотрим, что получиться, если для кода использовать более понятный синтаксис:

let add;

console.log(add); // undefined
add = function(a, b) {
  return a + b;
};

console.log(add); // Function

Именно легкость восприятия и прозрачность кода, написанного с использованием let, позволяет отказаться от var в JavaScript-проектах.

let и const

В отличие от function и var, для let и const поднятие вообще не работает.

console.log(add); // Uncaught ReferenceError: add is not defined

const add = function(a, b) {
  return a + b;
};

console.log(add); // Function 

Именно благодаря let и const код становиться прозрачным и понятным при чтении сверху вниз.

Спасибо за внимание.