A Modern JavaScript Tutorial

  • 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.

  • I'm surprised I haven't seen this before - it's been under very active development since 2015 and has 11,000+ stars on GitHub: https://github.com/javascript-tutorial/en.javascript.info/gr...

  • 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).

  • Remember when some people advocated not using semicolons to end statements? Good times...

    https://javascript.info/structure

  • Isn’t step 1 of “modern JavaScript” to install TypeScript? :)

  • 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

  • Excellent. Wish all documentation\tutorial sites were this clean.

  • > 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.

  • 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.

  • 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).

  • 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.

  • 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)

  • 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?

  • 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).

  • The ninja code section is pure sarcasm, right?

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

  • I prefer post-modern javascript, the kind that works universally across all browsers starting with Netscape 2.0

  • > ... 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?

  • 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.

  • Never rely on Americans to spot irony

  • 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.

  • Looks like a great resource. There does not seem to be anything on database connections (e.g. MySQL, PostgreSQL etc) and related topics (e.g. building a CRUD framework). Are database connections only considered in a client/server context (e.g. through Node.js)? What am I missing? How does the IndexedDB section relate to these considerations?

  • The website is really very good. I started to learn JavaScript last week and worked through the JavaScript Wikibook. Unfortunately it is not as complex as the website linked above. I can continue working with it really well. I also like the structure and design, which makes the tutorials really easy to read. A great project.

  • The site is awesome, but I wish they had an all-in-ONE-page option. Navigating through X sections and links is a chore.

  • Thanks for sharing. I found this quote very appropriated:

    In older scripts, you may also find another keyword: var instead of let

  • So glad people still make things like this despite so many tutorials and books already being available. This means people still care to make something purely for sake of making it better - obviously nobody would be interested if it wasn't. Crafting tutorials should be considered an art.

  • Hmmm there are a lot of language footguns or advanced features that don't have any disclaimers for beginners. I don't think a beginner should be told to use Proxy object handlers before learning the basics of JS, async and functional programming.

  • Wow, this is really well put together! Anyone know an equally good guide for Python?

  • Still fantastic!

    When I teach Javascript to students, javascript.info is one of the main sources I use besides MDN.

    PS My copy of JS the good parts is getting a bit dusty somewhere in the garage...

  • https://javascript.info/ninja-code hah this is a great read :)

  • It is a nice tour of JS features.

    Some things missing: Typed arrays, template literals, Internationalization API (Intl).

    Date will be replaced with TC39 Temporal soon.

  • Suppose I've been living under a rock this whole time and my knowledge of JS is something along `it's a language you use when you want a message box to appear and annoy your visitors`, i.e. completely out of touch.

    How could you explain me, strictly from the language design point, not practicality/how widespread it is/how easy is to find a job/etc, why JS? What are the strong points which make it a better language than lua/python/lisp/tcl/ruby? Thanks.

  • undefined

  • The Ninja section is priceless.

  • JavaScript has some really nice features that this tutorial does not mention 1) First class functions 2) Prototype 3) Function scope 4) What async means and how to master it Those I think is essential in order to understand JavaScript.

  • Like the email based one more. But this seems more complete.

  • Oh no! It's already out of date! (That's a JS changes too fast joke)

    But seriously, calling it 'modern' is pointless. It's not adding anything valuable and its just going to become out of date (and thus wrong).

  • I swear this tutorial comes out fresh every other month

  • Excellent resources. Is there one like this for Java?

  • The default way promises are used is now async/await. `.then()` should not be introduced as anything more than 'you may find this in older codebases'.

  • Needs to be updated on a regular basis.

  • This site is a great resource. The event delegation section is something I have bookmarked as when entering a new contract I typically don't have access to my own code to use as a reference.

  • Is there a good tutorial that covers all the various frameworks that are in use? Modern Javascript has become very complicated due to the proliferation of these frameworks more so than the programming language.