How to declare and define functions in JavaScript?

A function is the most basic feature of any programming language. It adds the flavor of re-usability within the code. It help software developers to reuse code my called a method instead of repeating the same lines of codes in different modules of a single piece of software.

For instance, if you are finding the maximum number from an array whenever a new value is added to the array, instead of repeating this chunk of code (for finding the maximum). We can create a function and write this chunk of code in that function, which will receive and return the maximum element from array upon each update.

In JavaScript and other programming languages, usually there are two types of functions. i.e User defined and Built-in functions. Besides, JavaScript provides a wide range of built-in functions which make it more useful, time-saving, and productive. Let’s first learn about user defined functions and how they can declared and defined.

User-Defined Functions

These functions are added/written by users, e.g developers depending upon their needs. In javascript, the functions are written as:

Syntax

function myFunctionName(parameter1, parameter2, parameter3, …)
{
	// lines to be executed when the function is called
}

Here, function is a keyword, and every function will be created by using this keyword then the name of the function will be written in place of myFunctionName and the parameters will be written within the parentheses ().

A function can have no or many parameters. In case of no parameter, we will let the parentheses as it is. And in case of more parameters we will write them, comma separated.

JavaScript Functions Example-1

Consider a simple function that is printing a hello message and has no arguments (or parameters).

function hello()
{
      console.log(“Hello, Welcome to AlgoIdeas!”);
}
hello();

• Line#1: Function is created with the name 'hello' and the keyword 'function', the empty parentheses () show that it has no parameters.
• Line#2: The function scope starts.
• Line#3: An output is generated as a string and the semi-colon ends the line.
• Line#4: The function scope ends.
• Line#5: The function named 'hello' is called hello() and the semi-colon ends the line.

Expected Output

JavaScript Functions Example-2

Consider the following function:

function addition(num1, num2)
{
        return num1+num2;
}
let result = addition(15,35);
console.log(result);

• Line#1: Function is created with the name 'addition' and the keyword ‘function’ is used for creating function. Both num1 and num2 are parameters.
• Line#2: The function scope starts.
• Line#3: The return statement is returning the sum of num1 and num2 (which is num1+num2) to the line from where the function was called (i.e Line#5) and the semi-colon ends the line
• Line#4: The function scope ends.
• Line#5: The function named ’addition’ is called as addition(15,35) where 15 and 35 are passed to function as parameters, are will be received in the function as num1 and num2 respectively. The returning value from the function is stored in the variable ‘result’. The semi-colon ends the line.
• Line#6: The value stored in the variable result is displayed by using console.log(). And semi-colon is used for ending the line as a terminator.

Expected Output

Real-World Example of using JavaScript Functions

A car dealership that sells Toyota Fortuner vehicles wants to create a web application that allows potential customers to customize their vehicles and view the total cost of the vehicle based on their selections.

function calculateTotalPrice(basePrice, selectedOptions) {
  let totalPrice = basePrice;
  
  for (let i = 0; i < selectedOptions.length; i++) {
    totalPrice += selectedOptions[i].price;
  }
  
  return totalPrice;
}

Explanation

In the above scenario, the dealership wants to calculate the total cost of the vehicle based on the options selected by the customer. To calculate, a JavaScript function called calculateTotalPrice is created.

Functions are used in JavaScript to group related code together and make it reusable. In this case, the calculateTotalPrice function takes in two parameters: basePrice and selectedOptions. The basePrice parameter represents the starting price of the vehicle and the selectedOptions parameter is an array of objects that represent the options selected by the customer.

Inside the function, a variable called totalPrice is initialized to the value of basePrice. Then, a for loop is used to iterate through the selectedOptions array. For each option, the price property of the option object is added to the totalPrice.

Finally, the function returns the totalPrice. This function can be called multiple times with different values for basePrice and selectedOptions, making it reusable for calculating the total price of any Toyota Fortuner with different option combinations.