Functions in JavaScript

In programming, we should aim to write reusable and modular codes. While working on your JavaScript project, you might come across many program flows where you need to execute same set of statements multiple times.

In such scenarios, if you write such statements multiple times in your script, it results in duplicate codes. If such statements are to be repeated 2-3 times, you can copy and paste such codes again and again. However if you have to do it more number of times, it becomes pretty difficult. Having duplicate codes which does the same function may cause challenges in maintaining such codes.

Consider a scenario when you are required to make some modifications in such code statements. If you have duplicated those set of codes at multiple places, you might be required to go all over again and change the statements at multiple places. Sometimes, if you are modifying the statements after a long amount of time, you may forget some of the places where you have used that piece of code and may result in bugs.

To mitigate such challenges, we use functions in programming. Like many other languages, JavaScript also supports creating and using custom functions which can be used later.

General Syntax

To create a function in JavaScript, you can use this general syntax:

function functionName(){
	//statements inside a function
}

    

Let us understand this with an example function.

function sayHello(){
	console.log(“Hello world”);
}
sayHello(); //calling once
sayHello(); //calling another time
                    
                    

In this example, we first declare the function which is titled as “sayHello” and then later call this function as “sayHello()” to execute the statements inside the respective function’s block. Here you can see we have tried calling this function twice, so it will call and execute the function twice. Hence you will see two console log statements in the output.

Function with Parameters

If you want to pass certain parameters to the function and perform certain operations using them, you can do so in this way:

function functionName(parameter1, parameter2, etc){
	//statements to execute
}
                    

For e.g.

function addNumbers(num1, num2){
	let sum=num1+num2;
	console.log(sum);
}
addNumbers(2,3);  //output as 5
addNumbers(4,5);  //output as 9

                    

In this example, during function declaration, we declared two parameters “num1” and “num2”. These parameters will be treated as local variables within the function. You can add as many number of parameters as you want and each of the parameters can be of different data type.

The function declaration is followed by the statement which calls the “addNumbers” function to add 2 and 3. This results in a console output as 5.

Next we call the “addNumbers” function again which adds 4 and 5. This results in a console output as 9.

Function with Return values

The function can also be made to return some value. This can be done in the following way.

function functionName(parameter1, parameter2, etc){
	let result=0;
	//statements to declare and evaluate result variable.
	return result;
}

                    

For e.g.

function addNumbers(num1, num2){
	let sum=num1+num2;
	return sum;
}

let sum= addNumbers(2,3);  //stores the returned value in the variable called sum
console.log(sum); //outputs the value of sum as 5

                    

As you can see in the above example, you can return only one variable of any data type. (If you want to return more than one values, you can do so using complex data types such as objects/maps/list, etc. We shall discuss them in future tutorials).

As you can see in the above script, while calling the function “addNumbers”, the return value is store in another variable called “sum”. This is done so that you can further use the returned value in your script.

I hope this tutorial gave a good understanding into the usage of functions in JavaScript. See you soon in the next tutorial.

Follow Me on Social Media

Advertisement

FREE Sales CRM Software

Fully customizable CRM Software for Freelancers and Small Businesses

Signup for Free

Sign up for DigitalOcean Cloud

Get FREE $200 credits, deploy your hobby projects for Free

Sign up for Hostinger Cloud or VPS plans and get upto 20% Discount