Function declaration and Function expression in JavaScript

If you are a backend developer who has never tried JavaScript before, learning JavaScript can be an exhilarating experience but at the same time it can give you a feeling of going  down a rabbit hole. I am going to write a few articles to save a fellow backend developer both time and frustration.

There is a certain vocabulary involved which you should be aware of when you start learning JavaScript.If you are a backend developer wanting to get your hands into JavaScript, there is a good chance that you will get to see a lot of code before you actually starting coding. During this process of learning you will see functions being written in different ways and sometimes this can be a point of confusion.

This article will introduce you to a couple of ways of writing functions in JavaScript.

First way to write a function is:

function calulateTax(amount){
 ...
 return amount * 10;
}

This is called a function declaration. If you are a Java developer, you wouldn’t be too surprised. Keyword function followed by the name of the function, parenthesis to pass any parameters and finally the function body. We need not mention the type of the parameter passed to the function or the type of return value.This function will be executed when you call this function as shown below:

calculateTax(2000);

Second way to write a function is:

var taxCalculation = function(){
   return 20000;
}

This is called a function expression. There is no name(anonymous) given to the function above, it is being referred to by the taxCalculation variable. You could add a name to the function if you wanted.

var calculateTax = function taxCalculator(){
  return 20000;
}

The name of the function, taxCalculator may be useful in stacktraces and inside the function (to call it recursively). To call this function, we need to use the name of the variable :

var taxableAmount = calculateTax();




Third way to write a function :

var calculateTax  = () => return 2000;
var taxableAmount = calculateTax();

or simply

var calculateTax  = () => 2000;  // implicit return as it is single statement
var taxableAmount = calculateTax();

If you are a Java or a .Net developer, this third type should be easy to grasp, this is an arrow function expression in JavaScript.

Conclusion

At a broad level, there are 2 ways of declaring functions in JavaScript : function declaration and function expression. I want to keep this article short and not get into the differences between them.

I will get into the differences between the two in my next blog.

One thought on “Function declaration and Function expression in JavaScript”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s