Let’s Talk About (…), Baby

2020-07-09

For the last three weeks I’ve been wading through the deep waters of JavaScript and all of its unique quirks. Lately, I’ve come to use a specific operator with a relative frequency and I’ve really come to appreciate the different ways we can deploy it. Let’s talk about spread.

First and foremost, what is the spread operator? The documentation (linked above) defines spread as syntax that allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. What this means, in plain English, is that we can essentially inject values into others with the use of the ‘…’ operator.

Taking a look at the example above, you can see that we’ve defined a constant, parts, that is an array of strings. We’ve also defined a separate constant, lyrics, that is another array of strings. In lyrics, we’ve “spread” the array between the ‘head’ and ‘and’ values to inject the values of parts into the array. The resulting output is the familiar jingle from your favorite childhood song. Magic!

Okay, Steven, that’s cool I guess, but when would we actually use something like that?

I’m glad you asked.

Let’s take a look at an example of a simple application where a user can ‘like’ a specific book. Each book has an array of users that all like it. In this example, if a user hasn’t liked a book before, I want to add that user to the array. If the user has liked the book before, I want to remove that user from the array. (We’ll be using the .find method for that part, so you’re kind of getting a 2-for-1 lesson on conditionals here today.) Let’s take a look at the code that is going to accomplish this.

For this example, we’ve hard-coded our user as myUser and created a variable updatedUsers (currently undefined) set to enter conditional logic to define the variable. The first conditional looks at the ‘book’ object and checks to see if there’s a user with an ID set to 1. If such a user exists, remove the user from the object. The second conditional tells the program that if no such user exists, set the variable updatedUsers to an array, apply the spread operator to the book.users object, and include myUser along with it.

For context, this is what we get when we console.log(…book.users) — the user object that already liked this book. Once we’ve successfully passed myUser in, we create an updatedBook variable set to the value of the book object and update the book to reflect the newly appreciative users. Finally, we make a fetch call to ‘PATCH’ the book object in the database to persist the changes.

Below, we’ve logged the updatedBook object to show that the user has been passed in.

As you can see, the spread operator is a handy little tool with a direct application to real problems. Sometimes in programming, especially if you’re in the early stages of understanding, you find yourself thinking, “when will I actually use this?” — I sure did. Fortunately, with enough exposure, you’ll find these more nuanced parts of a language can make your life significantly easier.