JavaScript Function Parameters

Introduction

JavaScript is a programming language that helps to add functionalities to web pages to make them interactive and user-friendly. It does this by giving browsers a series of detailed instructions that it needs to carry out specific tasks.

Functions in JavaScript make life easy for developers by helping to avoid repetition of instructions which results in writing fewer codes. With function, instructions can be stored, grouped and organized which in turn helps to reuse the instructions by just calling the function by its name.

Parameters even make life much easier for developers by optimizing what each function can do.

Since one of the aims of every developer is to keep their code dry, this article explores in-depth how to optimize functions with parameters and default parameters which is one of ES6 parameters features.

Function Parameters and Arguments

There is no way to talk about parameters without talking about arguments because arguments exist because of parameters, that is, arguments balance the work of parameters.

Parameters and arguments are used to give a function additional information that it needs when carrying out its task.

Parameters are the names given to the information that a function needs to carry out its task. Parameters are placed within the parenthesis after a declared function.

Here is the structure and examples of parameters;

//The structure of function with one parameter
function parameterStructure(parameterOne) {
//do something;
}

//The structure of function with more than one parameters
function parameterStructure(parameterOne, parameterTwo, parameterThree) {
//do something;
}

//Practical example
function addSum(a, b){
return a + b; 
}

Arguments are the exact information that a function will work with when carrying out the specified task. Arguments are placed within the parenthesis after a called function. Below are examples of arguments;

function parameterStructure(parameterOne) {
//do something;
}
//argument with one value
parameterStructure(1);

function parameterStructure(parameterOne, parameterTwo, parameterThree) {
//do something;
}
//arguments with 3 values
ParameterStructure(1, 2, 3);

//Practical example
function addSum(a, b){
return a + b; 
}
//arguments
addSum(5, 7);

Parameters and arguments may look or appear to be the same but they are different. They are like variable expressions. While parameters represent the variable name, arguments are the values that the names hold.

In the example above, the values for parameters a and b are 2 and 3 respectively. It is very important to note that parameters and arguments are separated by commas when working with multiple information.

One of the things that make parameters unique is their ability to hold unlimited arguments or values depending on the task you will want your function to perform.

Function Parameters Rule

While a JavaScript function can have several parameters, its arguments can be the exact number of the parameters or can be lesser than the total number of parameters.

When the number of arguments is more than the number of parameters, JavaScript ignores the arguments that are not specified by parameters and work with the ones specified. For example;

function addSum(a, b, c) {
return a + b + c;
}
addSum(2, 2, 3, 1, 7, 4);

//2 + 2 + 3 will be executed
//result = 7

Also, when the numbers of arguments are lesser than the parameters, JavaScript does not throw any error but instead returns undefined values for the parameters without arguments upon invocation. However, returning undefined for the unspecified parameter will disrupt the flow of the task. Here is a demonstration;

function addSum(a, b, c, d, e) {
return a + b + c + d + e;
}
addSum(2, 2, 3);

//result = NaN

Parameters are read from left to right, therefore for the above script, the value of a will be 2, the value of b will be 2, the value of c will be 3 and the addsum function will be interpreted by JavaScript as;

//2 + 2 + 3 + undefined + undefined

When the browser gets to the undefined, it will not know what to do with it and then return NaN which means Not a Number.

Developers escape the above result by using conditional statements to set default values for parameters to keep the flow of the function intact. For example;

function addSum(a, b) {
If(a === undefined) {
a = 1;
}
If(b === undefined) {
b = 4;
}
return a + b;
}
addSum(2);
//result = 6
//2 + 4 will be executed 

addSum();
//result = 5
//1 + 4 will be executed

Since parameters are what you will work with often when working with JavaScript, to avoid the conditional statements long journey drive, we will however examine the concept of default parameters which is one of the features of ES6 parameters.

Default Parameters

ES6 default parameters help in adding default values to parameters when initializing with the use of assignment operator =. The default values specified for the parameters are what Javascript will fall back to use when it's lacking an argument or when undefined is passed. Below is how to set ES6 default parameters;

function addSum(a=1, b=4) {
return a + b;
}
addSum(2);
//result = 6
addSum();
//result = 5

What is worth noticing is how we've been able to set default values for the parameters with writing lesser code which in turn makes our code easy to read.

Conclusion

Understanding how function parameters work in javascript and how to take advantage of ES6 parameters features will help in advancing your coding skill.

I hope you found this article useful. Please share your views in the comment section. Thank you for reading!

Stay around for more articles on ES6 Parameters features and connect with me on Twitter @JoyPaces