by 
So let’s start!
What is a function?
A function is a block of code which is used to perform a particular task. For example, you can write a function to add two numbers. Another example — you can write a function to calculate factorial.A function has a function name. You can call / invoke / trigger the function using the function name followed by the ‘()’ operator.
Benefits of using a function
So what’s the point of using a function when you can perform a task (e.g. calculate factorial) without using a function? The main benefits are:Code reuse: If you need to carry out the same task over and over again, you don’t need to write code for that over and over again. If you write a function for that task, you can simply call the function using just one line of statement whenever you need to perform that task. So functions will save you a lot of time.
Maintainability: When you’re writing functions, you’re writing code in a systematic manner, not in an ad hoc manner. So the code becomes easy to maintain, which means adding new features and modifying the code becomes easier later.
Readability: Functions increase the readability of your code. If you use meaningful function names, it will become easier for anyone to understand what tasks your functions perform. So using functions makes it easy to understand your code.
A simple example
The following code example uses a simple function named ‘add’ to add two numbers.< !DOCTYPE html>
<html>
<head>
<title>Test
</title></head>
<body>
<script>
//function definition
function add(a, b) {
return a + b;
}
//function calling
window.alert(add(7, 2));
</script>
</body>
</html>
Output:
9
Explanation of the above code:
In JavaScript, a function definition starts with the keyword ‘function’. Then write the name of the function. Here, ‘add’ is a function name. Always use meaningful names so that you and others can easily understand your code.In this function, ‘a’ and ‘b’ are two parameters, used to receive argument values. The ‘return’ statement returns a value to the ‘caller’. Here, the values of ‘a’ and ‘b’ are added and then the sum is returned to the ‘caller’. The code that is calling the function is simply referred to as ‘caller’.
When the function is called, we’re sending / passing two arguments — 7 and 2, to the ‘add()’ function. Then the parameters ‘a’ and ‘b’ take the argument values 7 and 2. This function calculates the sum and returns the result. The result is then displayed using an alert box on your web browser.
You can display values in another way, also. In this tutorial, we’re displaying values using alert boxes.
What’s the difference between a parameter and an argument? Although the terms ‘parameter’ and ‘argument’ are used interchangeably in many tutorials on the Internet, they are not the exact same things. There’s a difference.
The difference is — in the function definition, ‘a’ and ‘b’ are parameters, they are not arguments. So when we’re using them in function definition, they are called parameters. And 7 and 2 are arguments, they are not parameters. So when we’re using them while calling the function, they are called arguments.
Functions without parameters
You can write functions without specifying parameters. Take a close look at the following code example.<script>
function showMessage() {
window.alert(“Good morning!”);
}
showMessage();
</script>
Output: Good morning!
As this function doesn’t specify a return statement, it returns ‘undefined’. Remember JavaScript functions always return something.
A function with 5 parameters
The function in the following code example has 5 parameters. You can take as many parameters as necessary. If you need only one parameter, take just one parameter!<script>
function multiply(n1, n2, n3, n4, n5) {
return n1 * n2 * n3 * n4 * n5;
}
window.alert(multiply(2, 3, 4, 1, 5));
</script>
Output: 120
Using functions as variable values
<script>function add(a, b) {
return a + b;
}
window.alert(5 * add(7, 2));
</script>
You can use functions as variable values and can use them in expressions just like a variable. The following example demonstrates the use of functions as variable values.
Output: 45
Omitting the ‘()’ operator
If you omit the ‘()’ operator while calling a function, it will return the function definition, instead of giving the return value. Consider the following code example.
<script>
function multiply(n1, n2, n3, n4, n5) {
return n1 * n2 * n3 * n4 * n5;
}
window.alert(multiply);
</script>
Scope of variables declared inside functions
A variable declared inside a function is local to the function only, which means you can access it only from within the function, you cannot access it from outside the function. It’s not recognized outside the function. Examine the following code example to understand the scope of a variable declared inside a function.<script>
sum();
function sum() {
var size = 5;
window.alert(size); //Shows ‘5’
window.alert(typeof size); //Shows ‘number’
}
window.alert(typeof size); //Shows ‘undefined’
</script>
Output:
5
number
undefined
I have explained the basics of JavaScript functions in this tutorial. I hope you found it useful!
0 comments: