Function Expression

Function Declaration

Syntax:

function name_of_function(parameter1, parameter2, … )

{

//body

return something;

}

1. A function in JavaScript is created using the keyword ‘function,’ followed by its name.
2. Within ( ) brackets, the parameters are mentioned.
3. The body of the code is written within the { } curly brackets.
4. If the function has something to return, it does so using the ‘return’ keyword.

Calling/Invoking a Function

Syntax:

name_of_function(argument1, argument2, … );

To call a function, we write the name of the function and pass the needed input arguments within ( ) brackets.

Example

Code:

function icecream(quantity, price) {
  var total_price = quantity * price;
  return total_price;
}
let x = icecream(5, 100);
console.log(x);

You can also try this code with Online Javascript Compiler

Run Code

Output:

500

In this code snippet, a function called icecream is created, whose input parameters are

• quantity 
• price

It returns the total_price when it is called.

In line 4, the icecream function is invoked by passing input arguments 5 and 100. The result returned by the function is then stored in variable x.

NOTE:

• Function parameters are the ones mentioned in the first line of Function Declaration, but function arguments are the real values that are passed to the function during a function call. In the above code snippet, quantity and price are the parameters and 5,100 are the arguments. The parameters quantity and price get initialized with the argument values 5 and 100, respectively.
• We can write a function that does not have any input parameters or does not have a return statement. Without any return statement, the function returns ‘undefined’ by default.

Example

Code:

function message() {
console.log("Hi Ninja!");
}
message();

You can also try this code with Online Javascript Compiler

Run Code

Output:

Hi Ninja!

For good practice, you can try it on an online JS compiler.

Functions are first-class objects

Functions in JavaScript are treated as first-class objects because they have properties and methods just like an object. But, what makes functions different from objects is that they can be called from anywhere in the program.

Now that we understand Function Declaration let us move on to Function Expression. 

Function Expression

Function Expression is very similar to Function Declaration. But as the name suggests, in Function Expression, functions are defined using an expression. It allows us to create unnamed functions. Functions declared with Function Expression are stored inside a variable and invoked using the variable name, not the function name.

let x  = a/b;

Here a/b; is an expression that is assigned to a variable x.

The syntax of Function Expression is also quite similar.

Syntax:

Function Declaration

function name_of_function(parameter1, parameter2, …)

{

//body

return something;

}

Function Expression (unnamed or anonymous function)

let variable = function(parameter1, parameter2, …)

{

//body

return something;

};

We can create a named function too,

Function Expression (named function)

let variable = function name_of_function(parameter1, parameter2, …)

{

//body

return something;

};

Example

Code:

let icecream = function (quantity, price) {
  var total_price = quantity * price;
  return total_price;
};
let x = icecream(5, 100);
console.log(x);

You can also try this code with Online Javascript Compiler

Run Code

Output:

500

NOTE: 

• Unlike Function Declaration, Function Expression is not hoisted to the top of the code. So Function Expression has to be defined first before it gets called. 
• It is necessary to add a semicolon ‘;’ at the end of Function Expression, unlike Function Declaration. It is because Function Declaration is essentially a block of code, but Function Expression is defined inside a statement like ‘ let variable = //function expression// ;’ . That is why a semicolon is added at the end to terminate the statement.

Arrow Function

Arrow Functions make it even easier to create functions and in a more concise manner. They are also called the ‘fat arrow function’ and are one of the most popular features of ES6. 

But arrow functions do have a lot of constraints and cannot be used in every case like the traditional functions.

Syntax: 

let variable = (parameter1, parameter2, …) =>

{ 

//body

return something;

};

Example

Code:

let icecream = (quantity, price) => {
 var total_price = quantity * price;
 return total_price;
};
let x = icecream(5, 100);
console.log(x);

You can also try this code with Online Javascript Compiler

Run Code

Output:

500

But when to use a Function Declaration, and when exactly should we use a Function Expression?

Function Declaration, unlike Function Expression, is hoisted at the top of the program and is loaded before any code is executed. This makes Function Declaration be created in the global scope, and it becomes available throughout the entire program.

The case with Function Expression is totally the opposite. The function code snippet is only executed when the interpreter reaches the line of Function Expression, and it is not hoisted to the top of the program. 

So use a Function Declaration when you need the function to be available throughout the entire program and use Function Expression when you need limited availability of the function.

Function Declaration vs. Function Expression

To sum up, let us have a quick glance at the differences between Function Declaration and Function Expression.

Frequently Asked Questions

Q1. What are the different ways to create a function in JavaScript?

Ans: The different ways to create a function in JavaScript are using,

• Function Declaration
• Function Expression
• Arrow Function
• Constructor

Q2. Is Function Declaration and Function Expression the same?

Ans: They are both used for creating Functions. But with respect to syntax and how they are hoisted, they are very different. 

Q3. What are Arrow Functions?

Ans: Arrow Function or ‘Fat Arrow Function’ is a very popular feature of ES6 which allows us to create functions more compactly.

Key Takeaways

In this article, we learned how to create functions using Function Declaration and Function Expression. We also learned about the very popular Arrow Function and understood the critical conceptual differences between Function Declaration and Function Expression.

Happy Learning Ninja!