Did you know JavaScript Array Destructuring?

Introduction: Hey there, today we gonna learn one of the most important JavaScript concepts that’s essential prior to learning any JavaScript frameworks. Array destructuring is also confusing for beginner developers.

So, I will tell you an interesting story and suddenly you will find yourself that you know everything about JavaScript array destructuring. You don’t have to remember anything. Just follow this story and you are done.

Requirements: Intense focus is required.

Cat becomes your problem solver: You’re sitting on a chair with your laptop and your laptop has only three keys that are currently working — “I”, “A”, & “M”. You put them into an Array called weAreAlive which is your last hope for typing.

 const weAreAlive = ["I", "A", "M"] 

You create another array that contains all useless keys that no longer working. You name this array weAreUseless:

const weAreUseless = ["B", "C", "D", ...]

Right After typing two words “I am” on your Twitter feed, you realize that your “I” key also stops working.

So, to move this key into the weAreUseless array, you first assign it to a variable called kickMeOut. But instead of creating a new variable in a new line, you just assign a new variable for the first key in the weAreAlive array itself using array destructuring syntax like this:

const [kickMeOut] = ["I", "A", "M"]

Now, if you log this kickMeOut variable on the console you will get only the first key from the array which is “I”. Have a look:

console.log(kickMeOUt) // "I"

So, you got this garbage key to push it in the “weAreUseless” array.

Cool, now you got only two keys that are working properly. But you start feeling unproductive because of lacking the keys to type meaningful words.

So, you grab a coffee and start thinking about your terrible laptop. But you didn’t know that this laptop no longer belongs to you. Your cat somehow realized that you are unhappy. So he jumps into your table to reach toward your face to talk about it and you spilled coffee on your laptop.

After that, you realize the “M” key is no longer alive. So to move it into “weAreUseless” array, you immediately start writing the code as you did previously. Alas! you can only target the first key in this array(‘weAreAlive’). You don’t know how to assign a variable for a specific item inside an array.

const [kickM] = ["A", "M"] // Sorry we can only kick out "A"

Suddenly, you realize that your cat is telling you — “Oh dear, to skip through the items in an array you should use a comma instead”.

So, you immediately started putting commas to pass through unnecessary keys in this array like this:

const [, kickMe] = ["A,"M"] // "M" Keys succesfully kicked out!

Then your mind automatically starts telling you — The fact here is that by putting a comma before the variable, you pass through one step forward in this array of items in this case “A” and assigned kickM variable to this “M” key. Each comma represents a unique position from left to right in the array list.

Here is the concrete example:

const [, , targetCat] = ["horse", "dog", "cat"]

console.log(targetCat) // cat has been targeted!

Summary: So, we learned that we can assign array values to new variables using array destructuring in a single line and we can skip specific items through the array list using a comma where each comma occupies only one specific item in the array list.

Hope you guys enjoyed this article. Make sure to follow me to learn more about complex programming ideas just like stories that you will never forget.

JavaScript array destructuring video summary:

My Social Media Accounts: Twitter / Instagram

Thank You for your reading.