Чем отличается Function Declaration от Function Expression?

Краткий ответ

Function Declaration — это функция, объявленная отдельно как инструкция. Function Expression — это функция, созданная как часть выражения. Главное отличие: Function Declaration поднимается полностью, а Function Expression — только переменная.

Функция, объявленная отдельно:

function sayHello() {
  return 'Привет!';
}

Функция, созданная как часть выражения:

const sayHello = function() {
  return 'Привет!';
};

Полный ответ

Разница между Function Declaration и Function Expression — в том, как и когда они создаются. Это важно для понимания работы JavaScript.

Что такое Function Declaration

Функция, объявленная отдельно:

function sayHello() {
  return 'Привет!';
}

Что такое Function Expression

Функция, созданная как часть выражения:

const sayHello = function() {
  return 'Привет!';
};

Главные отличия

Function Declaration

Объявляется отдельно
Полностью поднимается
Можно вызвать до объявления

Function Expression

Создаётся как часть выражения
Поднимается только переменная
Можно вызвать только после создания

Простые примеры

Function Declaration

// Можно вызвать до объявления
console.log(sayHello()); // 'Привет!'
 
function sayHello() {
  return 'Привет!';
}

Function Expression

// Нельзя вызвать до создания
console.log(sayHello()); // Ошибка!
 
const sayHello = function() {
  return 'Привет!';
};

Важные особенности

1. Поднятие (Hoisting)

// Function Declaration полностью поднимается
declared(); // Работает
 
function declared() {
  console.log('Работает');
}
 
// Function Expression — только переменная
// expressed(); // Ошибка! expressed ещё undefined
 
var expressed = function() {
  console.log('Не работает');
};

2. Область видимости

// Function Declaration видна везде в своей области
if (true) {
  function test() { return 'Работает'; }
}
 
// Function Expression — только после объявления
if (true) {
  var expr = function() { return 'Работает'; };
  // expr(); // Только здесь можно вызвать
}

Когда использовать что

Function Declaration для основных функций

// Основные функции программы
function calculateSum(a, b) {
  return a + b;
}
 
function validateForm(data) {
  // логика проверки
}

Function Expression для специальных случаев

// Функции как значения
const handlers = {
  click: function() { /* обработка клика */ },
  hover: function() { /* обработка наведения */ }
};
 
// Условное создание
let sayHi;
if (condition) {
  sayHi = function() { return 'Привет!'; };
} else {
  sayHi = function() { return 'Hello!'; };
}

Частые ошибки

1. Попытка вызова до создания

// ❌ Ошибка с Function Expression
console.log(myFunc()); // TypeError!
 
const myFunc = function() {
  return 'Результат';
};
 
// ✅ Правильно с Function Declaration
console.log(declaredFunc()); // Работает
 
function declaredFunc() {
  return 'Результат';
}

2. Путаница с var

// ❌ С var переменная поднимается, но значение нет
console.log(func()); // TypeError! func undefined
 
var func = function() {
  return 'Результат';
};
 
// ✅ Function Declaration полностью поднимается
console.log(declared()); // Работает
 
function declared() {
  return 'Результат';
}

Простые правила

Function Declaration — отдельная инструкция, полностью поднимается
Function Expression — часть выражения, поднимается только переменная
Вызов — Declaration можно вызвать до объявления, Expression — только после
Поднятие — Declaration поднимается полностью, Expression — частично
Использование — Declaration для основных функций, Expression для специальных случаев

Понимание разницы помогает писать более предсказуемый код и избегать ошибок с порядком объявления функций.

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪