Difference between “var functionName = function() {}” and “function functionName() {}” in JavaScript

In this article, we will be discussing the function functionName() {} and functionName = function() {} with suitable code examples for each condition & then we will see the difference between the function functionName() {} and functionName = function() {}.

function functionName() {}: A function declaration is a statement that creates a named function with the specified parameters and function body. It uses the function keyword followed by the name of the function and the parentheses containing the parameters (if any) and the function body enclosed in curly braces. The function can be called by its name anywhere in the scope where it’s defined.

Syntax: The function declaration syntax is the most common way to define functions in JavaScript. 

function functionName() {
      // Function body
}

Example: In this example, we will use function declaration. Here, we have defined a function named addNumbers that takes two arguments a and b. The function body contains a single statement that adds a and b and returns the result.

Javascript

function addNumbers(a, b) {
      return a + b;
}
console.log(addNumbers(2, 3));

Output

5

functionName = function() {}: A function expression is an assignment where the function is assigned to a variable, which can then be used to call the function. It uses the variable name followed by the assignment operator and the function keyword with the parentheses containing the parameters (if any) and the function body enclosed in curly braces. It is used to define anonymous functions, which are functions that are not assigned to a named variable.

Syntax:

var functionName = function() {
      // Function body
};

In function expressions, the function can also be defined using the const or let keyword instead of var, depending on your needs.

Example: This example uses the Function Expression, where we have defined a function named addNumbers that takes two arguments a and b. The function body contains a single statement that adds a and b and returns the result. The function is assigned to a variable named addNumbers.

Javascript

let addNumbers = function(a, b) {
     return a + b;
}
console.log(addNumbers(2, 3))

Output

5

Differences between the Function Expression &  Function Declaration:

	Function Declaration	Function Expression
Definition	Hoisted to the top	Defined when executed
Name	Mandatory	Optional
Anonymous Functions	No	Yes
Arguments Object	Yes	No
Scope	Function	Variable
Hoisting	Yes	No
Can be stored	No	Yes
Can be called	Before declaration	After declaration
Examples	function add() {…}	var add = function() {…}

In conclusion, both function declaration and function expression have their uses in JavaScript, and choosing one over the other depends on the specific requirements of your code. If you need a function that can be called before it’s defined, use function declaration. If you need a function that can be stored in a variable or passed as an argument to another function, use function expression.