r/javascript • u/xxammuxx • Apr 28 '19
7 Useful JavaScript Tricks
https://davidwalsh.name/javascript-tricks28
u/maxoys45 Apr 28 '19
Really good tips, didn't know most of these, thanks.
7
u/Tenemo Apr 28 '19
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.
9
u/Owmelicious Apr 29 '19
I'm fairly new to Javascript. What is a good practical example where one needs a pure "dictionary" object?
5
u/brown59fifty Apr 29 '19 edited Apr 29 '19
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
Objectinstance (what can be welcome when someone came to JS world from some static typed language). Because you inherit fromnull, then you don't have access to methods onObject.prototype(likeconstructor,hasOwnPropertyorvalueOf) which results like this:const dict = Object.create(null); dict instanceof Object // false dict.toString() // Uncaught TypeError: dict.toString is not a functionThis 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.
17
8
u/DGCA Apr 29 '19
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.
6
1
Apr 29 '19
[removed] — view removed comment
10
u/SoInsightful Apr 29 '19
The V8 engine is very well-optimized, and will certainly cache the function for you.
16
u/erfling Apr 28 '19
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"
8
u/darrenturn90 Apr 28 '19
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
1
u/AwesomeInPerson Apr 28 '19
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 :)
3
u/darrenturn90 Apr 28 '19
Say you had const foo = “two”
And you had an object {two: “hello”}
You can const {[foo]: bar} = with that object
3
u/AwesomeInPerson Apr 28 '19
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!
5
u/rezoner :table_flip: Apr 29 '19
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
1
u/billymcnilly May 01 '19
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.
4
u/ErroneousBee Apr 29 '19
Seven reasons future JavaScript codebases will require senior developers for everyday maintenance.
3
7
u/darrenturn90 Apr 28 '19
I didn’t know url search Params api. Finally I can drop using qs and god knows what else
1
6
u/Asmor Apr 29 '19
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?"
2
-5
u/timarama Apr 28 '19
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
5
u/__ibowankenobi__ Apr 28 '19
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.
0
57
u/drowsap Apr 28 '19
URLSearchParams is awesome!