JavaScript: Skip Values In Destructuring

You can use blanks to skip over unwanted values 🤓

This way you can avoid useless variable assignments for values you don’t want during destructuring 👍

You can also prefix "_" followed by the variable name you're disregarding. This helps communicates to your team member that it's a useless variable 🤝

// ❌ Ugh, useless variable assignment
const [ignore, keep] = ['ignore', 'keep'];

// ✅ Good (blank space)
const [, keep] = ['ignore', 'keep'];

// ✅ Good ("_" communicates useless variable)
const [_ignore, keep] = ['ignore', 'keep'];

Add Comments to Improve Code Readability

When using the blank space option to skip over values, you can also add comments. This will help communicate to your fellow developers that you are intentionally skipping over the unwanted values.

let [
  chili,
  , // rotten
  , // rancid
  apple,
  olive,
] = ['chili', 'rotten', 'rancid', 'apple', 'olive'];

// OR

let [
  chili,
  /* rotten */,
  /* rancid */,
  keep,
  olive
] = ['chili', 'rotten', 'rancid', 'keep', 'olive'];

Simple Use Case

Here is a simple use case where this could be helpful.

const url = 'www.samanthaming.com/tidbit.jpg';

// 1. Split string by "."
const array = url.split('.'); // [ 'www', 'samanthaming', 'com/tidbit', 'jpg' ]

// 2. Create only the variable we want
const [ , domain, ,type] = array;

// 3. Consuming the variable we created
const name = `${domain}.${type}`;
// 'samanthaming.jpg'

Community Input

@komputarist: The underscore will be quite helpful. At least someone reading the codes won't have to trace what the variables look like. It can be stressful though when there are lots of variables in the destructured item (array or object).

@FPresencia: Learning that you can do [ , valueICareAbout] has been very useful. As most linters complain about unused variables.

@Erik: In TypeScript the convention is just _

@sulco Agreed, but always look at it pragmatically and have code readability in mind. It can get to absurd situation of making your fellow developer (or you in a future) to have to start counting commas to understand the code ;-)

const values = ['ignore', 'ignore', 'keep'];

// ❌ Don't do useless variable assignment
const [a, b, c] = values;

// ✅ if all you need is one value...
const [, keep] = ['ignore', 'keep'];

// 🦄 But also, don't overhack it:
let c = values[2]; // simpler is better

@SamHulick: Parsing comma-deliminated data and grabbing only what you need.

const tooMuchData = '33871,LOC,type1,99.27,FN';
const [, , , price] = tooMuchData.split(',');

console.log(price); // 99.27

@zornwebdev: Or, you can even destructure an array like an object where the key is the index and then you rename the key to the variable name you want const {1: name} = ['ignore', 'keep']. The value for name would be keep due to that being the value at index 1 in the array.

Resources

• MDN Web Docs: Destructuring - Ignoring some returned values
• Advanced ES6 Destructuring Techniques
• Stack Overflow: How can I ignore certain returned values from array destructuring?
• Originally published at www.samanthaming.com

---

Thanks for reading ❤
Say Hello! Instagram | Twitter | Blog | SamanthaMing.com

Comments

[Nguyễn Trọng Vĩnh]

And how about useless arguments in a callback when you can't use a blank as a useless variable?
Example:

const measureCallback = (x, y, width, height) => {
// I just need width, height only;
}
this.measure(measureCallback);

[Matt Bagni]

I think you can use the rest operator (...args)

[Nguyễn Trọng Vĩnh]

so:
const measureCallback = (...args) => {
const [ , , width, height] = args;
}

I dont think this is a good idea