Open In App

Explain the differences on the usage of foo between function foo() {} and var foo = function() {}

Improve
Improve
Like Article
Like
Save
Share
Report

Here we see the differences on the usage of foo between function foo() {} and var foo = function() {} types of function declarations in JavaScript
function foo() {} is a Normal Function or traditional general way of Function Declaration which every user or developer finds it simpler to declare and use it every ever required and var foo = function() {} is a Anonymous Function Declaration syntax or Expression Function wrapped in via a variable or in simple words, it may also be illustrated that it is variable inside which a function is wrapped up and thus that variable will no longer remain in a state of variable thus it eventually became an accessible function itself which is actually being called as normal function calling takes place in JavaScript. Now lets see the differences:

1. By Name:
When we use the function keyword before the function name, this is called Normal Function or Function Declaration.
When we use the function keyword without the function name, this is called Anonymous Function or Expression Function.

Normal Function or Function Declaration: Here foo is the function name.

function foo() {
    // Function Body
} 

Anonymous Function or Expression Function: Here the function is stored in the variable foo using var.

var foo = function() {
    // Function Body
}

We often write the anonymous function as the arrow function, which has been introduced by ES6 (recommended).

var foo = () => {
    // Function Body
}

Also we may use let keyword while initializing an arrow function, whose syntax is as shown as below:

let foo = () => {
    // Function Body
}

2. Implementation: Here we see how to call the function in Normal Function and Anonymous Function. When any normal function or anonymous function (which is wrapped inside any variable) is called, it is called in a similar manner as normal function is called.

Normal Function or Function Declaration: Here we use the name of the function “foo” to call the whole function.

Javascript




<script>
    function foo() {
      console.log("hello");
    };
     
    foo();
</script>


Output:

hello

Here we can call the function “foo” before or after declaring the function. That means we can declare the function wherever we like in our code.

Javascript




<script>
foo();
 
function foo() {
  console.log("hello");
};
</script>


Output:

hello

Anonymous Function or Expression Function: Here we use the variable foo to call the whole function.

Javascript




<script>
    var foo = function() {
        console.log("hello");
    };
     
    foo();
</script>


Output:

hello

Here we will get an error if we call the function before declaring the function

Javascript




<script>
    foo();
     
    var foo = function() {
      console.log("hello");
    };
</script>


Output:

TypeError: foo is not a function 

Now let us see the following implementation which is implemented using Arrow Function syntax (in ES6).

Javascript




let foo  = () => {
    console.log("Hello World...!!");
}
 
foo();
 
// This code is contributed by Aman Singla....


Output:

Hello World...!!

3. Pass Arguments: Here we will see how to pass an argument within a function.

Normal Function or Function Declaration: Here we will pass the argument only when we call the whole function by the name of the function. 

Javascript




<script>
    function foo(x,y) {
      console.log(x+y);
    };
     
    foo(1,3);
</script>


Output:

4

Anonymous Function or Expression Function: Here we will pass the argument only when we call the whole function by the variable name. 

Javascript




<script>
    var foo = function(x,y) {
      console.log(x+y);
    };
     
    foo(1,3);
</script>


Output:

4

Following is the implementation of the above code snippet using Arrow Function syntax:-

Javascript




let foo  = (x , y) => {
    console.log(x + y);
}
 
foo( 7 , 8);
 
// This code is contributed by Aman Singla....


Output:

15

4. Self Executing Function: Here, when the function is created, the function is immediately called. Here we use Anonymous Function.

Javascript




<script>
    (function(x,y){
      console.log(x+y);
    })
     
    (2,3);
</script>


Output:

5


Last Updated : 29 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads