top | item 25333350

A Modern JavaScript Tutorial

893 points| ivanche | 5 years ago |javascript.info | reply

292 comments

order
[+] priyatham_|5 years ago|reply
This site is absolutely awesome and I would suggest this to new comers and experienced folks alike. It covers all things related to javascript, explains the concepts really well in a practical day to day application point of view.

I might be sounding like a promoter for it, but it really added a lot of value for me personally, so just wanted to spread the good word.

[+] kaycebasques|5 years ago|reply
This is not a tutorial [1]. It's more like a guide [2].

[1]: https://documentation.divio.com/tutorials/

[2]: https://documentation.divio.com/how-to-guides/

Edit: I don't mention this to be nitpicky. I mention it because I wish that we would collectively start standardizing those terms. I think it would be helpful if, whenever we saw "… guide" or "… tutorial" we had a general idea about the structure and purpose of the contents. The Divio links above do a great job at explaining each doc type. I'm simply sharing this idea for people who have never considered being more careful about how they label their docs and would like to start following general technical writing community practices. As a practicing technical writer I can tell you that the TW community mostly agrees upon what each doc type entails ("tutorials" and "references" have strong consensus; "guides" less so).

[+] msie|5 years ago|reply
Remember when some people advocated not using semicolons to end statements? Good times...

https://javascript.info/structure

[+] stingraycharles|5 years ago|reply
https://news.ycombinator.com/item?id=2024328

Here’s an example great bike shed discussion from ~10y ago about whether or not to use semicolons with JavaScript.

“If you don’t understand how statements in JavaScript are terminated, then you just don’t know JavaScript very well, and shouldn’t write JavaScript programs professionally without supervision, and you definitely should not tell anyone else how to write their JavaScript programs.”

Those were the fun days! :)

[+] gtsop|5 years ago|reply
I used to be on the "always use semicolons" side of this argument. Having shipped multiple projects using both methods my verdict is clear: It doesn't matter. Why it doesn't matter you ask? Because 1) I am enforcing either decision with eslint rules and 2) i write unit tests 3) code is transpiled (thus semicolons are handled perfectly at the output). Having these three in place, I have yet to encounter a single "gotcha" out of omitting semicolons.

If for any reason you absolutelly can't have these in place, better be safe and use semicolons.

Edit: for the "gotcha" explained in the link, prettier will automatically insert a semicolon before the array.

[+] weeksie|5 years ago|reply
I've run into that in a few places and it always baffles me that people would intentionally choose to add even more gotchas to javascript. Don't get me wrong, I think aesthetics in code are important but not to the point of deliberately increasing the chance of hard to find bugs.
[+] pknopf|5 years ago|reply
Yeah...

There was a big push for that a while back. The JavaScript community can be silly.

[+] sneak|5 years ago|reply
I don't know whether I use them or not, to be honest (and I just finished a project in js). My code looks like whatever the almost-default (tab-width: 4) output of prettier is.

It's nice to not waste a single braincycle on these things anymore.

[+] flippinburgers|5 years ago|reply
Debate over one character whose presence in code has no downside other than that a subset of programmers get to feel less arrogant. Sometimes I cannot stand this industry.
[+] austincheney|5 years ago|reply
So what changed this? This was a hill that people were willing to die on.
[+] cgrealy|5 years ago|reply
Isn’t step 1 of “modern JavaScript” to install TypeScript? :)
[+] halfmatthalfcat|5 years ago|reply
Amazing how many JS devs I meet (or work with) that are against the very idea of Typescript.
[+] brundolf|5 years ago|reply
For real projects, but for someone just getting started I think it makes a lot of sense to start with core language fundamentals (I notice that, at least from the table of contents, there was no mention of build systems or frameworks either). Lots of newly-minted JS devs today know relatively little about what it means to use plain JS, which means they don't have as much perspective on what their TypeScript and JSX actually turn into, which has a meaningful effect on informing decisions.
[+] jerrygoyal|5 years ago|reply
and step 2: install prettier, step 3: eslint plugins.
[+] bob1029|5 years ago|reply
I was half expecting the first page to explain what nodejs is and how to install it. Pleasantly surprised by most of this.
[+] vmurthy|5 years ago|reply
Lot of upvotes for the site so please do support the author(s) by buying the book[0].

All parts together is $18 (epub + pdf). I am not a front-end developer so not much use for me personally but spreading the good word :)

https://javascript.info/ebook

[+] robofanatic|5 years ago|reply
Excellent. Wish all documentation\tutorial sites were this clean.
[+] kaycebasques|5 years ago|reply
When you say "clean" are you referring to the formatting of the page?
[+] boberoni|5 years ago|reply
> According to your browser language headers, you know Chinese. Please help to translate the tutorial into your language! Thank you!

I'm curious. How are my language preferences exposed through HTTP headers?

I think this was a charming way to request volunteers for translation, but I was a bit taken aback.

[+] smarx007|5 years ago|reply
I have figured it out experimentally (Chrome & Ukrainian): if you visit a website in language X and click Never Translate, Chrome silently adds language X to the end of the list (Accept-Language that is). I have not found a way to forcibly turn it off.

Edit: check out chrome://translate-internals/ if you are interested

[+] jmt_|5 years ago|reply
The Accept-Language HTTP request header is my guess
[+] sequoia|5 years ago|reply
This was probably set at the operating system level, i.e. you selected "zh_ZH"/Chinese at some point during setup. Upon installing a browser, it reads your OS language preference & then passes that through to websites via the accept-language header.
[+] pachico|5 years ago|reply
I feel I need this so badly. The last time I wrote something in JavaScript was around 10 years ago and I want to get up to date. One of the chapters is named "the old 'var'". I didn't know it was old, which proves the need to learn.
[+] MaxBarraclough|5 years ago|reply
Looks well written, but it seems undecided on whether it's targeting experienced programmers or newcomers. I have to disagree with priyatham_'s position that it effectively targets both.

The Loops section gives a very brief description of what loops are. This doesn't introduce anything of value to an experienced programmer, and it's nowhere near enough of an explanation for teaching imperative programming to a beginner.

Personally I'd suggest targeting experienced programmers. I only learnt JavaScript relatively recently, and I found it very frustrating that every JavaScript tutorial I could find was aimed at beginners (and that isn't an exaggeration).

[+] emmanueloga_|5 years ago|reply
Looks really nice, although ...

For as good as the TOC and layout is, there's always something I miss when I read books from a website. I miss the spatial context: how much material I already covered? How much is left?

I like the linearity of regular books (that includes PDFs). If the book is a website the next best thing for me is when the whole thing is just a single page. Worst thing are epubs :-p (hate the way the layout works with those and how slow epub readers tend to be).

ps. I saw I can buy a PDF of this site, but just commenting in general.

[+] cercatrova|5 years ago|reply
Note that the Russian version of the site has more information than the English version, you can translate the page into English to read it (or just learn Russian)
[+] polywock|5 years ago|reply
sighs and opens Russian learning book
[+] bovermyer|5 years ago|reply
This is great. However, it gives the example of copying a variable by assigning another variable to it. This doesn't copy a variable's contents - it makes the new variable a pointer to the original variable.

As someone who doesn't use Javascript much... is there a way to force it to copy the current state of the original variable to the new variable, without it being a reference and without having to use something like lodash?

[+] lighthazard|5 years ago|reply
You will need to clone the object somehow. The simplest solution is to go through each of the object properties and create a new object with those same properties (_.clone). Alternatively, recursively go through each property in the object and then keep going deeper through each property that is an object until you get a copy of everything to assign to a new object (_.deepClone)
[+] rhengles|5 years ago|reply
I think the only reasonable thing that js can do here is what it does - copy the reference. Also, there is a simple way to copy all properties from a object: const copy = { ...object }; Of course, if these properties are themselves objects, then changes in one of them will appear in the other.

One way to have a deep copy which shares nothing is const copy = JSON.parse(JSON.stringify(object)); but that may not always work. In short, copying a arbitrarily large object will probably waste memory, so it should be a little hard so you don't do it unless it's really necessary.

[+] ianjsikes|5 years ago|reply
The cheaty way is `let copy = JSON.parse(JSON.stringify(val))`. Doesn't work for functions or cyclic structures though.
[+] longnow|5 years ago|reply
There is a chapter called ‘ninja code’, which is full of terrible advice. A small example.

> The ideal name for a variable is data. Use it everywhere you can.

There is one small comment at the top of the chapter, which says ‘Irony detected’. Is there really a whole chapter written Ironically? It would be very easy to read this and think it was real advice.

(And if it is real advice, and I’m completely misunderstanding, then I can’t possibly recommend this book).

[+] alfonsodev|5 years ago|reply
The ninja code section is pure sarcasm, right?

I'm not sure now which sections are and aren't.

[+] forgotmypw17|5 years ago|reply
I prefer post-modern javascript, the kind that works universally across all browsers starting with Netscape 2.0
[+] austincheney|5 years ago|reply
Aside from newer methods the only syntax gotchas in my code are template strings and let/const. That makes the code really quick and simple to convert to an old IE friendly application.
[+] markdown|5 years ago|reply
alert("Reached here #23");
[+] yudlejoza|5 years ago|reply
> ... how it's done now

Intro section has no context, especially how this relates to Crockford's "the good parts".

Is it inspired by it, in conflict with it, a superset, a subset? How did newer standards affect it? how is 'modern' defined? How is 'now' defined?

[+] ddoolin|5 years ago|reply
I've had this site's Regex section bookmarked for awhile and it's been a great tutorial and reference. I can't speak to the other content but if it's similar, it would be of good quality.
[+] dmje|5 years ago|reply
Never rely on Americans to spot irony
[+] jonnycomputer|5 years ago|reply
I looked at this page first and assumed that it was all a gag.

https://javascript.info/ninja-code

>Show your original thinking! Let the call of checkPermission return not true/false, but a complex object with the results of the check.

>Those developers who try to write if (checkPermission(..)), will wonder why it doesn’t work. Tell them: “Read the docs!”. And give this article.

[+] z3t4|5 years ago|reply
Then it will always be truthly if it returns an object, or 0 means success? :)

The proper way is callback convention err. Then you can write if(!err) ...

[+] weaksauce|5 years ago|reply
It was tongue in cheek though... the summary tells you as much.