Hacker News new | past | comments | ask | show | jobs | submit login
Cheatsheet for the modern JavaScript (github.com/mbeaudru)
288 points by shridhad on Oct 1, 2017 | hide | past | favorite | 31 comments



This is probably a fine resource. Can't really judge it - I avoid JavaScript to the extend humanly possible.

But please - could someone end the devaluation of the word cheatsheet. A cheatsheet should be just that - a sheet of paper or its digital equivalent, with a few short, clear notes of essentials. Not a rambling document. Not something with a table of contents.


Thank you. For comparison, these are real cheatsheets:

* https://zeroturnaround.com/wp-content/uploads/2017/03/regex-...

* https://rumorscity.com/wp-content/uploads/2014/08/10-Best-VI...

* https://wch.github.io/latexsheet/latexsheet-1.png


High res versions:

Regex: https://i.imgur.com/f47LvfU.png

Vim: https://i.imgur.com/YLInLlY.png

Latex: no hi res version but PDF + 2nd page! here

https://wch.github.io/latexsheet/


Thanks but due to imgur’s recent update these are even lower resolution than the quick finds in my original post (on mobile). I’ll post full-size links when I get to a PC.


Thanks for the cheatsheet examples. They bring back fond memories of the laminated cheatsheets I used to buy at the bookstore. But it's been a long time since I used one of those; now I just want everything in digital form to keep my backpack light.

It was interesting that these are all bitmap image files at a rather low resolution. The text is so blurry on all of them! It made me wonder: do people actually use these kinds of image cheatsheets? They wouldn't print well, and zooming in on screen just gives blurry text. My old laminated sheets had crisp high-quality printed text.

It would be different if they were in a vector format, of course. But since I'm not printing them anyway, the traditional cheatsheet is no longer a useful format for me. I much prefer a short document like the OP's "cheatsheet" with legible text that I can scroll through on any device without having to zoom in and pan around.

I suppose one could object to the "sheet" part, since you can't print a document like this on a single sheet of letter or A4 paper. But that doesn't bother me at all: I started my programming career on Teletype machines that used roll paper, and we routinely printed out cheatsheets of varying length. There was no set height to a sheet: it ended wherever you tore it off the roll.

What would be a better name for a document like this that serves the purpose of a traditional cheatsheet but is in a format more suited for digital reading? Maybe "A short guide to ..."?

(Updated with more stories)


High res versions:

Regex: https://i.imgur.com/f47LvfU.png

Vim: https://i.imgur.com/YLInLlY.png

Latex: no hi res version but PDF + 2nd page! here

https://wch.github.io/latexsheet/


Why are you being downvoted for this?

AFAICT these are low-res previews of high-quality PDF cheat sheets you can buy.


I think people downvoted version 1 of my comment, which was less interesting and more cranky. But the downvotes were helpful; they gave me an excuse to make it more friendly and add a relevant story. :-)

I should have guessed that these were just low-res previews: I read too much into the comment that they were real cheatsheets.

Even with high-quality vector text, though, I wouldn't find them useful because of the layout. It's great if you print them, but if you like to have everything onscreen, a scrolling document is easier to read.


Summary? Overview?


Judging by the downvotes, I think that post was misinterpreted. I was suggesting that the word "cheatsheet" could be replaced by "summary" or "overview".

E.g. "An overview of modern JavaScript" or "Modern JavaScript - Executive Summary"


Agree. I was expecting something that one could print on maximum two A4 pages. This here is a rather long pamphlet.


For ES6, I really like this one: http://es6-features.org/ Not a cheatsheet per-se (nor sold as one), but at least they keep it mostly on one page, it's closer to a cheatsheet and better than a long document.


Very helpful and great explanations. To me Airbnb's JS styleguide was also very helpful, which showcases best practices and lots of examples. https://github.com/airbnb/javascript


I've also found the BabelJS "Learn ES2015" page valuable as a cheat sheet and usually have it open while working with ES2015+: https://babeljs.io/learn-es2015/


I usually just do just enough javascript, but didn't know the difference between let and var, not it makes sense. the explanation of reduce made sense too.


I always use `const` unless i can't otherwise `let`. There is no place for `var` although everyone has an opinion this has always worked for me.


`let` is block scoped, while `var` is function scoped.

Essentially:

    function do_something() {
      if (true) {
        var x = 42;
        let y = 42;
      }
      console.log(x); // 42
      console.log(y); // Reference error: y is not defined
    }
It's extremely useful in for loops:

    for (var i = 0; i < 5; i++) {
      setTimeout(function () { console.log(i); }); // => 5, 5, 5, 5, 5
    }

    for (let i = 0; i < 5; i++) {
      setTimeout(function () { console.log(i); }); // => 0, 1, 2, 3, 4
    }


that makes a lot of sense, I used to just make a brand new unique variable for loops


Handy resource -- but like somebody else commented, probably better called a summary of modern JavaScript than a cheatsheet.


Rules for this in JS from top to bottom in priority:

1. The function was called with 'new'

2. The function was called with 'call' or 'apply' specifying an explicit this

3. The function was called via a containing/owning object (context)

4. DEFAUL: global object (expect strict mode--undefined)


You missed out Function.prototype.bind


tnx


[flagged]


You seem to be mixing up the concepts of "constant" and "immutable". In the context of JS, constant is a characteristic of the variable identifier and only suggests that it will never be reassigned to point to another value or reference in the current scope. The mutability of the referenced value is entirely up to the definition of said value's type (hence why stuff like Immutable.js exists).

The idea that JS programmers can't learn from others' languages first is an odd one considering that, if I remember correctly, const in JS has the same semantics as the final keyword in Java and it's the default semantics of any local variable in Rust, so it's not something that seems to be out of the ordinary or falling out of favor.


But the values are const? You just need to understand the implication of const in javascript.

Why would you choose to weaken the communication in your code by choosing `let` over `const` when you have no intention of reassign the value? `let` would just confuse the reader as they'd start anticipating the reassignment.

Compare:

```

// A variable containing an object that will not be reassigned

const a = { foo: 10};

// This is still valid

a.foo = 10;

```

vs

```

// A variable containing an object that might be reassigned.

let a = { foo: 10};

// This is still valid

a.foo = 10;

```

The first example says more about your intent and throwing that information away is a bad idea.


Let is a much nicer keyword though. It just reads better.

I almost never use variable mutation in JS, and I use let almost everywhere.

That lets me use the let/const distinction in a way that to me seems even more informative, namely to distinguish actual constants like "site base URL" or "pi".


I get your point, but I'm not sure I share your cynicism. For instance, a "constant" container with mutable contents is the first example given in Practical Common Lisp [0]:

    (defvar *db* nil)

    (defun add-record (cd) (push cd *db*))
    (defun make-cd (title artist rating ripped)
      (list :title title :artist artist :rating rating :ripped ripped))

    (add-record (make-cd "Roses" "Kathy Mattea" 7 t))
If you're concerned about this kind of thing, we should be encouraging novice programmers to stop using language features they don't understand.

[0]: http://www.gigamonkeys.com/book/practical-a-simple-database....


My Lisp is a bit rusty, but I think actual constants are written +with-pluses+, whereas * the-stars * indicate global variables. And that database isn't just internally mutable, sometimes it's replaced completely [0]:

  (defun load-db (filename)
    (with-open-file (in filename)
      (with-standard-io-syntax
        (setf *db* (read in)))))
[0]: http://www.gigamonkeys.com/book/practical-a-simple-database....


It's unfortunate that you take such an inflammitory tone when you're so completely incorrect. They are constant, end of story.


If the value of that "variable" is not supposed to be changed, I use const.


I also don't get this point (I am not the brightest bulb :D)

In Typescript anyway, `const` means I am not allowed to reassign. Attempting to change it just will cause compiler warnings. If you mean that, ignore Typescript and tooling, and that once the code is in the browser executing, then consts can be changed.... Who cares about that?


Nicely done.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: