javascript - How to use destructirng assignment combined with looking up elements on the page? - Stack Overflow

I want to reduce my javascript code. I have:

let c = document.querySelectorAll(".check"),
    l = document.querySelectorAll(".label");

I want to have, for example:

let [c, l] = document.querySelectorAll([".check", ".label"])`

One line. Is it possible?

let [c, l] = document.querySelectorAll([".check", ".label"])

let [c, l] = document.querySelectorAll(".check, .label")

let [c, l] = document.getElementsByClassName([".check", ".label"])

let [c, l] = document.getElementsByClassName(".check, .label")

I want to reduce my javascript code. I have:

let c = document.querySelectorAll(".check"),
    l = document.querySelectorAll(".label");

I want to have, for example:

let [c, l] = document.querySelectorAll([".check", ".label"])`

One line. Is it possible?

let [c, l] = document.querySelectorAll([".check", ".label"])

let [c, l] = document.querySelectorAll(".check, .label")

let [c, l] = document.getElementsByClassName([".check", ".label"])

let [c, l] = document.getElementsByClassName(".check, .label")

• javascript
• destructuring

Share Improve this question Follow edited Feb 4 at 10:50 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Feb 4 at 10:42 sae67sae67 11 4

• No, it's not possible to go smaller than that in terms of code smell, since [one, two] = will only get the first two elements, and classes might return an arbitrary number of elements. What you might do eventually is create a helper function like: const els = (sel, par = document) => par.querySelectorAll(sel); and use like: const [c, l] = [els(".check"), els(".label")]; – Roko C. Buljan Commented Feb 4 at 10:45
• 1. Why would you ever want this? It's 2 lines of code. 2. Technically, it would be possible as long as you only ever have 1 of each of the .check and .label elements, and they were in the DOM in that order as you're effectively accessing the return values by index. That being said, the code would not be robust in the slightest, which is why this is really not a good idea. – Rory McCrossan Commented Feb 4 at 10:46
• First of all, you should be aware about the differences between querySelectorAll and getElementsByClassName (ie static vs live collection). Second, neither of them acceps an array as parameter, but only strings. And even if ".check, .label" is allowed as selector, the elements will be returned in the order they appear in the document, so [c, l] = ... will only work in one very special situation, ie when there is exactly one .check and one .label element in the document, and they appear in the correct order – derpirscher Commented Feb 4 at 10:56
• 1 And just a general thought: Why would you even want to do that? Good code is not always about being as short as possible. It's mainly about being readable and understandable. And the original two lines provides exactly that. Anybody reading that code would be able to immediately understanding what it does. – derpirscher Commented Feb 4 at 10:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

Technically it is possible:

let [c, l] = [".check", ".label"].map(s => document.querySelectorAll(s));
// or
let [c, l] = ["check", "label"].map(s => document.getElementsByClassName(s));

This approach can come in handy if you have many variables to define. However, for two-three variables that code is possibly less readable than your original one:

let c = document.querySelectorAll(".check"),
    l = document.querySelectorAll(".label");

The readability point is out of this question scope.