DEV Community

Programming with Shahan
Programming with Shahan

Posted on • Originally published at programmingwithshahan.Medium

Did you know JavaScript Array Destructuring?

art by shahan

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"] 
Enter fullscreen mode Exit fullscreen mode

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

const weAreUseless = ["B", "C", "D", ...]
Enter fullscreen mode Exit fullscreen mode

array destructuring image 1

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

array disctructuring image 2

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"]
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

array destructuring image 3

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.

array destructuring image 4

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"
Enter fullscreen mode Exit fullscreen mode

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”.

array destructuring image 5

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!
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode
console.log(targetCat) // cat has been targeted!
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)