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
