Difference between a function statement and a function expression in JavaScript
Posted By : Palak Sharma | 27-Dec-2017
Javascript is an object-oriented, cross-platform scripting language. It is a lightweight asynchronous language. Functions in javascript are building blocks which are mainly designed to perform a particular task. To define functions in javascript we have:- function definitions and function expressions. There is a major difference between the two, while we write the code we are unaware of the usage of it so here it is:-
Function Definitions:- It is also called as function declaration or function statement. It requires a "function" keyword and curly braces enclosing the function statement.
function square(number) {
return number * number;
}
Function Expressions:- A function can also be written as an expression, while such function can be anonymous, named or self-invoking.
var square = function(number)
{
return number * number;
};
Now the question is, what is the difference amongst the two, well the first difference is:-
- The function declaration can be placed anywhere in the script, including at the bottom of the script. The javascript interpreter reads the script before anything in the browser so it will allocate the memory to the function. Hence, it can be called anywhere in the script, even before the function declaration as well, like this:-
square();
function square(number) {
return number * number;
}
- The function expression will always be created at the runtime, on the other hand, we cannot able to call the function anywhere, until and unless javascript interpreter evaluates the expression. For eg, this will not work in the case of function expression:-
square();
var square = function(number) {
return number * number;
}
- A function declaration is mutable - they cannot be changed. On the other hand, function expression is mutable - the variable remains the same but the expression can be changed.
- A function declaration is always hoisted on the top of their Javascript scope by a Javascript Interpreter. Well, in case of function expression, the variable gets hoisted but their body doesn't so it will return undefined. For eg:-
var result = function() {
return 3;
};
In the example above "var result" is a variable declaration, it will get hoisted at the top of their javascript scope, but their assignment expression will not get hoisted, so when a bar is hoisted the interpreter initially sets "var result= undefined".
Hence, function declaration will get the memory anywhere in the browser, while function expression will get the memory once the interpreter, interprets the line of code.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Palak Sharma
Palak is enthusiastic and passionate about coding , Her areas of expertise in coding languages are JavaScript and angular , html and css .