Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Sparse array destructuring in JavaScript

codepipet.com

Post reply on HN
Print view View original

11–18 of 18 posts

Re: Sparse array destructuring in JavaScript

#11

Post by bastawhiz »

postalrat wrote: post #6
bastawhiz wrote: post #4

It's called "array destructuring" because you're destructuring _arrays_, but this is treating arrays like _tuples_. If you're storing more than 3 (really 2) pieces of information about a single thing in a tuple, you're almost certainly misusing tuples. Why would you store a payment record, for instance, in a tuple of the form `[customerEmail, cardLast4, amount, currency, timestamp]` when you could just use an object,…

The rare case for me is when you really care about size. The destructured variables can be renamed by the minifier while an object will keep the property names.

That's where gzip or brotli come in. In a lot of cases the number of bytes over the wire hardly changes.

Re: Sparse array destructuring in JavaScript

#13

Post by artdigital »

kamranjon wrote: post #9
travisd wrote: post #2

I’d flag this if I saw this in a code review. It’s to cute and hard to see what’s happening. Would much rather just see someone prefix with an underscore if they don’t need the variable (const [id, _email, name] = loadUserInfo(…); is preferable to const [id, , name]).

Unfortunately eslint would likely flag this as unused vars, so typically you would not do this as you've described. Object destructuring is a bit more forgiving and can be a nice alternative: const {id, name} = loadUserInfo() - assuming you wrote loadUserInfo and are in control of the return value.

You can easily add a rule to eslint that makes it not complain _xxx for unused variables: https://eslint.org/docs/latest/rules/no-unused-vars#argsigno...

Re: Sparse array destructuring in JavaScript

#15

Post by jakear »

I've used this for regexp's...

    const parse = /(\w+):(\d+)/.exec(str)
    if (parse) {
        const [, key, value] = match
    }
(Where the elided first entry is the original string)

I've also had bugs where I forgot the leading comma and had all the wrong captures. Depending on the situation, I might instead recommend named captures:

    const parse = /(?\w+):(?\d+)/.exec(str)
    if (parse) {
        const {key, value} = parse.groups
    }
Caveat is it takes a bit to convince TS this is sound, and you have to manually sync the names. (https://github.com/microsoft/TypeScript/issues/32098 would help)

Re: Sparse array destructuring in JavaScript

#16

Post by tonto »

postalrat wrote: post #6
bastawhiz wrote: post #4

It's called "array destructuring" because you're destructuring _arrays_, but this is treating arrays like _tuples_. If you're storing more than 3 (really 2) pieces of information about a single thing in a tuple, you're almost certainly misusing tuples. Why would you store a payment record, for instance, in a tuple of the form `[customerEmail, cardLast4, amount, currency, timestamp]` when you could just use an object,…

The rare case for me is when you really care about size. The destructured variables can be renamed by the minifier while an object will keep the property names.

maybe interesting: the obj destructuring may be a bit faster than array destructuing (and not destructuring at all is sometimes a bit faster too). setup a small benchmark here https://jsbench.me/eolakmvsor/1

just storing the data and accessing it as a tuple seems to not be the significantly slow part, but instead its destructuring the array that can be a bit slow. i remember seeing some threads with e.g. useState hooks in react needing array destructuring optimizations, but appears to still be a bit slower https://docs.google.com/document/d/1hWb-lQW4NSG9yRpyyiAA_9Kt...

caveat: depends on browser (chrome vs firefox behavior is different for example) and may vary over time

Re: Sparse array destructuring in JavaScript

#17

Post by iLemming »

friedman23 wrote: post #3

I code typescript every day. I don't really hate javascript. This is terrible.

After writing Clojure & Clojuresript for a few years, any language that spins around its syntax would feel terrible. Modern JavaScript looks like a 400-pound diabetic who brags about his skin folds, "check this out man, I can hide two full-sized cans of beer and you wouldn't even know it..."

What's the point of this cabalistic trick with commas? How does it improve anything about code? Readability, parseability, formatting, reasoning? I feel we're moving towards the day when the browsers would mark websites with a badge "built without use of JavaScript", so we know it can be trusted.

Re: Sparse array destructuring in JavaScript

#18

Post by [deleted] »

artdigital wrote: post #13
kamranjon wrote: post #9

Earlier quoted context omitted.

Unfortunately eslint would likely flag this as unused vars, so typically you would not do this as you've described. Object destructuring is a bit more forgiving and can be a nice alternative: const {id, name} = loadUserInfo() - assuming you wrote loadUserInfo and are in control of the return value.

You can easily add a rule to eslint that makes it not complain _xxx for unused variables: https://eslint.org/docs/latest/rules/no-unused-vars#argsigno...

[deleted]
Post reply on HN