UI Development

Passing array(s) as parameters and utilizing them using ES6 spread

Arrays have always been an integral part of JavaScript. They are list-like objects, a list which is dynamic in length and can contain any type of element. There are times when we would want to pass an entire array as an argument in a function.

If we need to pass the array as an argument in a function, one could wonder why not directly pass it like this

Output:

In the above example, JavaScript puts out its characteristic behavior that is any data type which is not primitive will be pass-by-reference for passing arguments into functions. This is good, but if you are a fan of functional programming, then this approach is not going to work out. One of the core concepts of Functional Programming is to avoid mutating state. Our function manipulates the outside state of the application, which is not desired.

Use of Apply() method:

In ECMAScript 5, the available tool for passing an array as arguments in a function is the apply() method. This method accepts the argument in the form of an array. The apply() method quickly gained popularity because there were several built-in functions in JavaScript that accepted an arbitrary number of arguments.

If we tried passing an array into these functions an error was thrown.

The expected output for the above snippet of code would be 20, but the output comes out to be:

The solution to the above problem is using the apply method with built-in functions.

Solution:

Output:

A similar situation arises when we want to append together two arrays.
One could use concat() method, but it will not append the new array into the existing one that is it creates a new array and returns it. But, if we want to append the new array into the existing one, then we could use the apply() method along with push() method.

Output:

This is one good of way of passing an array as a parameter in a function, but with ECMAScript 6 spread operator, it gets much easier.

Spread Operator:

The spread operator passes an array as an argument and spreads the array into individual parameters that are sent to the function for further manipulation.
Syntax – functionName(…arg)

Output:

Use of spread operator to convert a string to an array:

We can use the spread operator to simply convert a string to an array of characters.

The spread operator walks through each character in the str string and assigns it to our new chars array.

Output:

With spread operator, it became easy to write basic functions which were a little complex with the apply() method. One drawback of the apply() method is that it makes a function call and does not send the arguments.

Output:

Date.apply() tries calling a function on the Date object, which throws an error. Whereas the spread operator simply sends the individual argument which is expected.
Lastly, the spread parameter might be confused with the rest parameter, since the syntax is exactly the same. The spread parameter, expands the elements, whereas the rest parameter collects all the arguments into one.

Output:

Conclusion:

To conclude, the spread operator or the ellipses have dramatically changed the way developers write code in JavaScript. It has tremendously reduced the complexity and effort in completing tasks. It is a trending subject and an important aspect of functional programming for modern developers.

About The Author