Introduction to JavaScript Function Arguments
JavaScript arguments can be passed through functions within the function keyword. Arguments can be given with any name, but it should meet the JavaScript naming convention per a better understanding of the code. We must be aware of the difference between arguments and parameters for a better understanding of the concept without any confusion. Parameters defined as while we are declaring a function, there some names within the function is known as Parameters.
Example:
function add(a, b, c){
return a+b+c;
}Explanation: Here, a, b, c are called as parameters.
Arguments: While we are calling a function, passing some values are called as Arguments.
Example:
add(2,4,6);Explanation: Here, calling above declared add function with 2,4,6 values, 2,4,6 are called arguments. In one word, Arguments are real values.
How does Arguments Work in JavaScript?
- In JavaScript no need to specify the type of the parameter. Because type will take care of JavaScript Engine, it means JavaScript does not check the type of the object at all.
- Passing parameters is not important because JavaScript Engine checks only whether any arguments to function or not. Whereas in Java, we must satisfy the number of parameters as well as the number of arguments.
- A function has 3 parameters, and an argument has only 2 parameters; we do not get any error because JavaScript Engine does check with the number of arguments.
Syntax:
function addition(a,b,c) //function with parameters
{
return a+b+c;
}
addition(1,2,3);//function calling with argumentsJavaScript Output Methods
Console.log: It will display the out in the browser console.
See the above image highlighted in the console with a blue mark.
document.write: It displays out in the browser directly as like html pages.
Examples with Code:
It is divided into 4 types
- Function with no parameters and Function calling with no arguments
- Function with no parameters and Function calling with arguments
- Function with parameters and Function calling with no arguments
- Function with parameters and Function calling with arguments
1. Function with no parameters and Function calling with no arguments
Both function definition and calling function do not have parameters and arguments, respectively.
Syntax:
function functionName(){ //function definition
//code
}
functionName();//function callingExample:
ReturnName.js
<!DOCTYPE html>
<html>
<body>
<font color="green"><p align="center">Function with no parameters and Function calling with no arguments</p></font>
<script>
function getMyName() {
return "I am Paramesh, came from with return statement"
}
document.write(getMyName());
</script>
</body>
</html>Output:
Note: In JavaScript, we can use the return statement even does have not to return type because JavaScript Engine automatically detects the resultant return type. Thus, conclude JavaScript does not have any check return type.
NonReturnString.js
<!DOCTYPE html>
<html>
<body>
<font color="green"><p align="center">Function with no parameters and Function calling with no arguments</p></font>
<script>
function getOutput() {
document.write("Yup, I am without return statement output")
}
getOutput();
</script>
</body>
</html>Output:
2. Function with no parameters and Function calling with arguments
The function definition does not have any parameters, and function calls have some parameters.
Syntax:
function functionName(){
//code
}
functionName(x,y,z);Example:
IndexValue.js
<!DOCTYPE html>
<html>
<body>
<font color="green"><p align="center">Function with no parameters and Function calling with arguments</p></font>
<script>
function getIndexValue() {
document.write("Index values is : "+arguments[0]);
document.write("<br>"); //make output in a new line
document.write("Index values is : "+arguments[1]);
document.write("<br>");
document.write("Index values is : "+arguments[2]);
}
getIndexValue(4,5);
</script>
</body>
</html>Output:
Explanation:
- JavaScript arguments [] array give you array of values passed by function argument(getIndexValue(4,5)). It confirms us that passing arguments are stored like an array in JavaScript.
- In the above example, we are trying to access arguments [2] means the third value of the array gives you output undefined because no such value existed in getIndexValue(4,5).
- One more observation is we can pass arguments to non-parameter function getIndexValue(). It confirms us JavaScript does not check with the number of parameters or arguments passed to it.
3. Function with parameters and Function calling with no arguments:
A function definition has parameters, and function calling does not have any arguments.
Example:
ReturnSum.js
<!DOCTYPE html>
<html>
<body>
<font color="green"><p align="center">Function with parameters and Function calling with no arguments</p></font>
<script>
function getSum(a=1,b=2,c=3) {
return "The Sum is: "+(a+b+c);
}
document.write(getSum());
</script>
</body>
</html>Output:
Explanation:
- Calling function (getSum()) does not have any arguments and function definition(getSum(a=1,b=2,c=3)) have some arguments. Clearly tells you JavaScript does not check number of arguments or parameters.
- As you can see in getSum(a=1,b=2,c=3) has parameters with undefined return type. JavaScript does not check with parameters return as well.
StringPlusValueString.js
<!DOCTYPE html>
<html>
<body>
<font color="green"><p align="center">Function with parameters and Function calling with no arguments</p></font>
<script>
function getSum(a=1,b=2,c=3) {
document.write("The Sum is: "+a+b+c);
}
getSum();
</script>
</body>
</html>Output:
Explanation:
In any programming language
String+String is always String only. In the above example, we are adding a+b+c to the string “The Sum is: “. If we write “The Sum is: “+a+b+c, then the output would become
The Sum is: 123
Is it surprised you? Well, it is because “The Sum is:” are a string and value always string only.
We are keeping the addition of 3 numbers in bracket((a+b+c)), then we add it to the string because any programming language follows the BODMAS rule. First executes Bracket followed by Of, Division, Multiplication, Addition, and Subtraction.
4. Function with parameters and Function calling with arguments
Both function definition and function calling have parameters and arguments, respectively.
Syntax:
function functionName(a,b)
{
//code
}
functionName(2,1);Example:
MuliplicationTable.js
<!DOCTYPE html>
<html>
<body>
<font color="green"><p align="center">Function with parameters and Function calling with arguments</p></font>
<script>
function getMultiples(nThTable,upTo) {
document.write("The 10 Multiples : ");
document.write("<br>")
for(let i=1;i<=upTo;i++)
{
document.write(nThTable+"*"+i+" = "+nThTable*i);
document.write("<br>")
}
}
getMultiples(10,10);
</script>
</body>
</html>Output:
Explanation:
Suppose we want to pass arguments from the calling function and parameters from the function definition. JavaScript Engine does not complain about it. Thus, JavaScript allows Function with parameters and Function calling with arguments.
Conclusion
Function arguments can be passed to parametrized and non-parametrized functions without any errors from JavaScript Engine.
