Functions in JavaScript

Functions are one of the fundamental building blocks in JavaScript.

  • A function is a JavaScript procedure—a set of statements that performs a task or calculates a value.
  • A JavaScript function is a block of code designed to perform a particular task.
  • A JavaScript function is executed when “something” invokes it (calls it).
JavaScript Function Syntax –

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas:
(parameter1, parameter2, …)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {
    code to be executed
}
  • Function parameters are listed inside the parentheses () in the function definition.
  • Function arguments are the values received by the function when it is invoked.
  • Inside the function, the arguments (the parameters) behave as local variables.
Function Invocation –

The code inside the function will execute when “something” invokes (calls) the function:

  • When an event occurs (when a user clicks a button)
  • When it is invoked (called) from JavaScript code
  • Automatically (self invoked)
Function Return –

When JavaScript reaches a return statement, the function will stop executing. If the function was invoked from a statement, JavaScript will “return” to execute the code after the invoking statement. Functions often compute a return value. The return value is “returned” back to the “caller”:

var x = myFunction(4, 3);    // Function is called, return value will end up in x

function myFunction(a, b) {
    return a * b;            // Function returns the product of a and b
}

Output –

12

Program Example 2 –

<html>
	<head>
 		<title>Functions in JS</title>
		<script type="text/javascript">
			/*Q1) write a function to add 2 numbers and print the result */
			function addNumber(a , b)
			{
				
				var total = a+b;
				return total;
			}
			var output = addNumber(4,2); // function call
			document.write("<h1>The total is : "+output+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

Output –

The total is : 6
Why Functions?
  • You can reuse code: Define the code once, and use it many times.
  • You can use the same code many times with different arguments, to produce different results.

Leave a Reply

Your email address will not be published. Required fields are marked *