1

I'm aware that I can destructure an object or array to multiple variables, whether they are both already assigned or both unassigned, but is it possible to restructure to multiple variables together when at least one variable has already been declared, and at least one has not?

1. Both unassigned

This works ✅

let [a, b] = [1, 2];

2. Both assigned

This also works ✅

let a, b;
[a, b] = [1, 2];

3. At least one assigned, and one unassigned

This DOES NOT work 

let a;
[a, b] = [1, 2]; // 
let [a, b] = [1, 2]; //

The practical use case I am working with here is similar to this— I have a URL path that I would like to split into the path, of the same variable name and its query string when one is present.

This is what I would like to do, but it does not work for the same reason.

let urlPath = '/some-path/some-page?parameter=value';

const getUrlParts = url => url.split('?');

[urlPath, urlQueryString] = getUrlParts(urlPath); //

Here are a couple of workarounds I have come up with so far, but they either force me to run the function twice or break the single assignment line into three separate lines and declare a new variable simply for reassignment:

Workaround #1: Executing function twice

let urlPath = '/some-path/some-page?parameter=value';

const getUrlParts = url => url.split('?');

const urlQueryString = getUrlParts(urlPath)[1];
urlPath = getUrlParts(urlPath)[0];

Workaround #2: Declaring temporary variable

let urlPath = '/some-path/some-page?parameter=value';

const getUrlParts = url => url.split('?');

const urlSplitData = getUrlParts(urlPath);
// temporary variable created
property = urlSplitData[0];
const urlQueryString = urlSplitData[1];
// temporary variable no longer needed
Brandon McConnell
  • 5,776
  • 1
  • 20
  • 36
  • (depending on strict mode) The first option in 3 works, the second is a duplicate declaration using let for a, where are you seeing the error and what does the error say? – MDEV Jun 01 '21 at 20:49
  • 2
    It's not the assignment; it's the declaration. You do not declare `urlQueryString`. If you add a `let` statement for that, it should work. – Scott Sauyet Jun 01 '21 at 20:49
  • @MDEV the duplicate declaration wasn't actually a duplicate. I was meaning to show two different options, not both together – Brandon McConnell Jun 02 '21 at 00:07

1 Answers1

2

I don't believe there is a way to destructure into a combination of already-defined and not-yet-defined variables. But the good news is that you can simply define ahead of time all of the variables into which you wish to destructure:

let urlPath = '/some-path/some-page?parameter=value';
let urlQueryString = '';

const getUrlParts = url => url.split('?');

[urlPath, urlQueryString] = getUrlParts(urlPath);

Note that this is precisely your first attempted solution, except that we declare urlQueryString before the destructure.

Myk Willis
  • 12,306
  • 4
  • 45
  • 62
  • It would be helpful if you added an explanation for what the OP had wrong – devlin carnate Jun 01 '21 at 20:53
  • @MykWillis Yes, this is the same route I had initially gone with. Using three lines (2 declarations and then the object destructuring) instead of one certainly isn't my preference but it seems to be the only way for now. Thanks for confirming! – Brandon McConnell Jun 02 '21 at 00:08