DEV Community: Abin John

Introduction to JavaScript Spread Syntax & Rest Parameter

Abin John — Sun, 12 Feb 2023 13:45:00 +0000

The Spread syntax and Rest parameter are two powerful concepts that were introduced to the JavaScript language with ES6 in 2015. At first glance, the two look similar, and developers who are just discovering the three dots often have a hard time figuring them out (I know I definitely did!)

Whenever we see ... in a code snippet, it is either spread or rest. So, what's the difference? and how are they useful?

The Spread Syntax

An iterable in JavaScript is an entity that can be looped over. An array is a good example. The spread syntax takes an iterable and "spreads" out its individual elements as comma-separated values.

Imagine we have an array called evenNums that contains a few even numbers and an array oddNums that contains a few odd numbers. We are tasked with creating a new array allNums that has all the numbers in oddNums followed by all the numbers in evenNums.

Here's the "traditional" way to do that -

const evenNums = [2, 4, 6];
const oddNums = [1, 3, 5];

const allNums = [oddNums[0], oddNums[1], oddNums[2], evenNums[0], evenNums[1], evenNums[2]];

Here's what we are actually doing -

We are listing out each item of the array and separating them by commas. To create the allNums array, we do that for the oddNums array, add a comma, and then do the same for evenNums array.

Listing out the individual array elements separated by commas is exactly what the spread syntax does. Using the spread syntax, the code now becomes -

const allNums = [...oddNums, ...evenNums];

Let's now revisit the definition: The spread syntax spreads out the iterable's contents and separates them by commas.

But what if we did this instead?

const allNums = [oddNums, evenNums]

In this case, we are taking the two arrays and adding them as elements of allNums. We are not picking the individual elements. Here's what allNums would look like if we took the approach above.

const allNums = [oddNums, evenNums]

console.log(allNums) // [[1, 3, 5], [2, 4, 6]]

Use cases

Merge or concatenate arrays
This is what we did in the example above. The spread operator is an easy and simple way to merge multiple arrays into one.

Convert a string to an array
A string is also an iterable. So by using the spread syntax, it can be easily converted to an array

const string = 'JavaScript';

const arrayFromString = [ ...string ];

console.log(arrayFromString)
// ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]

Create copies
The spread syntax is a great way to create shallow copies of an iterable. Because of the way in which JavaScript handles different value types, simply assigning an array or object to a new value doesn't create a true copy [More on this here]. The spread syntax helps to spread the original array contents and put them in a new array.

  const baseArray = [1, 2, 3, 4];

  // Simply assigning baseArray to sameReference doesn't create a 
  copy.
  // They both point to the same location in memory.
  // Any change made to either will reflect in the other.
  const sameReference = baseArray;


  // shallowCopy contains the same items as baseArray,
  // but they don't point to the same memory location.
  // Any change made to either will not reflect in the other.
  const shallowCopy = [ ...baseArray ]

  baseArray.push(100)

  console.log(baseArray) //[1, 2, 3, 4, 100]
  console.log(sameReference) //[1, 2, 3, 4, 100]
  console.log(shallowCopy) //[1, 2, 3, 4]

The Rest Parameter

If you've understood the spread syntax, Rest is easy (pun intended). Rest is the opposite of Spread i.e it takes comma-separated values and turns them into an array. This might be confusing at first, so let's quickly jump into an example.

Imagine we are destructring an array as shown below.

const [first, second, ...others] = [1, 2, 3, 4, 5, 6, 7, 8]

Here's what logging the three variables to the console looks like.

console.log(first) // 1 
console.log(second) // 2
console.log(others) // [3, 4, 5, 6, 7, 8]

Here's what happens behind the scenes -

Both Rest and Spread use the same syntax: the three dots (... )

When the dots are used on an array, it spreads the array to its individual elements. It is called the spread syntax in such cases.

When the dots are used on a comma-separated list, it packs the list items into an array. It is called the rest pattern in such cases.

The rest pattern is popular with destructuring assignments like the one shown above, to pack the unwanted elements into an array. A more popular usage of rest is with function parameters. This is where the name 'Rest parameter' comes from as well.

Rest in function parameters

Here's a function that takes two numbers and prints their sum

 function printSum(num1, num2) {
    console.log(num1 + num2)
}

printSum(3, 5) // 8

What if we wanted to make a more generalized function that can take any number of inputs and then print their sum? That's where rest comes in.

When we call a function with more than one argument, we pass the arguments as a comma-separated list within the function call's parenthesis.

printSum(1, 3, 4, 100);

It is this comma-separated list that is passed to the function parameters. We can make use of the rest pattern to pack this comma-separated list into a single array.

As a first step, let's use the rest pattern to pack the items into an array and then log it to the console.

function printSum(...operands) {
    console.log(operands)
}

printSum(1, 3, 4 ,100) // [1, 3, 4, 100]

Notice how the comma-separated list has now become an array

We can now use a loop to iterate over the operands array and print the sum. A for-of loop is used in the example below.

function printSum(...operands) {
  let sum = 0;
  for (const num of operands)
    sum += num;
  console.log(sum);
}

printSum(1, 3, 4, 100) // 108

Such a function parameter that uses the spread syntax to pack incoming comma-separated items into a single array is called the rest parameter.

The rest parameter can be used in combination with regular parameters as well, but we have to be careful with two things

The rest parameter should be the last parameter in the parameter list

// INCORRECT
function someFunction (a, ...rest, b) {
 //
}

// CORRECT 
function someFunction (a, b, ...rest) {
 //
}

There should only be one rest parameter for a given function

// INCORRECT
function someFunction (a, ...rest, ...someMore) {
 //
}

// CORRECT 
function someFunction (a, ...rest) {
 //
}

Here's one final example. This function takes a greeting and a list of names, and prints out the greeting followed by the name for each name

function printGreeting(greeting, ...names) {
    for(const name of names)
        console.log(greeting + ', ' + name)
}

printGreeting("Hello", "John", "Doe", "Smith");
/*
Hello, John
Hello, Doe
Hello, Smith
*/

Recap

Whenever we see ... in JavaScript, it is either spread or rest, depending on the usage.
When used on an array, it spreads the array elements into a comma-separated list.
When used on a comma-separated list, it packs all the items into an array.
The spread syntax is commonly used to merge arrays and make copies
Rest is commonly used in destructuring and also as a rest parameter in functions that need to accept an indefinite number of arguments.

I hope you got to learn something new today. If you did, do consider sharing this post. Got any questions? Comment away or connect with me on Twitter!

Use Event Listeners The Right Way!

Abin John — Sat, 09 Jul 2022 10:07:31 +0000

Introduction

Here's a normal event listener listening for a click event

element.addEventListener('click', function(e) {
  if(!e.target.classList.contains('active'))
    e.target.classList.add('active')
})

There is a problem with the snippet. It is not easy to understand what exactly the event handler function is doing. We can only infer that a class of active is added to the target element, but no additional context is obtained, like what adding that class does. Such functions that do not have a name are called Anonymous functions, and they pose two major problems -

It is difficult to understand what the function does
The function block cannot be reused

Now take a look at the following code snippet

function toggleBackgroundColor(e) {
    if(!e.target.classList.contains('active'))
      e.target.classList.add('active')
}

element1.addEventListener('click', toggleBackgroundColor)
element2.addEventListener('click', toggleBackgroundColor)

Even if you don't know the exact code flow, from reading the event listener assignments it is at least clear that the click event does something related to toggling the background color of the element. Also, the same function can now be used by multiple listeners without having to duplicate the code.

Therefore, by defining listener functions outside of the event listener, we encourage code readability and code reusability in our program. This evidently makes testing and debugging easier as well.

How to define listener functions outside of listeners

Now that we've established that it is a good practice to define listener functions outside of the event listeners, let's look at three ways of implementing the same.

1. The direct way

The easiest and most direct way to do it is to define the function separately and just mention the function name as the second parameter of the addEventListener() method. Here's the previous snippet again:

function toggleBackgroundColor(e) {
    if(!e.target.classList.contains('active'))
      e.target.classList.add('active')
}

element1.addEventListener('click', toggleBackgroundColor)
element2.addEventListener('click', toggleBackgroundColor)

The event object is automatically passed by Javascript in this case. There's just one drawback to this method which is that we cannot pass any parameters to the function. The only parameter that gets passed by default is the event object. The following two methods enable us to pass other parameters as well.

2. Via an anonymous function

A workaround to pass parameters to listener functions is to use an anonymous function in the event listener that then calls the listener function. In the below example, we pass both the event object and an additional parameter color

function switchBackgroundColor(event, color) {
    event.target.style.backgroundColor = color;
}

element.addEventListener('mouseover', function(event){ switchBackgroundColor(event, 'pink')})
element.addEventListener('mouseout', function(event){ switchBackgroundColor(event, 'blue')})

3. The bind method

The bind method on a function returns a new function that has its this associated with the first argument of the method. Unlike the call or apply methods, bind doesn't immediately invoke the function, but returns a copy with all the parameters applied. We use this feature to our advantage to get a copy of the listener function with all our parameters set.

function switchBackgroundColor(color) {
  this.style.backgroundColor = color;
}
element.addEventListener('mouseover', switchBackgroundColor.bind(element, 'pink'))
element.addEventListener('mouseout', switchBackgroundColor.bind(element, 'blue'))

Conclusion

Depending on your purpose, any of the above methods can be used to keep the event listener and the listener function separate. The important thing is to have the element selector, the event listener, and the listener function separate so that you have clean code that's easy to follow through.

Code faster with Snippets (VSCode)

Abin John — Sat, 02 Jul 2022 13:55:54 +0000

Let's say you're working on a web development project and have to select 10 DOM elements with the infamous querySelector() method. Selecting just one element and assigning it to a variable could go like this:

const headerEl = document.querySelector('.header')

Now imagine repeating that for another 5, 10 or 15 elements! Your fingers will curse you. You could try copying the first line and changing what's necessary, but that isn't an efficient solution, is it?

Enter custom snippets - a great way to type out a single line or multiple lines of code easily and with fewer keystrokes. You just type in a trigger word and VSCode replaces the it with a code block we've set.

Built-In Snippets

Before we move to custom snippets, it is good to note that VSCode already has built-in snippets for a number of languages, and you may have used them already without realizing it. (Reference)

For example, if you're in a javascript project and started to type out forEach in the editor, VSCode displays a For-Each Loop snippet in the dropdown that appears. Select that and VSCode pastes in a forEach block for you with placeholders that can be jumped through with the Tab key.

Typing and selecting the snippet: The resulting code block:

Custom Snippets

Now it's time to create some snippets for ourselves

In VSCode, go to File -> Preferences -> Configure User Snippets
Click on New Global Snippets File...
Give a name for your Snippets file. This file is where you'll be defining your custom snippets.

The snippets file is a JSON formatted file that defines all the custom snippets. Each snippet will have a name and a set of properties that define it. They are:

scope - (optional) Use this to set the languages or projects where the snippets will be identified
prefix - the trigger word that VScode identifies and replaces
body - The code block that will replace the trigger
description - A description of what the snippet does.

Creating a Snippet

Start by creating a new property in the parent object with a blank object as its value. I'm adding one for the querySelector method, and so I'm naming the property 'JS querySelector'

{
"JS querySelector": {}
}

Define the properties for the snippet in the blank object.

{
 "JS querySelector": {
   "scope": "javascript,typescript",
   "prefix": "dsel",
   "body": ["const ${1:variable} = document.querySelector('${0:selector}')"],
   "description": "Select a DOM element"
 }
}

Take a look at the body property. Notice ${1:variable} and ${0:selector}? Those are placeholders. When VSCode replaces the trigger dsel with our codeblock, the placeholder texts will be selected for us to easily change their values. Multiple placeholders can be added with ${2:value},${3:value}, etc and the final placeholder will be ${0:value}. The cursor can be jumped from one placeholder to the next with the tab key which makes changing the values easy and quick.

That's it! Save the file and go back to your javascript/typescript project, type in the magic word dsel, and hit the Enter or Tab key. variable is selected first. Hit the Tab key to switch to selector.

The End

Congratulations! You just created your first custom VSCode snippet. Set up snippets for commonly used codeblocks and make your development process quick, easy, and less frustrating. Your fingers will thank you. Happy coding!