Did you know JavaScript Array Destructuring?

Did you know JavaScript Array Destructuring?_628eaed44239b.jpeg

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.

What do you think?

Silver 1

Written by yulica

Leave a Reply

Your email address will not be published.

      A Step-by-Step Guide to Building a Football Data Scraper

      Basit bir Hyperledger Fabric ağının ayağa kaldırılması_628eaec9e879e.jpeg

      Basit bir Hyperledger Fabric ağının ayağa kaldırılması