Skip to content
Related Articles

Related Articles

Improve Article

Difference between ‘function declaration’ and ‘function expression’ in JavaScript

  • Difficulty Level : Medium
  • Last Updated : 21 Sep, 2021

Functions in JavaScript allow us to carry out some set of actions, important decisions, or calculations and even makes our website more interactive. Most of us coding enthusiasts know what a function is. But do we know what’s the difference between function declarations and function expressions? This article let us learn the difference between ‘function declaration’ and ‘function expression’. The similarity is both use the keyword function and the most prominent difference being the function declaration has a function name while the latter doesn’t have one.

Function Declaration:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • A function declaration also known as a function statement declares a function with a function keyword. The function declaration must have a function name.
  • Function declaration does not require a variable assignment as they are standalone constructs and they cannot be nested inside a functional block.
  • These are executed before any other code.
  • The function in function declaration can be accessed before and after the function definition.

Syntax:

function geeksforGeeks(paramA, paramB) {
    // Set of statements
}

Function Expression:



  • A function Expression is similar to a function declaration without the function name.
  • Function expressions can be stored in a variable assignment.
  • Function expressions load and execute only when the program interpreter reaches the line of code.
  • The function in function declaration can be accessed only after the function definition.

 

Syntax:

var geeksforGeeks= function(paramA, paramB) {
    // Set of statements
}

Example 1: Function Declaration

The following example illustrates a function declaration where we do the addition of two numbers.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Function Declaration</title>
</head>
  
<body>
    <h1 style="color:green">GFG</h1>
    <h2>Function Declaration</h2>
  
    <script>
      
        // Function Declaration
        function geeksforGeeks(paramA, paramB) {
            return paramA + paramB;
        }
  
        var result = geeksforGeeks(5, 5);
        document.write('Sum=', result);
    </script>
</body>
  
</html>

Output:

Example 2: Function Expression

The following example illustrates a function expression where we do the addition of two numbers.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Function Declaration</title>
</head>
  
<body>
    <h1 style="color:green">GFG</h1>
    <h2>Function Expression</h2>
  
    <script>
      
        // Function Expression
        var geeksforGeeks = function (paramA, paramB) {
            return paramA + paramB;
        }
  
        var result = geeksforGeeks(5, 5);
        document.write('Sum=', result);
    </script>
</body>
  
</html>

Output:

Difference between Function Declaration and Function Expression:

 Function DeclarationFunction Expression
1.A function declaration must have a function name.A function Expression is similar to a function declaration without the function name.
2.Function declaration does not require a variable assignment. Function expressions can be stored in a variable assignment.
3.These are executed before any other code.Function expressions load and execute only when the program interpreter reaches the line of code.
4.The function in function declaration can be accessed before and after the function definition.The function in function declaration can be accessed only after the function definition.
5.Function declarations are hoistedFunction expressions are not hoisted
6.Syntax:
function geeksforGeeks(paramA, paramB) {
// Set of statements
}
Syntax:
var geeksforGeeks= function(paramA, paramB) {
// Set of statements
}



My Personal Notes arrow_drop_up
Recommended Articles
Page :