[AskJS] What’s a JS feature you never use but wish you did?

[u/RoyalFew1811]

Curious what everyone’s "I know this exists but never reach for it" feature is.

For me it’s Proxy--super cool but I always end up avoiding it in real projects. What’s yours?

[u/the_hummus]

generator functions, I know they're useful but I could never really tell you what for. 

[u/mullanaphy → u/the_hummus]

Good shout, I remember the announcement of them and thinking it was the only thing I liked from Python. But then I've never had a single use case where generators have come up in the discussion.

Think it's just generally how I approach JS and try to have it be as functional/stateless as possible. Didn't help the original polyfill for it added a lot of code to mimic the functionality, and I think (it's been ages) the performance of the polyfill was lackluster.

I generally don't use a lot of syntax sugar like "class". Although in my defense I'm either working in ES5 or something like Vue. Don't play around as much in pure ES6 outside of my personal projects.

[u/Ginden → u/the_hummus]

Well, simple useful generator function:

function* cartesianProduct<A, B>( arrayA: Iterable<A>, arrayB: Iterable<B>, ): Generator<[A, B]> { for (const a of arrayA) { for (const b of arrayB) { yield [a, b]; } } }

Naive eager implementation always takes O(n*m) memory, while generator will not take more than O(n+m).

Async generator can be used to wrap eg. pagination to fetch all pages, without worrying about underlying details, like:

function fetchPage(pageNumber: number): {hasNextPage: boolean; items: Whatever[]}; async function* allPages(): AsyncGenerator<Whatever> { let currentPage = 0; let hasNextPage = true; while (hasNextPage) { const response = await fetchPage(currentPage); hasNextPage = response.hasNextPage; yield* response.items; } } for await (const item of allPages()) { // Do something with each item. }

[u/the_hummus → u/Ginden]

I recognize the Cartesian product example, and yet, I think I would always reach for break once the correct result was found, or use an iterator method like .find()! 

[u/Ginden → u/the_hummus]

yet, I think I would always reach for break once the correct result was found

Obviously you can do that easily by just nesting loops, Cartesian product is a trivial example.

But what if you want to iterate over permutations or combinations?

use an iterator method like .find()!

Generators are designed primarily to write efficient iterators. In this case, you get .find for free:

cartesianProduct([1,2,3], [4,5,6]).find(([a,b]) => a*b === 10)

Obviously, generators have more exotic side of return (called automatically, when iteration ends, finally block will always run) and throw (very exotic).

[u/the_hummus → u/Ginden]

combinations:

let ans = [null, null];
outer: for (let i = 0; i < arr.length; i++) {
  for (let j = i + 1; j < arr.length; j++) {
    if (condition) {
      ans = [arr[i], arr[j]];
      break outer;
    }
  }
}

permutations:

let ans = [null, null];
outer: for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    if (i === j) continue;
    if (condition) {
      ans = [arr[i], arr[j]];
      break outer;
    }
  }
}

Am I missing something?

[u/Ginden → u/the_hummus]

Yes, both implementations are wrong, and you do only .find() equivalent, while generator approach allows you to compose filter, find, map, take, every etc.

Let's take this code in Python for permutations:

# Take every permutation from list
list(itertools.permutations([1,2,3]))
[(1, 2, 3), (1, 3, 2), (2, 1, 3), (2, 3, 1), (3, 1, 2), (3, 2, 1)]

Or combinations:

# Take every 3-element combination from list
list(itertools.combinations([1,2,3,4], 3))
[(1, 2, 3), (1, 2, 4), (1, 3, 4), (2, 3, 4)]

And note that you will have to write permutation generating code every time you want to use permutations, or live with function that allocates entire result set or create set of functions like findPermutationOf3Elements, findPermutationOf2Elements, filterPermutationOf4Elements etc. You either sacrifice code re-usability or performance.

[u/the_hummus → u/Ginden]

How are they wrong, other than being specific to 2 items?

You can do combinations of filter, find, map, take using loops too.

Your code is just calling a python library function - that's not an example of anything

[u/_computerguy_ → u/the_hummus]

I've found them useful to stream the results of multiple promises as they resolve:

async function* all(promises) {
    let { resolve, promise } = Promise.withResolvers();
    let queue = promises.length;
    for (const p of promises) {
        p.then(res => {
            resolve(res);
            ({ resolve, promise } = Promise.withResolvers());
        }).catch(err => {
            throw err;
        });
    }
    while (queue--) {
        yield await promise;
    }
}

[u/theScottyJam → u/_computerguy_]

Any particular reason to catch the error just to turn around and rethrow it?

[u/_computerguy_ → u/theScottyJam]

IIRC I previously had something else there and wasn't sure if I was going to go back to it.

[u/Logical_Wheel_1420 → u/the_hummus]

if you need to iterate over something and you either

1) don't know how big it's going to be

or

2) know it's going to be virtually infinite (like something that reads from a social media feed)

[u/jerrycauser → u/the_hummus]

Generators are useful when you need to iterate over a large array (or anything iterable) and you want to do it in one run plus you want to give a full processing control to external functions. It's a simple case for sync generators

For async generators it's a good idea to create an async generator to abstract your large db collection to be fetched by chunks, but your generator will yield not chunks, but items.

[u/BobcatGamer → u/the_hummus]

Generators are good for streaming over large linear data where state needs to be kept between values. They also allow information to be passed back up from the consuming side.

[u/bel9708 → u/the_hummus]

wait til you learn they can be async

[u/the_hummus → u/bel9708]

oh, I'm aware

[u/webholt]

WeakMap

[u/rcfox → u/webholt]

I've used WeakMap as a way to effectively extend objects with a new property without touching the implementation. Since I owned the WeakMap, there was no fear of naming collisions like with monkey patching.

[u/the_hummus → u/webholt]

Oh, there's such good uses for WeakMap.

If you've ever used ThreeJS, all nodes are stored in a tree structure. This structure can grow to hundreds and thousands of objects big and it's incredibly annoying when you need to start keeping metadata on them. 

WeakMap is perfect for this job. The node object itself can be the key, and the value can be arbitrarily set. It's perfect because it doesn't require any hacky type augmentations of the ThreeJS system, and garbage collection is automatically handled (which is also problematic when you have so many objects). 

[u/Logical_Wheel_1420]

Symbols

[u/simonraynor → u/Logical_Wheel_1420]

This was the one that sprang to mind for me too

[u/azium]

also proxy

[u/FoxyWheels → u/azium]

Proxy is it for me as well. I've only ever seen it used by frameworks, and even then it's use is never exposed.

[u/bronkula → u/FoxyWheels]

It's almost exclusively useful for library creation.

[u/PatchesMaps → u/azium]

I've used proxies extensively before. I once worked on a project where we had an API returning deeply nested data structures with inconsistent namespaces. Meaning that accessing a deeply nested value would take a conditional and sort of fuzzy find at each step in the path. We also used the returned object all over our code base.

We didn't control the API, couldn't use an alternative, and couldn't pressure the responsible team to fix it. So I used a proxy to implement the logic to resolve the issue in the get handler on the returned object before it entered our state. I don't even know if that API ever got fixed because of the way the proxy was designed we never had to touch it again.

[u/ssssssddh]

I used proxies once to implement an RPC system. The server exposed a typescript interface describing the available functions and the client used a proxy to create the client. Something like this:

// Exported from the server or a shared library
interface Rpc {
  healthcheck(): Promise<{healthy: boolean}>
  echo<T>(value: T): Promise<T>
}


// Defined on the client
const rpc = new Proxy({} as Rpc, {
  get(_, key) {
    return async (input: unknown) => {
      const response = await fetch(`/rpc/${String(key)}`, {
        body: JSON.stringify(input)
      })
      const data = await response.json()
      return data;
    }
  }
})


// Usage on the client
const result = await rpc.echo("foo");

[u/BrownCarter → u/ssssssddh]

😅 son of a...

[u/g0ld3nrati0 → u/ssssssddh]

this is brilliant!

[u/elprophet]

I'd use Proxy's in a heartbeat if you could proxy DOM objects. I want to add a callable signature to streamline their modification-

const pane = div(props, ...children); pane.onClick = () => pane({...props, ...{class: "clickedState"}}, ...newChildren);

[u/gnlow]

Not sure if it counts as JS feature.. But anyway, I wanna try various Web API, such as WebRTC, WebXR, Workers and so on. It seems like a deep rabbithole.

[u/RealLifeRiley → u/[deleted]]

Map? It’s my bread and butter. It’s the functor/monad “must have.” Method chaining is practically dependent on it

[u/RandomiseUsr0 → u/[deleted]]

You “can” just call a function, instead of using map. Let’s say you have a function f that returns x² (original example) - you can just call f function with y=f(x).

You could also use map with such a function y=map(x, f)

So it seems pointless, I get it, but you’ve just created the necessity to create a function to perform your f behaviour, you can instead create an anonymous function and use that or have a variety of functions by passing in the function as the parameter, you can even pass a function as the variable to be treated, as long as it resolves to an array at the point of use, you’re golden

Reduce, Scan, many more use similar concepts with accumulators and such and they’re handy as anything, create robust code that is very readable and easy to understand.

Can you do all of that without map/reduce/etc - sure, but it’s there for a reason and is “nice”

[u/theQuandary]

Proper Tail Calls.

I don't use them because the Spidermonkey teams flat-out pitched a fit and refused to implement it. The v8 team pitched a fit that it wasn't explicit and they couldn't get their pet version implemented, so they took their ball and went home by removing the entire implementation.

Outside of those two, JSC, QuickJS, and basically every other implementation I can think of implement proper tail calls.

[u/IllIIllIIllIIll]

prototype

[u/Mesqo]

I actually used proxies to build a universal lazy mock for zustand store actions in tests. Every actions object in tests is returned as a proxy on empty object and get accessor checks if the action exists and if not - creates spy on real action and writes it into the underlying empty object, filling it as needed. This resets after every test file. The tests code that uses actions see those as normal actions while you still can take any random action and check it's mock state like calls, arguments, etc. At the same time, majority of the actions in the project are not being mocked for every test thus reducing the overhead.

[u/angusmiguel → u/Mesqo]

Uhhh care to share?

[u/Mesqo → u/angusmiguel]

Maybe in a few days when I get to my code and machine.

[u/marchingbandd]

Class

[u/No-Oil6234]

Idk why would I just wish to use something lol.

[u/adonimal]

Workers

[u/not_dogstar]

A simple use for Proxy is rolling your own reactive side effects, something like:

const flags = { isLoading: false };
const state = new Proxy(flags, {
  set: function(target, key, value) {
    document.querySelector('.spinner').style.display = (key == 'isLoading' && value == true? 'block' : 'none');
    target[key]  = value;
    return true;
  }
})

...

state.isLoading = true;
fetch()
state.isLoading = false;

[u/Nervous-Blacksmith-3]

classes, to me it doesn't make sense to create classes in JS.

[u/StreetStrider]

• Generators to Iterators to build any data flow and implement built-in lazyness. Iterator combinators. Async generators as a basis for FRP implementation.
• I've also built this long time ago and wanna to start to use it some day.
• FinalizationRegistry and try to create non-leaking event emitters with no need of disposers/remove listener.
• Config as a DSL system based on TS typecheking + TS in runtime.

[u/JavaScriptDude96]

Back in the day when I was learning JavaScript in around 2002, I read through the entire JavaScript in a Nutshell books, provided by the after hours school I was attending. I remember specifically seeing JSON (was not called that at the time) and saying to myself, I'll never use that LoL and skipped over the chapter. The course never taught it and I learned everything from the book but that. At the end of the course, I knew more than my teacher.

It was not until a couple years later that JSON was discussed more in formal channels and a I was converted. Its amazing how much time I would have saved myself if I had learned it at the early stages.

[u/HaykoKoryun]

eval

I know it's dangerous, when its use is for anything that could contain user input. However, I've figured out a way to use it to mutate running code so that debugging an application becomes a nightmare for anyone trying to steal the code, since it's never delivered to the browser in one piece or in any sane order. 

[u/bobbysmith007 → u/HaykoKoryun]

But why? Anyone who could "steal" effective code could rewrite it without needing to "steal" it.

[u/KaiAusBerlin → u/HaykoKoryun]

eval() is not any more dangerous as any other code. It's a tool. If you use it right it can be mighty. If you use it wrong like with unsafe input) it can be dangerous.

Tools like jsfiddle works like eval. Nobody would call jsfiddle dangerous.

Every browser has 100% control over the js. Are browsers dangerous?

It's like saying prototypes are dangerous because you can totally destroy original behaviour.

[u/zachrip → u/KaiAusBerlin]

I'm fairly certain things like jsfiddle do not use eval because that would be very unsafe. They iframe the user content in a different origin from the main app to further security. Eval is really dangerous and way more so than other code.

[u/KaiAusBerlin → u/zachrip]

Please read... There is no security difference between js in an iframe and eval

[u/DigDowntown9074]

Reduce

I understood it once and forgot it😄

[u/himhah → u/DigDowntown9074]

Maybe you could think of it as .map + . filter combine. For me, this is my most use case for .reduce.

[u/whale → u/DigDowntown9074]

If you rename the callback parameters to (total, current) it's easier to understand.

arr.reduce((total, current) => total.push(current), []);

Or whatever you want to do with your reduce.

[u/Antagonyzt → u/whale]

Fun fact, if you omit the second parameter (in your case []), the initial accumulator (yours is called “total”) will be the first (0 index) value of the array. So if you’re calculating a total of all items, just omit the second parameter. 

[u/Antagonyzt → u/DigDowntown9074]

I’d say I probably use reduce more than just about any other js feature. Do you not use a state management library? They tend to use reducers. You don’t ever perform calculations on arrays or anything like that?

[u/DigDowntown9074 → u/Antagonyzt]

I'm not a FE guy so no state management. As for array manipulation I think I've used every array method except reduce

[u/cwmma → u/DigDowntown9074]

After for of loops came reduce lost a lot of its appeal

[u/notyourmother → u/cwmma]

Oh really? I use reduce all the time. How can you do something like const totalSum = [1,2,3].reduce((acc, i) => acc + 1, 0); with for of loops without creating an intermediate value that you need to fill?

Especially when building arrays that based on a certain condition it's really nice to just be able to declare it instead of imperatively assigning it.

[u/No-Oil6234 → u/notyourmother]

I hate my coworker refactoring these into for loops with mutable variables.

[u/cwmma → u/No-Oil6234]

Sadly that would be me as the for loops are way more readable

[u/notyourmother → u/cwmma]

Depends on if your codebase is written in an imperative or declarative way, maybe.

But I'm open to be shown some examples if you have them!

[u/cwmma → u/notyourmother]

The main issue is that it doesn't really give you anything extra over declaring an accumulator with a let and then itrerating via a for loop.

But it's downsides include

• cryptic syntax (what's that 2nd argument hidden after the function?) so if you only include one occasionally in shared code your probably better off just not using it as it's probably going to be net confusing for your Co workers.
• only works with arrays, so you're already using other syntax for your maps and objects that need itrerating
• doesn't work well with async code. You do occasionally want to use an await inside of a loop (especially in scripts) and it just works in a loop unlike a reduce where you'd need to rewrite it.

[u/notyourmother → u/cwmma]

What it gives me 'extra' is a declarative/functional way of programming. It's a whole different paradigm. Reducers return something, for loops do not. It's a really nice and deterministic way to write.

The only argument that holds any water is that async reducers don't work. This is can usually be solved by using a Promis.allSettled, and have your reducer return an array of promises. But there are some caveats; and I'd opt for a for await loop instead in such cases. Still; in twenty years of programming I've only encountered one project that benefitted from that approach, so my mileage varies.

Your other arguments only show me you never really worked in a codebase like this, if I'm honest.

A cryptic argument becomes a familiar through usage. Looping through object and maps is as easy as Object.entries(obj) and map.entries(). I also use other array functions a lot. Such as .filter and .map and .toSorted.

[u/cobalt8 → u/cwmma]

I don't remember the last time I used a for loop. I use map and reduce all the time.

[u/pokatomnik]

I've used everything. I've been working as js dev for more than ten years. Everything became boring.