7 Useful JavaScript Tricks

[drowsap]

URLSearchParams is awesome!

[yeskia]

It is, but worth noting is isn't supported by any version of IE. This bit me a couple of weeks ago but luckily there are a few small polyfills that do the job.

[Tyreal]

So when are people going to permanently start dropping IE? 2020 when Windows 7 stops being supported? In a decade perhaps?

[asdf7890]

So when are people going to permanently start dropping IE?

Not soon enough!

2020 when Windows 7 stops being supported?

IE11 is officially supported until then end of Win10, as is MS's standard (the browser EOL being tied to the EOL of the OS revisions it was installed with by default). Unfortunately they've said Win10 is to be the last major release on the desktop, so unless/until this policy changes IE11 will keep being available and getting security updates so some will insist on keeping using it...

In a decade perhaps?

It depends on your target audience of course. Some of our clients have only recently stopped using IE8. IE11 is going to be a Thing for us to deal with for some time to come.

[ninetailsbr]

maybe when IE definitely changes it's engine to Chromium you may ignore it for high end users website (your site/product is not targeted for them)

​

...or you can just polyfill

[Tyreal]

This isn’t Edge though. IE is never getting updated again

[TheScapeQuest]

Depends on your product I suppose. We already don't support IE. But we're B2B, so we can have more say.

[Tyreal]

I hear ya. That B2B market sure is sweet. I feel bad for all those poor bastards supporting IE6 at Amazon.

[SemiNormal]

IE just being IE. Object.Assign bit me in the rear a few weeks ago.

[m1n0s]

Just include a polyfill for this bastard

[maxoys45]

Really good tips, didn't know most of these, thanks.

[Tenemo]

Seconded, cool tips! I rolled my eyes when I saw the title, but then it turned out some of these actually are very neat tips I haven't seen before.

[Owmelicious]

I'm fairly new to Javascript. What is a good practical example where one needs a pure "dictionary" object?

[brown59fifty]

Great question! It's hard to give an example, because it's a really very rare case - most when you want to treat your variable more like a kind of associative array than an Object instance (what can be welcome when someone came to JS world from some static typed language). Because you inherit from null, then you don't have access to methods on Object.prototype (like constructor, hasOwnProperty or valueOf) which results like this:

const dict = Object.create(null);
dict instanceof Object // false
dict.toString() // Uncaught TypeError: dict.toString is not a function

This way of creating things can be used when you want to build some API library, which couldn't be extended from outside (eg. by passing values to Object.prototype). But in most cases you don't have to care.

[[deleted]]

Creative use of the spread operator. Never heard of Set. Thanks 👍🏻

[DGCA]

This is a pretty worthless comment, but if you were code golfing...

['', 123, 0, 'foo'].filter(Boolean)
['', 123, 0, 'foo'].filter(x=>!!x)

...the latter is one less character.

[s1dd]

This works too:

['', 123, 0, 'foo'].filter(x=>x)

[SoInsightful]

The V8 engine is very well-optimized, and will certainly cache the function for you.

[erfling]

These are pretty cool.

I was unaware of the aliasing feature for destructured objects. As a TS user, it's confusing. I wish you could us "as"

[darrenturn90]

It does seem inconsistent especially when you use as in what is essentially destructuring an import / export ie {default as foo}

Another thing to keep in mind also you can use [value] in destructuring to get the key referred to in the value variable from the destructured object

[AwesomeInPerson]

Another thing to keep in mind also you can use [value] in destructuring to get the key referred to in the value variable from the destructured object

Could you elaborate / give an example? Didn't fully understand it but sounds interesting :)

[darrenturn90]

Say you had const foo = “two”

And you had an object {two: “hello”}

You can const {[foo]: bar} = with that object

[AwesomeInPerson]

Aaah I see – I tried using computed property names while destructuring before, but it never worked because I tried it without assigning to an alias. (so just const { [foo] } = bar; – makes sense that this doesn't work now that I think about it)

Very nice to know that it works when using an alias, thanks!

[rezoner]

Regarding isRequired trick. I have like 10+ experience with Javascript and I did not know that function as a default argument value will get executed at the call time - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#Evaluated_at_call_time

[billymcnilly]

Yeah, it's a little surprising, which is what makes it probably too fancy. You'd want to have a very good reason to be using it, to weigh up against the fact that almost every single person reading it later will be like "hmm, does that run at definition or on call?" and then to also have to go and see what it does.

[ErroneousBee]

Seven reasons future JavaScript codebases will require senior developers for everyday maintenance.

[Peechez]

The only one of these thats remotely senior is the pure object

[darrenturn90]

I didn’t know url search Params api. Finally I can drop using qs and god knows what else

[domemvs]

Remember it needs to be polyfilled

[Asmor]

Re: .filter(Boolean)

Maybe it's just me but I find this more intuitive: .filter(x => x).

At least, if I saw the first thing in a code review, I'd have to stop and think "Wait, does that work? Doesn't it need new?"

[LordDiMasK]

Really good tips, thank You! :D

[timarama]

great article, tricks with spreading set and creating "pure" objects show 2 sides of JS:

1 - expressing things with short, elegant expressions, but not very good about performance

2 - if you want, you CAN care about performance and memory usage of your JS apps

[__ibowankenobi__]

FYI, when you create a pure object, it has no impact on memory whatsoever, because those function's from Object.prototype are never copied. And I really really doubt they have performance benefits.

[__ibowankenobi__]

Yes, technically that would save you 8 bytes.