DEV Community

Samantha Ming
Samantha Ming

Posted on • Originally published at samanthaming.com

JavaScript: Skip Values In Destructuring

Alt Text

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

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

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

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

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

@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


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

Top comments (3)

Collapse
 
ntvinhit profile image
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);

Collapse
 
mattbag00 profile image
Matt Bagni

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

Collapse
 
ntvinhit profile image
Nguyễn Trọng Vĩnh

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

I dont think this is a good idea