5

How do I destructure width and height if they have been declared before?

function test() {
  let height
  let width

  const viewBox = '0 0 24 24'
  const sizeArr = viewBox.split(' ')

  // ESLint is telling me to destructure these and I don't know how
  width = sizeArr[2]
  height = sizeArr[3]
}
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
Ross Moody
  • 773
  • 3
  • 16

4 Answers4

10

You can use a comma to ignore certain elements of the array that you do not need:

const [,,width,height] = sizeArr;


function test() {
  const viewBox = '0 0 24 24'
  const sizeArr = viewBox.split(' ')
  const [,,width,height]=sizeArr;
  console.log(width,height);
}
test();

If you need to keep the let declarations at the top of the function for some reason, you can remove the const from destructuring. Note that you will need a semicolon at the end of the preceding line due to automatic semicolon insertion.

[,,width,height] = sizeArr;


function test() {
  let height;
  let width;
  const viewBox = '0 0 24 24';
  const sizeArr = viewBox.split(' ');
  [,,width,height]=sizeArr;
  console.log(width,height);
}
test();

See also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Ignoring_some_returned_values

If you do need every value, declare a name for each one:

const [var1,var2,width,height] = sizeArr;


function test() {
  const viewBox = '0 0 24 24'
  const sizeArr = viewBox.split(' ')
  const [var1,var2,width,height]=sizeArr;
  console.log(var1,var2,width,height);
}
test();
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
  • I never considered this option because I expected ESLint to complain about empty array slots. – Sebastian Simon Jul 14 '20 at 03:38
  • 1
    Nice, didn't know you could leave blanks – Adrian Brand Jul 14 '20 at 03:38
  • So even though I'm writing `const`, it won't have a conflict with `width` and `height` being declared above as `let`? – Ross Moody Jul 14 '20 at 03:40
  • 1
    @RossMoody You would have a conflict. Remove the `let` declarations. You don’t need them. – Sebastian Simon Jul 14 '20 at 03:40
  • @RossMoody Remove the `let` statements. See the code snippet in my answer. – Unmitigated Jul 14 '20 at 03:41
  • @RossMoody If you don’t want to remove the `let` declarations (not sure why you wouldn’t), then use `[,, width, height] = sizeArr;`, but please put a semicolon after `viewBox.split(" ")`, or else you’ll get one of [these ASI errors](https://stackoverflow.com/q/31013221/4642212). – Sebastian Simon Jul 14 '20 at 03:46
  • @RossMoody I've updated my answer in case you need the `let` declarations. – Unmitigated Jul 14 '20 at 03:46
  • @user4642212 You are actually the person who got the answer I needed. This is a slimmed down version of the larger function where I declare those variables in an upper scope. The semicolon is why I was getting the error. THANK YOU – Ross Moody Jul 14 '20 at 03:50
  • 1
    @RossMoody You should have provided more context at the start in that case. – Unmitigated Jul 14 '20 at 03:51
3

const [first, second, width, height] = sizeArr;

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
2

You can simply destructure the array into the already-declared variables:

let height;
let width;

const viewBox = '0 0 24 24';
const sizeArr = viewBox.split(' ');

[width, height] = sizeArr.slice(2);
AlliterativeAlice
  • 11,841
  • 9
  • 52
  • 69
1
let [,,width,height] = arr;
console.log('%s %s', width, height);
Sergey Rybalkin
  • 3,004
  • 22
  • 26
lei li
  • 1,244
  • 1
  • 12
  • 35