Suraj Negi's Blog

Different ways to Create functions in Javascript

Suraj Negi's photo
Suraj Negi
·

3 min read

Today, we will learn different ways to create functions in Javascript.

Before starting, a reminder about what is a function:

A Function is a block of statements that is designed to perform a particular task.

//defining a function
function test(){
    console.log("Hi from Function");
}
//calling the function
test()

There are four ways a function can be defined in JavaScript. They are as follows:

  • Function Declaration
  • Function Expression
  • Arrow Function
  • Using Function Constructor

Let's have a look at them one by one.

Function Declaration

A function declaration starts with the function keyword. It can accept any parameters and return anything as per the use case.

function Multiply(num1,num2){
    return  num1* num2; ;
}

let result= Multiply(10,5);
console.log(result); // 50

The main characteristic of a function declaration is that this function will get hoisted on the top of the execution context. It means that you can call this function even before it is declared.

let result= Multiply(10,5);
console.log(result); // 50

//other Statements

function Multiply(num1,num2){
    return  num1* num2; ;
}

As you can see, that Multiply function is called before it is created.

Function Expression

In a function expression, you assign a function reference to a variable. 

let test = function(){
    console.log("Hi from Function");
}
//calling the function
test()

The main difference between function declaration and function expression is that function defined with function declaration approach get hoisted but function defined with function expression doesn't get hoisted.

let result= Multiply(10,5);
console.log(result); // ReferenceError: Multiply is not defined

//other Statements

let Multiply = function(num1,num2){
    return  num1* num2; ;
}

As you can see, we got the ReferenceError when we tried calling the Multiply function because it is not hoisted on top of the execution context.

Arrow Function

The arrow functions are a newly added feature in ECMA 2015. We can say an arrow function expression is a compact alternative to a traditional function expression

//traditional function expression
let test = function(){
    console.log("Hi from Function");
}

//Arrow function
let Multiply = (num1,num2) => {
    return  num1* num2; 
}
let result= Multiply(10,5);

Arrow function can be written in more one than form based on use case.

// More the one parameters and only return statement
var add = (num1, num2)=> num1+num2; 

// No parameters and  no return statement

let greet = ()=>console.log('hey');

// More than one paramters and more than one expression
var test = (name,age)=>{
   if(age > 20){
    return 'age is more than 20';
   }
   return 'age is less than 20';
}

Function Constructor

By using the function constructor also, we can creates a new Function object

const multiply = new Function('a', 'b', 'return a * b');

console.log(multiply (10,5));

This approach of creating the function suffers from security and performance issues. That's why it is not advisable to use this approach.

Summary

In this post, you learned about various ways of creating a function.

I hope you found the article useful. Thanks for reading.

functionsJavaScriptES6