JavaScript Functions

A function is a collection of code statements that helps you perform certain tasks. You need to separate the function from the rest of the program. Functions allow you to create code packages that can be reused and easily debugged.

What are the advantages of using functions?

Easy code maintenance: Once you create a function, you can use it repeatedly. If you modify the function, all the changes will be done automatically at places where you have applied the function.

Easy code debugging: It is easy to locate which function causes error. Therefore you can rectify the error in no time.

Eliminates code repetition: With functions, you put together code blocks in a single entity. This allows you to repeat similar tasks whenever required by simply calling the function. Also, the need to copy and paste the same code block is eliminated.

How can you define and call a function?

To declare a function, use the function keyword, followed by the function name and parentheses.

Syntax:

function functionname()

{

//code statements;

}

Example:

// Defining function

function sayWelcome() {

 	document.write("Welcome to JavaScript");

}

// Calling function

sayWelcome(); // Prints: Welcome to JavaScript

To call a function, you need to type the function name followed by (). Calling a function is also known as invoking a function.

A function name can have alphabets, digits, and underscore. However, a function name cannot start with a number.

How can you add parameters to functions?

When you define a function, you can add parameters such that they can take input values during execution. These parameters are similar to placeholder variables, their value gets changed by the values you provide when you call the function.

Syntax:

function functionName(parameter1, parameter2, parameter3) {

// Code to be executed

}

Example:

// Defining function

function calcTotal(num1, num2) {

var total = num1 + num2;

alert(total);

}

// Calling function

calcTotal(6, 8); // 0utputs: 14

calcTotal(-3, 10); // 0utputs: 7

JavaScript allows you to specify the numbers of parameters you want. But you need to specify a value for every parameter when you call a function. If you omit the value for the parameters, the value becomes undefined.

Example:

// Defining function

function displayName(fName, lName) {

alert(fName + " " + lName);

}

// Calling function

displayName("Gaurav", "Singh"); // 0utputs: Gaurav Singh

displayName("Kareena"); // 0utputs: Kareena undefined

How can you specify default values for function parameters?

ECMAScript 2015 (ES6) allows you to specify default values for the function parameters. When you don’t specify any argument, the default values will be taken.

Example:

// Defining function

function sayBye(name = 'Dear') {

alert('Bye, ' + name);

}

sayBye(); // 0utputs: Bye, Dear

sayBye('Smith'); // 0utputs: Bye, Smith

How can you return values from a function?

The return statement helps you return a value to the code that invoked the function. Position the return statement at the end of the function (previous to the closing curly braces) and terminate with a semicolon.

Example:

// Defining function

function calcTotal(num1, num2) {

 	var sum = num1 + num2;

 	return sum;

}

// Displaying returned value

document.write(calcTotal(16, 16) + "<br>"); // Prints: 32

document.write(calcTotal(-3, 11)); // Prints: 8

Tip: A function doesn’t return multiple values.

How can you work with function expressions?

The function expression helps you create functions.

Example:

// Function Declaration

function calcTotal(num1, num2) {

 	var sum = num1 + num2;

 	return total;

}

document.write(getSum(6, 5) + "<br>"); // Prints: 11

// Function Expression

var calcTotal = function(num1, num2) {

 	var sum = num1 + num2;

 	return total;

}

Now that you have stored the function expression in a variable, you can use the variable as a function.

Example:

var calcTotal = function(num1, num2) {

 	var sum = num1 + num2;

 	return sum;

}

document.write(getSum(7, 9) + "<br>"); // Prints: 16

var Sum = getSum(7, 25);

document.write(Sum); // Prints: 32

How can you understand the variable scope?

JavaScript allows you to declare variables wherever you want. However, the scope of availability (accessibility) of the variable depends on the position of the declaration of the variable. This is known as the variable scope.

All the variables declared in a function have a local scope. This implies that you cannot access them outside the scope of that specific function.

Example:

// Defining function

function sayHello() {

 	var say = "Hello! How are you?";

 	document.write(say);

}

 

 sayHello(); // Prints: Hello! How are you?

 

 document.write(say); // Uncaught ReferenceError: say is not defined

But, variables that have been declared outside a function have global scope. This implies they will be available everywhere.

Example:

var say = "Hello! How are you?";

 // Defining function

function sayHello() {

 	document.write(say);

}

 

 sayHello();  // Prints: Hello! How are you?

document.write("<br>");

document.write(say); // Prints: Hello! How are you?