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 dont 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


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

Discussion (4)

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