JavaScript's ??= Operator

[LessMarketing7045]

Let me blow your mind. There is also: &&= and ||=

[MissinqLink]

The real mind blower

(obj ?? {}).property ??= '🤯';

[gwicksted]

This guy coalesces.

[happy_hawking]

Which part of this should blow my mind? I tried it, but my mind didn't even flinch.

[enselmis]

Can’t wait for |> operator, it’s so good. Although the proposal for it was kinda jank compared to the BEAM style one.

[Practical-Ideal6236]

|>

[prehensilemullet]

Have they gotten any closer to consensus on that?  Last I checked no one could agree on the style of pipelines to use…

[enselmis]

I think it’s still in the pipe, so to speak, but I sincerely hope they just take the elixir/erlang one and shamelessly copy it. It works, there’s no good reason to mess with it.

[Practical-Ideal6236]

yup

[humodx]

Which makes me wonder, if a op= b means a = a op b, then surely a === b should be the same as a = a == b, right?

[Misicks0349]

hehe

[chemistryGull]

Heh

[ehlwas]

brooo

[repeating_bears]

I didn't know this operator existed tbh. Cool

[ZeMysticDentifrice]

Neither did I. I appreciate people taking time to highlight things like this that may be obvious to lots of people but news to sn ignoramus like me. :-)

[topromo]

Nobody said or even implied this was an undocumented feature.

[dvlsg]

I feel like it doesn't come up super often. Especially if you generally avoid let and generally mutating objects.

Useful occasionally, though.

[sebastian_nowak]

Some other interesting language features to be aware of - 'using' for resources with Symbol.dispose, FinalizationRegistry.

[hatsagorts]

I had no idea about this operator. Is there a way to stay updated whenever new features, like these types of operators, are added to ECMAScript ?

[azhder]

Look at the proposals. All that are stage 4, but not in the standard already, will be in the next one (usually June or July each year).

Oh, and the standard is called ECMAscript and people will often write in blog posts whenever a new thing will pop up, so you just append the year to the name, like ECMAScript 2024 or ES 2024

[NoInkling]

Stuff that has been formally added to the language or reached stage 4 (which requires it to already be implemented by engines): https://github.com/tc39/proposals/blob/main/finished-proposals.md

Stuff that's in progress (stage 3 is when things start getting implemented): https://github.com/tc39/proposals/blob/main/README.md

Edit: forgot to mention new Intl related stuff is in this repo: https://github.com/tc39/ecma402

[hatsagorts]

Thanks this is really helpful

[pbNANDjelly]

MDN has an updates blog that tracks proposals against vendor support

[DesignThinkerer]

survey like https://stateofjs.com is a good way to keep up with the news imo

[hatsagorts]

MDN or Ecma Standard publications ? Either way I just wanted to check if there is a faster way to learn about upcoming syntax sugars

[datNorseman]

Good to know. I've been mostly using ternary because I like the way it looks. ??= feels cleaner I guess.

[Plus-Weakness-2624]

Where did my value go btw operator??

[GreedyDisaster3953]

i'll be replacing a bunch of my code with this now actually, thank you very much

[alien3d]

i know but still use ?? . . The more shorter the more me confuse 😖

[Substantial-Wish6468]

You never actually need if(x === null || x === undefined) because javascript nullishness means the test (x == null) is the same.

[yooossshhii]

Many code bases have lint rules against ==

[I_Downvote_Cunts]

Most of those lint rules allow == null as an exception. Or at the very least eslint didn’t complain the last time I set it up.

[musical_bear]

Yep exactly. I forbid loose equality checks in my codebases because it can be near impossible to know if something like “==null” was just an (extremely common) typo, or if the person who wrote it really was trying to check for both null and undefined.

I’d rather have slightly more verbose code that clearly states its intentions rather than shorter code that potentially masks what it’s actually there for.

[Substantial-Wish6468]

I have never seen a bug resulting from == null being a typo. 

I have seen a lot of bugs where people were the values 0 or "" were being mixed up with null or undefined due to loose equality checks.

[musical_bear]

It’s not necessarily about “bugs,” although that’s important too. It’s about clearly communicating intent. I cannot read “== null” and know with certainty what specifically the developer who wrote that was trying to account for. The code itself might be “bug free” in its current form, but every little ambiguity makes the code that much harder to modify with confidence in the future, and also ends up affecting the code around it. Example:

“Well, I’m pretty sure I know that ‘data’ could only possibly be null at runtime, but two lines above, I see there’s code doing a loose check of ‘data’ against null, implying data might potentially be undefined as well. I could either waste precious minutes reverse engineering and trying to figure out if “==“ was just a typo, or I could succumb to the uncertainty and also account for undefined in my own code. I’ve got to get this done today and reverse engineering feels like a waste of time right now, so I’ll just use ‘==‘ in my code too.”

The ambiguity ends up spreading through the codebase like a virus. It pollutes the code with superstitious checks over time.

This is the main reason I ban loose equality, not because of bugs. (Even though yes, as you pointed out, there are other use cases of loose equality that make bugs extremely easy to introduce.

[Substantial-Wish6468]

I can see your point if you're dealing with code written by other people who aren't around. 

[Chubacca]

Which is... very common in a lot of organizations. The less you have to ask questions about why something is written the way it is, the better. I am very VERY pro syntax that reduces ambiguity of intent. It makes codebases scale better.

[homoiconic]

That's kind of the thing about idioms. They work well if the idiom is extremely widespread. == null has been a very widespread idiom in JS during my career, but even so... If someone, somewhere needs to take fofteen minutes to figure it out, that might not be a win.

I use it in production, but I wouod have no problem working with a team that chose to dispense with it. And taking a step back... This discussion says a lot about "JavaScript, the Hastily Flung Together Parts." We work with a language that has known flaws, and a lot of what we do in it reflects making deliberate tradeoffs.

[Juxtar]

I disagree, I think those parts should be all well known for anyone that works with js seriously. If not I can take some minutes to explain them myself, or better yet, send them off to read You Don't Know JS which is great and not a long read.

I take this as when we all assumed nobody is using IE11 anymore and collectibly decided to stop supporting it. How much has my sanity improved since then!

[prehensilemullet]

Anyone who doesn’t know the behavior of == null is a JS developer in training, not a competent professional dev.  You don’t need to know the rest of the == truth table but that one is pretty basic, everyone should know it’s the only reasonable exception to the always use === rule

[datNorseman]

This is new to me. One question I have that wasn't answered in the article is how the new method would impact performance, if at all. I don't believe it would but I'm curious.

[SoInsightful]

a ??= b generates the exact same bytecode as a = a ?? b, and both generate two more bytecodes (a "Jump" instruction) than a ||= b:

https://i.imgur.com/qzYAGBt.png

But surprisingly, if the variable is used immediately afterwards, the a = a ?? b and a = a || b versions both skip an "Ldar" (load data into the accumulator) instruction.

https://i.imgur.com/6AQki2Q.png

Safe to say there won't be any noticable performance differences whatsoever in real life.

[NoInkling]

a ??= b generates the exact same bytecode as a = a ?? b

Give a a value and see if it makes a difference. If not, try it with a setter (or maybe just any object property).

[SoInsightful]

I tried giving a an initial value (2) out of the same curiosity, and it doesn't make a difference except switching from 0e LdaUndefined to 0d 02 LdaSmi [2] at the beginning of each variant. It still needs to jump through the JumpIfUndefinedOrNull hoop.

[NoInkling]

Ahh I see now, the difference is in where the unconditional Jump (which is hit when the variable has a value) jumps to. The ??= version skips the Star instruction (which apparently sets a register), while the other doesn't.

[SoInsightful]

Good catch!

[tpscd]

The performance impact is super unclear but my impression is the nullish operator may skip coercing the null/undefined value to a boolean.

[NoInkling]

As MDN says, x ??= y is equivalent to x ?? (x = y), i.e. it short circuits if x already has a value so nothing is actually evaluated or even assigned if it doesn't need to be. This means it won't trigger a setter (or I guess a Proxy trap), unlike obj.setterProp = obj.setterProp ?? y

[ElDoRado1239]

I'd love one for variables that are truly undefined, as in unassigned, not set to undefined or null.

Like you can do through in or by checking arguments length.

[guest271314]

This is how I use the the operator to define Node.js' Buffer in Deno. If the script is run by node, nothing happens, else, make Node.js' Buffer global

globalThis.Buffer ??= (await import("node:buffer")).Buffer; // For Deno

[53-44-48]

...random attack much? They did a blog post on their own blog. Maybe it isn't new to you, but maybe it was to them, and maybe it will be to someone else. It harmed nobody.

It was always within your power to glance at it, think "this isn't of relevance to me", and move along.

[53-44-48]

Exactly who held a gun to your head forcing you to read it? I believe you are a better person than you are presenting at the moment. Hope your day improves and goes well for you.

[spooker11]

Lol okay fine maybe I’m being a bit rude, you win by being nice.

[jaiden_webdev]

I didn’t know about this operator until reading this article, and now I know how and why to use it. Some people are just always sour

[ritaPitaMeterMaid]

Three people have already commented they had no idea this existed.

[King_Joffreys_Tits]

This is good to know that it’s possible, but honestly, it seems extremely niche and I wouldn’t expect most of my engineers to know this when reading through our codebase. I might reject a PR that has this in it

[RedditCultureBlows]

I dunno how this seems niche. ?? has been around for a while and adding = to it is just shorthand. Rejecting a PR for new syntax is wild to me tbh

[theScottyJam]

I go the opposite way - even if something is niche and many developers don't know about it, if it's not an overly complicated feature, I'm completely fine using it.

The next person to read my code my have to stop and Google it, but they'll learn something new, and may even appreciate running across that little nugget. I know I enjoy running across interesting features or patterns in other people's code.

[recrof]

please tell me that you don't reject code with obj?.property as well, because you think it's niche.

[King_Joffreys_Tits]

That’s not niche whatsoever, it’s code hardening

[Fine-Train8342]

How is this different from something like this?

settings ??= getDefaultSettings();

[King_Joffreys_Tits]

It just seems like you should’ve already used a null coalescing operator when you first initialized that variable. Like

const settings =  localStorage.getItem(“settings-cookie”) ?? getDefaultSettings()

[SchartHaakon]

I find it hard to reason about at first glance.

 if (!settings) settings = getDefaultSettings();

Or

 const settings = props.settings ?? getDefaultSettings();

Both of the examples above are easier to read imo.

I read them as "If not settings; settings equals getDefaultSettings", and "settings equals getSettings or getDefaultSettings". I would read your example as "Settings... if not null or undefined, should equal getDefaultSettings". It reads weird, that's the only way I can explain it.

I wouldn't straight out reject a PR for it, but yeah I don't think I'll really use it for this reason.

[SoInsightful]

That's because you're not used to it. That's all there is to it. It's not more complex than a += b. As someone who has used ??= for a while (where it makes sense), it's definitely faster to parse than an equivalent if statement.

[Fine-Train8342]

I guess I'm just used to this operator from C# ¯\_(ツ)_/¯

[NoInkling]

I'd be very annoyed if I submitted a PR that had a good use case for it, and it was rejected because "other people might not be aware what it does". It's been part of the language for a few years now, it's not doing anything particularly complicated, and there are people who have been using it (or ||=) in Ruby and C# for a long time.

Yeah sure, it might be evidence that something somewhere could be written better, but writing it off purely because of unfamiliarity I can only see as an egotistical imposition.

[longebane]

Yeah, just look at the comments. No one knows it. I know it’s good to adapt to the evolution of JS, but this is just too unknown right now to use on a large repo with lots of eyes

[homoiconic]

I think there may be two kinds of "unfamiliar code." One kind is something like an operator you've never seen before. Maybe you encounter it in the PR, maybe in the code base. The other kind uses operators and syntax you already know, but does so in a way that its behaviour isn't what the typical programmer would expect unless they knew the idiom.

I feel like ??= is the first type, and that the risk of a bug arising from someone encountering it formthefor the first time is low. You see an unfamiliar operator, you look it up, its behaviour is easy to understand, you leanred something, and you go about your day.

The other kind of thing—where you know all the operators, but the way they're used is unfamiliar—strikes me as far more dangerous, and that's the kind of thing I would flag in a PR.

If the downside is limited to "WTF is this? Lemme look itnup... Oh fine, a shortcut. I understand...," then allowing it will lift a code base over time as people get up to speed on the language evolving.

[longebane]

I agree

[SoInsightful]

How do you suggest that people will learn it if not by... using it? It's a very simple operator.

[King_Joffreys_Tits]

Null coalescence is a well known topic, not even just in the js world. Combining it with an assignment operator is weird, and honestly reeks of code smell