Відмінності між function declaration і function expression в jаvascript.

Відео: [jаvascript Tutorial] 014 Function Statements and Function Expressions

Всім привіт! У цій статті я хочу розповісти про те, що таке function declaration і function expression в мові програмування jаvascript.

На сайті вже була стаття про те, що таке функція, як її створювати і використовувати. Якщо ви раптом її ще не читали, то можете почитати тут

В тій статті розповідалося про function declaration.

Якщо ви хочете задати function expression, то вам потрібно написати так:

var func =function(a, b){return a + b-} -

Тобто ми присвоюємо функцію змінної. Зверніть увагу, що в кінці стоїть крапка з комою і це потрібно робити завжди, тому що це вже просто значення змінної, в function declaration крапки з комою ставити не потрібно. По суті, якщо ви не поставите крапку з комою, то, швидше за все, нічого страшного не трапиться, проте є такі ситуації, де це може зіграти з вами злий жарт і потім знайти цю помилку буде досить складно.

Тепер поговоримо про відмінності цих двох оголошень функції.

Function Declaration

sum() - 
 
function sum(){ 
 alert(`Спрацювало!`) - 
}

Перш ніж читати далі, подумайте, чи спрацює ця функція чи ні, адже ми спочатку викликаємо її, а вже потім пишемо саму функцію.

Отже, якщо ви подумали, то ось правильну відповідь: ТАК, спрацює.

Як же таке можливо?

Відповідь дуже проста. Справа в тому, що перш, ніж виконувати код, інтерпретатор проходиться по ньому і збирає в спеціальне місце всі оголошення змінних і функцій. Виходить, що він, інтепретатор, вже знає весь вихідний код функції і може її викликати, навіть якщо вона написана нижче за кодом.

Function Expression

Тут все в точності, до навпаки.

Відео: jаvascript for Developers 34 - Function Expressions

func() - 
 
var func =function(){ 
 alert(`Спрацювало!`) - 
} -

Про такі функції інтепретатор дізнається лише тоді, коли дійде до неї в коді, тому приклад вище не спрацює. Однак, якщо написати виклик функції нижче, то все буде працювати.

Навіщо потрібні function expression?

Насправді вони багато де застосовуються, але я приведу тут банальнейший до неподобства приклад.

var age =17- 
 
if(age gt; =18){ 
var func =function(){ 
 alert(`Ласкаво просимо!`) - 
} - 
}else{ 
var func =function(){ 
 alert(`Вам ще зарано!`) - 
} - 
} 
 
func() -

Тепер, залежно від умови, в змінну func буде записаний різний вихідний код і, отже, функції будуть вести себе по-різному.

Відео: jаvascript # 7 Функції: Типи функцій Function esxpression, Function declaration & NFE

З function declaration такий фокус не пройде.

var age =17- 
 
if(age gt; =18){ 
function func(){ 
 alert(`Ласкаво просимо!`) - 
} 
}else{ 
function func(){ 
 alert(`Вам ще зарано!`) - 
} 
} 
 
func() -