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.

About Author

Author Image
Palak Sharma

Palak is enthusiastic and passionate about coding , Her areas of expertise in coding languages are JavaScript and angular , html and css .

Request for Proposal

Name is required

Comment is required

Sending message..