Parameters and Arguments in JavaScript
What is the difference between an argument and a parameter? Aren’t they just two different names for the same thing?
Before we move on to arguments and parameters, let us have an understanding of functions.
What are functions in JavaScript?
In layman’s term, a function is a block of code, which can be named and then can be used over and over again whenever you need it with that name. There are anonymous functions as well (without any name). We won't be getting into that as of now. Below is the code snippet for creating a named function without any parameters.
function Article(){
// Article is the name of the function
// Block of code here
console.log("Hello there!!!");
}//ES6 (Arrow functions)
const Article = () =>{
//Article is the name of function
//Block of code here
console.log("Woah!! This works as well");
}
Now that we have an understanding of what functions are in javascript. Let us move on to arguments and parameters.
Parameters: These are the list of variables used in the parentheses( ) while declaring a function.
function FunctionOne(parameter1, parameter2){
console.log(parameter1, parameter2);
}Arguments: These are the list of values we pass into the function when we make a function call.
FunctionOne(argument1, argument2);A function can have n number of arguments and parameters or no arguments and parameters at all.
You may think, they look so similar and kind-off serve the same purpose why are we making such a big fuss about them?
We define the parameters for a function only once, but we call the function with different arguments multiple times. Javascript does not throw an error if the number of arguments and parameters don’t match. Let’s look at this with an example.
//function declaration
function LessArgument(param1, param2, param3, param4){
console.log(param1, param2 ,param3 , param4);
}//function call
LessArgument("arg1" , "arg2" ,"arg3");// result
arg1 arg2 arg3 undefined
Here, the function is defined with 4 parameters but while invoking the function we pass only 3 arguments. Javascript does not throw an error here, instead, it treats the unknown argument as undefined.
Now, consider the case where we defined a function, and while calling we send extra arguments. Even in this case, javascript handles it seamlessly. It ignores the extra arguments.
Well, that's the specialty of javascript. how it handles passing too many or not enough arguments. Each argument gets matched up with the parameter, ensure the arguments are passed in the right order as defined in your function parameters.
Can we create a function with variable number of parameters???
Think of a situation where you want to write a function to calculate the sum of numbers. The number of arguments is variable each time we call the function.
Rest Parameters in javascript comes to rescue. Rest Parameter does not restrict the number of arguments that can be passed to the function. But make sure rest parameter is the last parameter in your function.
Here is an example of how we can use rest parameters.
function sumOfNumbers(name , ...numbers){
var sum = 0
for (let num of numbers)
sum = sum + num;
return ( name + " the total sum is " + sum);
}sumOfNumbers("Carl" , 1 , 2 , 3 , 4 , 5 , 6);
// Carl the total sum is 21
sumOfNumbers("Karen")
//Karen the total sum is 0
When ... is at the end of function parameters, it gathers the rest of the list of arguments into an array.
Rest parameters are used to create functions that accept any number of arguments.
In javascript ... can be used for Rest Parameters and Spread Syntax. Rest parameters and Spread syntax are completely opposite of each other.
Spread syntax: We won’t be diving deep into the spread syntax. However, here is a short explanation.
The spread syntax is used to expand an iterable object into the list. Spread operators can be used passing each element of list object as arguments. Here is an example
let arr = [1, 2, 3];
let arrTwo = [...arr , 4, 5, 6];
//arrTwo = [1, 2, 3, 4, 5, 6]function FindLength(...params){
return (params.length);
}FindLength(...arr); //3
FindLength(...arrTwo); //6
FindLength(arr); //1
The spread operator is quite useful while dealing with arrays and objects in javascript.
