For more information, visit: https://javascript.info/function-expressions-arrows#function-expression-vs-function-declaration
Function Expressions are created when they are reached during execution and can be used thereafter.
Once the execution passes to the right side of the assignment like let sum = function..., the function is created and available for use (assigned, called, etc) from that point on.
On the other hand, Function Declarations behave differently.
A Function Declaration is accessible throughout the whole script or code block.
In essence, before executing a script or a code block in JavaScript, it searches for Function Declarations within it and generates the functions. This can be thought of as an "initialization stage."
After all Function Declarations are processed, the execution continues.
Due to this, a function declared as a Function Declaration can be invoked before it is defined.
sayHi("John"); // Hello, John
function sayHi(name) {
alert( `Hello, ${name}` );
}
The Function Declaration sayHi is created while preparing to run the script in JavaScript and remains visible throughout it.
If it were a Function Expression, it wouldn't work:
sayHi("John"); // error!
let sayHi = function(name) { // (*) no magic any more
alert( `Hello, ${name}` );
};
Function Expressions are generated when they are reached during execution. This occurs only at line (*), which is too late.
When a Function Declaration is inside a code block, it is visible throughout that block but not outside of it.
Sometimes it's beneficial to declare a local function required solely in that block. However, this feature may lead to issues.
Consider a scenario where we need to define a function welcome() based on the age variable received during runtime and then use it later.
let age = prompt("What is your age?", 18);
// conditionally declare a function
if (age < 18) {
function welcome() {
alert("Hello!");
}
} else {
function welcome() {
alert("Greetings!");
}
}
// ...use it later
welcome(); // Error: welcome is not defined
This is because a Function Declaration is only visible within the code block it resides in.
Here's another example:
let age = 16;
if (age < 18) {
welcome();
function welcome() {
alert("Hello!");
}
welcome();
} else {
function welcome() {
alert("Greetings!");
}
}
// Function Declarations made inside curly braces are not visible outside.
welcome(); // Error: welcome is not defined
To make welcome visible outside of if, you should use a Function Expression and assign welcome to a variable declared outside with proper visibility.
Now it works correctly:
let age = prompt("What is your age?", 18);
let welcome;
if (age < 18) {
welcome = function() {
alert("Hello!");
};
} else {
welcome = function() {
alert("Greetings!");
};
}
welcome(); // now working as intended
Alternatively, you can simplify it using the ternary operator ?:
let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
function() { alert("Hello!"); } :
function() { alert("Greetings!"); };
welcome(); // now working as intended