DEV Community

Cover image for Lesser-Known JavaScript Tricks

Lesser-Known JavaScript Tricks

Parwinder ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป on July 18, 2020

Constructor brackets are optional const newDate = new Date(); // valid const myClass = new MyClass(); // valid const anotherDate = ne...
Collapse
 
bartosz profile image
Bartosz Wรณjcik • Edited

That thing with arguments[] array was new to me! Thanks :). dev.to is a really refreshing breeze after StackOverflow experience.

Collapse
 
bhagatparwinder profile image
Parwinder ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

I'm glad you discovered something new! Keeps me motivated to write. Thanks for reading โ™ฅ๏ธ

Collapse
 
pentacular profile image
pentacular

Every function has an arguments array-like object that contains the value of all arguments passed to the function.

Note that arrow functions do not have an arguments object.

Collapse
 
bhagatparwinder profile image
Parwinder ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

This is such an oversight from me. Thanks for catching it. I wrote a full blog post on arrow functions and how they behave differently with this, new and arguments. I missed it here. I'll update.

Thanks for reading โ™ฅ๏ธ

Collapse
 
kenbellows profile image
Ken Bellows • Edited

๐ŸšจAt the time of writing, optional chaining is in Stage 4 (Draft) of the new ES standard, and it will most likely make it to the final spec. ๐Ÿคž

Optional Chaining made it into ES2020, and it's implemented in all major browsers now (caniuse.com/#feat=mdn-javascript_o...)!

Collapse
 
bhagatparwinder profile image
Parwinder ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป • Edited
Collapse
 
kenbellows profile image
Ken Bellows

Idk how those pages get updated, but there's no doubt it made it into ES2020: 2ality.com/2019/12/ecmascript-2020...

Thread Thread
 
bhagatparwinder profile image
Parwinder ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

TC39 is the committee that handles ES proposals and specifications.

That being said your article does lead to what I was eventually looking for

tc39.es/ecma262/2020/

Looks like it is in the final document. I will update the post. Thanks for the awesome feedback โ™ฅ๏ธ

Thread Thread
 
kenbellows profile image
Ken Bellows

Yeah I know about TC39, I just meant that I don't know at what point on the process those specific pages get updated; I would have thought it would be after ES2020 is finalized and released, but apparently not

Collapse
 
melvincarvalho profile image
Melvin Carvalho

Great post. Slight nit:

The only time you would need those brackets is if a constructor expects arguments.

new Date().toString() // works
new Date.toString() // fails

Collapse
 
bhagatparwinder profile image
Parwinder ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

I am so glad you brought this up. I would love to explain this! There is a reason why this works:

const x = new Date; // What I taught in this blog post
console.log(x.toString());

And this does not

new Date.toString();

It's because new Date.toString() is not equal to new Date().toString(). *There is an extremely subtle difference. They have different precedence. *

Check out: developer.mozilla.org/en-US/docs/W...

new Date.toString() throws an error because . has higher precedence than new Date so the expression becomes (or it is resolved as) (new (Date.toString))(). They might look same but they are evaluated differently!

In short, if you would like to invoke the constructor and chain it with a method in the object, the correct syntax is:

(new Date).toString();

Give it a try๐Ÿ˜‰

Collapse
 
melvincarvalho profile image
Melvin Carvalho

That's pretty amazing thanks!

So when chaining you dont save typing the parentheses, they can just go in two different places :)