Різниця між FD і FE

JavaScriptJunior~1 хв читання

1. Function Declaration (оголошення функції)

Приклад:

javascript

function sayHello() {
  console.log("Привіт!");
}

Особливості:

Хойститься (hoisting) - тобто функція доступна до місця її оголошення.
Ім'я функції фіксоване і доступне в поточній області видимості.
Можна викликати в будь-якому місці файлу або блоку, навіть до коду оголошення.

Приклад роботи hoisting:

javascript

greet(); // працює, хоча функція оголошена нижче

function greet() {
  console.log("Hello!");
}

Результат:

javascript

Hello!

2. Function Expression (функціональний вираз)

Приклад:

javascript

const sayHello = function() {
  console.log("Привіт!");
};

або стрілкова версія:

javascript

const sayHello = () => console.log("Привіт!");

Особливості:

Не хойститься як оголошення - змінна створюється, але функція в ній недоступна до ініціалізації.
Може бути анонімною (без імені) або іменованою.
Вважається виразом, тому викликається лише після присвоєння.

Приклад:

javascript

sayHello(); // Помилка: sayHello is not a function

const sayHello = function() {
  console.log("Привіт!");
};

Ключові відмінності

Властивість	Function Declaration	Function Expression
Hoisting (підняття)	Доступна до оголошення	Недоступна до присвоєння
Коли створюється	При ініціалізації області видимості	Під час виконання рядка
Можна викликати до оголошення?	Так	Ні
Ім'я функції	Обов'язкове (декларація завжди іменована)	Може бути анонімною або іменованою
Підходить для	Основних функцій, які потрібні всюди	Локальних, переданих як аргументи, колбеків
Приклад використання	`function sum(a,b){}`	`const sum = (a,b)=>{}`

3. Приклад для наочного порівняння

javascript

// --- Function Declaration ---
sayHi(); // Працює

function sayHi() {
  console.log("Hi!");
}

// --- Function Expression ---
sayBye(); // Помилка

const sayBye = function() {
  console.log("Bye!");
};

Function Declaration - коли функція потрібна глобально і її можна викликати в будь-якому місці. Function Expression / Arrow Function - коли функція потрібна локально, як обробник, колбек, або частина виразу.

Коротко запам'ятати

function declaration - створюється заздалегідь (hoisting). function expression - створюється в момент виконання.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.