Function Expression vs Function Declaration in JavaScript
Function Expression vs Function Declaration in JavaScript.
It was until during one of the JavaScript mock interviews did I came across the term function expression.
The question was: What is the difference between these two syntax?
function x(){
}
let x = function(){
}
I was clueless for a moment. After thinking a little, I could only come up with: the second syntax invokes an anonymous function and is assigned to a variable.
I was alien to the term hoisting.
In this article, we will acquaint ourselves with three simple terms: function declaration, function expression, and hoisting.
What is function declaration?
Function declaration is also known as function statement. It contains the name of the function, parameters, and a return statement. Naming the function is what sets function declaration apart. Parameters and return statement is optional.
What is function expression?
Function expression also has a name, parameters, and return statement. All of which are optional. The important thing to bear in mind is: the function here is assigned to a JavaScript variable.
What is hoisting?
Hoisting in JavaScript is pulling or hauling functions and variables.
In hoisting,
A function declaration is pulled up with its name and body.
A variable is pulled up with only its name. The value is assigned during execution.
Let’s try to understand this better with an example:
What will be the output of the function x() ?
Function y() will be invoked because it is a declarative function. A declarative function is hoisted with its body. While z() will throw an error.
Why function expression is not hoisted?
The TypeError is thrown at line 3, where z() is invoked. This is because: function z() is a function expression and assigned to a variable. This will be executed as follows:
When z is invoked it is a variable that is undefined and no value is assigned to z. The value of the variable is assigned at the execution stage.
Quoting from Angus Croll’s excellent article:
The left hand side (var bar) is a Variable Declaration. Variable Declarations get hoisted but their Assignment Expressions don’t. So when bar is hoisted the interpreter initially sets var bar = undefined. The function definition itself is not hoisted.
Ever heard of… self-invoking function expressions?
A function declaration can be turned into an expression using self-invoking function expression:
The function is executed as soon as it is created.
When to use what?
Shall I use function declaration or function expression would do my job?
Both will do the said job. A function declaration is available to all the elements. While function expression is available only to the statements written after it.
Quoting from an article in freeCodeCamp:
Function expressions are invoked to avoid polluting the global scope.
Let’s modify the first example and have a look:
Invoking z() after y() in the previous example, threw a TypeError because variable z isn’t hoisted with assignment expression. The output of the modified example is:
Invoking z() here works because it is invoked after the function definition is hoisted.
I have written this article to the best of my understanding. Do let me know in case of errors and omissions.
