JavaScript - SPLessons

JavaScript Functions

Home > Lesson > Chapter 12
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

JavaScript Functions

JavaScript Functions

shape Introduction

Till now, statements are executed one by one and the output is obtained. Now, all these statements can be grouped together using JavaScript Functions and used whenever required.

shape Description

A JavaScript Function is a block of re-usable code that can be used to perform a particular task. The code written in the function can be executed as many times as required. Function can be invoked by an event or a function call.  JavaScript Functions are defined with the function keyword, followed by a name, and parentheses (). The parentheses may include multiple parameters separated by commas: (parameter1,  parameter2, ...)  JavaScript Functions Advantages: 
  • Functions reduce the memory and complexity of the program.
  • Functions mainly used for re-usability purpose.
  • Functions reduce the bugs and saves the programmer's time.
  • Information hiding is possible with functions.
  • Once the function execution is completed, it returns to the position from where it was called.
A script can be placed inside a function and can be executed by the browser when a page loads. It is advisable to place the <head> section to assure that it is loaded by the browser before it is called. A function can be placed in this section also.

shape Syntax

function function_name(argument1,argument2,…..argumentX) { //function statements; }
In the above syntax, function should be followed by parenthesis and function arguments are optional.

Function without Arguments

Function With No Arguments

shape Description

Arguments are optional while using functions. In the below example, the function displaymessage() is created with an alert message and is called outside of the function parenthesis and the output is displayed even though it does not have any parameters. HTML code in "functions1.html" [html] <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8"/> <title>JavaScript Function</title> <script src="jscode.js" ></script> </head> <body> </body> </html> [/html] Javascript code in jscode.js [c] function displaymessage() { //all statements go inside curly braces alert("Hello!! Welcome to SPLessons "); } //Calling the function explicitly displaymessage(); [/c] Output If a function missed to give arguments(parameters) while calling the function, then the values are set to undefined. [html] <!Doctype html> <html> <head> <script type="text/javascript"> //function with two arguments function addNumbers(firstNumber,secondNumber) { var sum = firstNumber + secondNumber; document.write("The Sum is ",sum); } //Only one argument 10 is passed addNumbers(10); </script> </head> <body> </body> </html> [/html] Output [c] The Sum is NaN [/c] "NaN" is nothing but Not a Number. Value 10 will be assigned to the first argument firstNumber and the second argument secondNumber will be undefined. Hence, the output will be NaN.

Function With Multiple Arguments

shape Description

Multiple arguments will be allowed in functions with any datatype and can be called whenever required. [html] <!Doctype html> <html> <head> <script type="text/javascript"> function addition(str,num) { var add = str + num; alert(add); } //Passing a string and a number as arguments to function addition() addition ("You are very special ",1); </script> </head> <body> </body> </html> [/html] Output When too many parameters are passed does not match with the number of parameters specified in the function paranthesis, the extra parameters will be omitted. Consider the same example above and pass the arguments to the function like below.
addition("You are very special",1,2,3);
The output will be the same as the output for above example, because 2 and 3 will be ignored as they are extra parameters.

Function Return

shape Description

Once the JavaScript Functions are invoked in a statement, the function stops executing and "return" to the statement that has invoked the function.

shape Example

[html] <!Doctype html> <html> <head> <script type="text/javascript"> function multiplyNumbers(a,b) { //returns performing multiplication of a and b return a*b; } </script> </head> <body> <script type="text/javascript"> //Passing arguments 4 and 3 for a and be respectively document.write("The multiplication value is ",multiplyNumbers(4,3)); </script> </body> </html> [/html] Output [c] The multiplication value is 12 [/c] If an explicit return is omitted, undefined is returned automatically.

Summary

shape Key Points

  • JavaScript Functions can be used for code re-usability.
  • Arguments can be passed to a JavaScript Functions.
  • If arguments are missed, then the undefined value is assigned.
  • return keyword is used to return the values back to the invoked statement.