Did you know JavaScript Array Destructuring?
Published: 2022-05-25 19:41:27


![art by shahan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3zz665luds3etw81dqb.png)

**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](https://programmingwithshahan.medium.com/destructuring-arrays-in-javascript-cf7530f013f9). 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.

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

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

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

![array destructuring image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bq7ln3d8s3g18ywdlmq.png)

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

![array disctructuring image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwhx6fi19huopmi0qd0f.png)

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:

```javascript
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:

```javascript
console.log(kickMeOUt) // "I"
```

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

![array destructuring image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n53yrrbt87hlu91b9h4k.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mj46xfqy59jd7po34bs.png)

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.

```javascript
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”._

![array destructuring image 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z116sawg629lqbibwd7k.png)

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

```javascript
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:_

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

```javascript
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:**
{% youtube 1FRY3Yqf0y0 %}
---

My Social Media Accounts: [Twitter](https://www.twitter.com/codewithshahan) / [Instagram](https://www.instagram.com/codewithshahan)

Thank You for your reading.