## Multiple Ways to Define Functions in Javascript

·   ·  ☕ 3 min read

We have looked at functions quite a bit on this blog over the last two years. We have seen many avatars of a function including a function object, a function’s method, function of functions, and so on. But, what we have not done is to document all the ways in which we can define functions.. so here it is. :)

## Functions in Javascript

Function is a reusable body of code.

Let’s say we have to add two numbers. You can write some simple code like so..

 1 2 3 4 5 6  const a = 1; const b = 2; const sum = a + b; console.log("sum: ", sum); 

But, what if you want to define code that can take any two arbitrary numbers and provide the sum? Not surprisingly, we have what is called a “function” to do exactly that.

 1 2 3 4 5 6 7 8 9  const a = 1; const b = 2; const sum = sum(a, b); console.log("sum: ", sum); function sum(a, b) { return a + b; } 

The art and science of specifying some code for a function is a “function declaration”. The code within the sum function brackets is the body of the function and defines what the function does. There is more than one way to declare a function. Once the function is declared, you can call it from other code to get the result of function execution, yay.

## Simple Function Declaration

Example above, nothing specific to report here.

Functions may or may not have arguments (a, b), and may or may not return values (return a + b).

## Function Expression

A function is also an object in Javascript. So, we can easily do ..

 1 2 3  const sum = function (a, b) { return a + b; }; 

The difference from earlier declaration is that we used an expression to declare a function and assigned it to a variable called sum (instead of directly declaring a function called sum). For all practical purposes sum is a “normal” function that takes two arguments like before and returns the sum.

 1 2 3 4 5  const sum = function (a, b) { return a + b; }; console.log(sum(1, 2)); 

This form of declaring function as an expression is also called “named function expression”.

You can also name the inner function, but the results will remain the same.

 1 2 3 4 5  const sum = function sumIn(a, b) { return a + b; }; console.log(sum(1, 2)); //3 

You cannot call sumIn directly.

 1 2 3 4 5 6  const sum = function sumIn(a, b) { return a + b; }; console.log(sumIn(1, 2)); // ReferenceError: sumIn is not defined 

## Function Expression using new

An alternative form of the above expression is to use a new keyword to declare the function and use the function body as the last argument.

 1 2  const sum = new Function(a, b, "return a + b"); console.log(sum(1, 2)); 

See more details of this rarely used form here.

## Arrow Functions

Arrow functions are one of my favourite things in the world. You just don’t name the functions anything, but use them to their full power.

 1 2 3 4 5  const sum = (a, b) => { return a + b; }; console.log(sum(1, 2)); //3 

We did not use function key word to declare the function, but instead used a “shorter” notation with => syntax. The end result is the same.

## More to Functions

Functions are super useful and you will use them probably everywhere in Javascript. Of course, functions could do way more - also see function recursion, and generators.

Stay in touch!
Share on WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things