JavaScript: function, var, let, const

в чем отличия function, var, let, const

2023-01-18 I Shar

время чтения 2 мин.

Допустим, Вы только приступили к изучению 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 код становиться прозрачным и понятным при чтении сверху вниз.

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

I Shar