r/javascript • u/Goldwerth • Sep 18 '17

Modern JavaScript Cheatsheet

https://github.com/mbeaudru/modern-js-cheatsheet
363 Upvotes

96% Upvoted

32 comments sorted by

7

u/tswaters Sep 19 '17 edited Sep 21 '17

One thing that kicked my ass a while ago was passing null to a function with a default specified expecting the default to be used - it won't be, only no parameter or specifically passing undefined.

function foo (bar = 'baz') {
  return bar
}

foo() // baz
foo(void 0) // baz
foo(null) // null !!

Also, missing sections for async and await ?

2

u/Goldwerth Sep 19 '17

Good suggestions, I will add this specific behaviour with default value in the document because I think it's indeed expected for default to be used when null is passed on, while it's not.

As for async / await, it's on my list for next updates ! It makes me think I might put that list I have on paper on the bottom of the readme :).

1

u/[deleted] Sep 19 '17

It wouldn't make sense to take the default when null is passed. null is not undefined. It might make sense to use the default if undefined is passed. It is important to be able to explicitly pass null.

3

u/Goldwerth Sep 19 '17

I'm not saying it should be different, just that it might be counter-intuitive at first :)

3

u/[deleted] Sep 19 '17

There is no async/await because this guide seems to be about the ES6 revision -- async/await was ES7 (I think).

6

u/tswaters Sep 19 '17

But it goes into import export module syntax?

Dunno, to me async and await falls under "modern javascript"

2

u/AndrewGreenh Sep 19 '17

Async await is es8/ES2017. Es7 is only the ** operator and array.includes

1

u/6086555 Sep 19 '17

And a new syntax error (if you use "use strict" into a destructuring function)

1

u/SoInsightful Sep 19 '17

The difference between undefined and null is that null is defined, so it shouldn't be as a great surprise.

1

u/asdf7890 Sep 19 '17

This is one that splits people and not just in JS: people often expect DEFAULT constraints to take effect in SQL when a NULL is provided for a column (it won't, if you want it to you'll have to use a trigger). Personally, it has always made sense to me: I've explicitly put NULL there, I want NULL there, not the default value. Not having it that way leads to having to create extra flags that need to be set when you really want a null value in a variable/column and can cause a further proliferation of unknowns (VBA's four constants of the apocalypse: empty, missing, noting & null).

5

u/KapKaraKalem Sep 18 '17

I don't understand why you call it javascript for react since basicly it is new updates from javascript world for old javascript coders. I realy miss some concept and found here. Thank you 👍🏻👍🏻

3

u/Goldwerth Sep 19 '17

It was a mistake, at first I wrote such a doc for friends and then changed my idea but I forgot to change the table of contents accordingly.

Thanks for your positive feedback by the way ! :)

3

u/OmegaVesko Sep 19 '17

I'm pretty sure the author decided to take 'React' out of the title for this exact reason at some point, but forgot to change the title in the ToC.

22

u/lhorie Sep 18 '17

Looks ok for someone coming to js from another language, but I thought the point of cheatsheets was that they were supposed to cram as many snippets as as possible in a standard A4 sheet of paper, for quick look ups.

2

u/madworld Sep 19 '17

This title should mention react. Do you actually think that all modern JS devs use react?

1

u/Goldwerth Sep 19 '17

It was a mistake, at first I wrote such a doc for friends and then changed my idea but I forgot to change the table of contents accordingly.

2

u/fyrilin Sep 19 '17

Some days around here it feels that way

4

u/athik13 Sep 19 '17

Es6 seems interesting

3

u/ShootingPains Sep 19 '17

The destructuring example defines a const object that doesn't contain the city property used in the subsequent examples.

3

u/[deleted] Sep 19 '17

I think its because he wants to show that you can have a default value when you are deconstructing

1

u/ShootingPains Sep 19 '17

Oh, I see.

I think what tripped me up is that he emphasises that he's using his const Person object for the entire section and then up pops an undefined Person.city. Emphasising default values in a section about deconstruction seems to be a bit of a detour.

1

u/[deleted] Sep 19 '17

The best JS and Node cheatsheets. Unlike this one those will be updated regularly.

3

u/Goldwerth Sep 19 '17

If you take a look at the document, you will see that I often suggest to check MDN to find out more about notions addressed.

About the updates, I will do them when I or people will find things are missing. If it goes out of control for any reason, I will indicate it in the top of the document :).

However, I agree that the "Modern" word might not be the best choice for a title. I've chosen to use it anyway because most people will understand what they will find in the doc today and in the next coming month, maybe years.

Indeed, if the doc was about a fancy new library I would agree. But it's about JavaScript, what is described there is not going anywhere. The industry is not moving very fast so people might find it useful for some time.

Besides, the doc purpose is not to replace nor compete with MDN or official docs. The purpose is to have most notions encountered now in a single page that sums them up and points to references for more details.

3

u/SoInsightful Sep 19 '17

Unlike this one, those are enormous with thousands of pages. Do you know what a cheatsheet is?

1

u/[deleted] Sep 19 '17

Does OP know? Because it's not a cheatsheet either.

2

u/[deleted] Sep 19 '17

Great resource man, as someone that tries to get more into javascript this is a awesome.

2

u/I_AM_DONALD Sep 19 '17

Thanks for this. Its really helpful for a quick brush-up.

1

u/kumarian Sep 19 '17

You should call these cheat codes

-14

u/icantthinkofone Sep 18 '17

Actual title: Javascript for React cheatsheet. Real Javascript programmers don't need this.

12

u/Goldwerth Sep 18 '17

Thanks for your honest feedback.

But as much as I understand what you mean, I'm not very fond of the "real" JS developers you are reffering to. JS community is enough victim of that "real developer" thing IMO.

However, it is indeed purposedly made to be read before getting into libraries like react/preact :)

1

u/fogbasket Sep 19 '17

It's a React prep sheet. The name should be different as that's the intention.

0

u/[deleted] Sep 18 '17

[deleted]

3

u/Goldwerth Sep 18 '17 edited Sep 18 '17

Good catch, thanks! If you have other things to point out, I suggest you to open an issue on github and I'll gladly look for it :)

Edit: Fixed!