How to use destructirng assignment combined with looking up elements on the page?

Question

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")

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
– Roko C. Buljan, Commented Feb 4, 2025 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
– Rory McCrossan, Commented Feb 4, 2025 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
– derpirscher, Commented Feb 4, 2025 at 10:56
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
– derpirscher, Commented Feb 4, 2025 at 10:59

Dzmitry Dranitski · Accepted Answer · 2025-02-04 11:09:01Z

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.

answered Feb 4, 2025 at 11:09

Dzmitry Dranitski

7951 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VLAZ Over a year ago

"This approach can come in handy if you have many variables to define" I hard disagree. If you have, say, 10 variables, it becomes extremely cumbersome to find which variable on the left, matches what on the right. If you have more, it's worse. I also struggle to think of any time I've needed 10+ variables. Like, it happens, but not all at the same time (e.g., variable or two at the start, another in a loop, another in an if, etc). I'd say that's an extreme code smell at that point.

Collectives™ on Stack Overflow

How to use destructirng assignment combined with looking up elements on the page?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related