JavaScript Function Declaration VS Function Expression
All programming languages share a common way of creating programs or full fledged software applications that comprises of creating artifacts like variables, function, classes, data structures, and so on.
Every language has their own way of declaring and initializing these artifacts. As for the JavaScript functions, there are two different ways of implementations.
Both implementations seem to do the same thing — declare or implement a JavaScript function. So, what’s the reason for having two different ways of writing a function?
JavaScript Info guides the main difference as to be the time the function is created and made accessible by the JavaScript Engine.
In order to understand this, first, let’s see how both the syntaxes differ.
Function Declaration
Function Declaration is a global declaration of a function within a file. It is recognized with function signature as: function keyword, function name, parenthesis, function body inside curly braces.
function greet(){
alert("Hello");
}
greet(); // "Hello"Function Expression
As the name suggests, here the function is declared inside an expression. In this example, the function is declared inside an assignment expression.
It is recognized with function signature as: function keyword, parenthesis, function body inside curly braces.
let greet = function(){
alert("Hello");
};
greet(); // "Hello"Accessibility of the function
Functions declaration lets the function be available in the entire code flow (the file or code block in which it is declared). They can be called even before their line of declaration. Whereas function expression are only available after their execution.
The example below demonstrates the difference in usage of both syntaxes.
pay(); // correct: can be called before line of declaration
function pay(){
alert("paid");
}
pay(); // "paid"
greet(); // wrong: cannot call before initialization
let greet = function(){
alert("Hello");
};
greet(); // "Hello"Why this is the case?
The reason why this works is the internal algorithm of JavaScript Engine, as explained by JavaScript Info:
A Function Expression is created when the execution reaches it and is usable only from that moment.
A Function Declaration can be called earlier than it is defined.
That’s due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an “initialization stage”.
And after all Function Declarations are processed, the code is executed. So it has access to these functions.
So, the difference of the implementation is the time of execution of the function that defines or restricts its scope of accessibility.
Wrap-up
Its up to you which ever implementation you want to go for based upon your logic and need. If you don’t want a function to be available in the global scope of the file but only after some logic, then you go for function expression. Or, if you want have more freedom and flexibility of scope, you for function declaration.
Want to read in detail?
I have summarized the concept for your ease of understanding and made sure not to miss anything. But, if you want read in detail then visit JavaScript Info.
If you have liked the content , then do throw clap. Do leave your feedback if you think something could be improved. If your interested, then here are some of my articles you may read and share:
