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.

Also see the perceived problem with this in arrow functions, and implicit return gotcha in arrow functions.

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.