12 ms·

Modern JavaScript Tutorial

538 points by Hbruz0 4y ago

taesu 4y ago
Preparing to interview with JavaScript. This is helpful, thanks!!
- mosdl 4y ago
  having just gone through that, my pro tip is: look at implementing promise.all() as well as extending the code to have a limit on concurrent promises/etc. very popular question.
  - faruzzy 4y ago
    Thanks for this! Could you please share any other tip if any?
    - fullstackchris 4y ago
      Closures, event bubbling, event loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Even... Basically all the things you otherwise forget about or never need to worry about when writing production JavaScript. Yawn. I sound like a curmudgeon and I am: too many interviews I've been in that involved JavaScript felt like abstracted garbage. Nevertheless, good luck!
    - LocalPCGuy 4y ago
      have a really good way of talking through how you handle async code and the difference between async and procedural code. Plus, how you can make async code read like procedural (async/await). I always give bonus points if you can describe clearly the difference between using ansync/await and then based promise code (not just saying "syntactic sugar", but actually explaining how the code looks different but yet how they are effectively the same). How people answer questions around promises in general often gives me a good idea of where they are at in their JavaScript journey.
12335546 4y ago
Veuxdo 4y ago
In almost 10 years of professional development with Javascript/Typescript, I have never encountered a colleague using the call/bind/apply keywords (or "this" outside of classes). I'd say almost all professionals deliberately avoid 80%+ of the language in practice.
- Tcepsa 4y ago
  As someone who likes functional programming, I appreciate .bind as a reasonably convenient way to do partial function application.
  - golergka 4y ago
    One thing I didn't get about functional programming is planning the parameter order in advance for currying them later. Arrow functions may not look as neat as Haskells currying, but you can partially apply any parameter regardless of whether it's first or not, including separate properties of object parameters.
    - gherkinnn 4y ago
      Defaulting to data-last gets you 80% of the way. fn = (a -> b) -> a So your typical array mapping becomes list.map(to(v => v * 2)) All very contrived of course. Ramda’s currying [0] gives you the _ param to play with the order. But I’ve come to the conclusion that currying in JS is rarely worth the effort. [1] 0 - https://github.com/ramda/ramda/blob/v0.28.0/source/__.js https://github.com/ramda/ramda/blob/v0.28.0/source/__.js 1 - https://2ality.com/2017/11/currying-in-js.html https://2ality.com/2017/11/currying-in-js.html
- robgibbons 4y ago
  They are very useful at the framework level, if you do much work with vanilla JS at scale they become useful for applying generic functions against various scopes.
  - phist_mcgee 4y ago
markhaslam 4y ago
For me this is a great supplementary resource to the MDN docs.
caseyross 4y ago
Some previous discussion from 2020: https://news.ycombinator.com/item?id=25333350 https://news.ycombinator.com/item?id=25333350 This site is IMO the best reference out there for modern JS/DOM fundamentals. It's concise, clear, consistent, accurate, and well-organized throughout, which is no mean feat for how many topics it covers.
- dang 4y ago
  Thanks! Macroexpanded: A Modern JavaScript Tutorial - https://news.ycombinator.com/item?id=25333350 https://news.ycombinator.com/item?id=25333350 - Dec 2020 (292 comments)
- pryce 4y ago
  Most of the areas I checked out looked great, but... the section 3.4 on 'Ninja code' is terrible: It swaps to an ironic, sarcastic, in-jokey tone almost completely divorced from the previous sections that will leave much of the intended audience (people new-ish to programming) utterly confused by what is being said—or in this case, worse, what is intentionally not said. The effect of this self-absorbed style of teaching is so poor, I think, that that page actually damages the overall text in its current state. Surely the point of a site like this shouldn't be shaped for the entertainment of experienced programmers, but to help less experienced programmers know what to do—and what not to do. They could still make it funny, just... not that.
  - akshaykumar90 4y ago
    That's the joke.
- threatofrain 4y ago
  Is it better than MDN's own tutorials or references?
frigid 4y ago
This is excellent. I think https://www.internetingishard.com/html-and-css/ https://www.internetingishard.com/html-and-css/ complements it well as an introductory tutorial to HTML/CSS.
- acemarke 4y ago
  Agreed! I wrote a related blog series on "How Web Apps Work" after years of trying to teach web dev to Java/C++ devs, or seeing beginners ask questions because they had no idea what any of these things are in the first place. That series tries to explain the key pieces of web dev concepts, terms, and technologies, and how they fit together, and provides an overview of HTTP and servers, client dev, browsers / HTML / CSS, JS / DOM, and AJAX: https://blog.isquaredsoftware.com/series/how-web-apps-work https://blog.isquaredsoftware.com/series/how-web-apps-work The "Interneting Is Hard" HTML+CSS page is one of the best intro resources I've found for those topics, as is the "Modern JS Tutorial", and I specifically linked those as recommended resources from the related posts I wrote.
- _smmt 4y ago
  The only thing I want is a proper tutorial or book on how to debug and trace a modern web app.
  - acemarke 4y ago
    I wrote a sibling comment about some web app fundamentals posts I've put together, but fwiw I've also got some resources on debugging as well. This is another topic that seems to be rarely taught, and people just have to pick it up through hard-earned experience. I did a presentation last year that provided some general guidelines and suggested approaches to debugging, as well as specific info on the standard controls used in GUI debuggers and tips for debugging React and Redux: https://blog.isquaredsoftware.com/2021/06/presentations-debugging-software/ https://blog.isquaredsoftware.com/2021/06/presentations-debu... I also have a prior post where I gave some general debugging tips, and wrote up several "war stories" of weird and difficult problems I've debugged: https://blog.isquaredsoftware.com/2019/01/blogged-answers-debugging-tips/ https://blog.isquaredsoftware.com/2019/01/blogged-answers-de... You mentioned "trace", and I'm not sure if you're referring to "trace a request as it gets passed through multiple services", or just "trace data flow on the client side". The other resource I can point you to: a couple months ago I joined https://replay.io https://replay.io , and we're building a time-traveling debugger for JavaScript apps. The basic idea of Replay: Use our special browser to make a recording of your app, load the recording in our debugger, and you can pause at any point in the recording. In fact, you can add print statements to any line of code while debugging the recording, and it will show you what it would have printed every time that line of code ran! See https://replay.io/record-bugs https://replay.io/record-bugs for the getting started steps to use Replay, and https://docs.replay.io/docs/examples-d25ae319114e4d109022458cd47f38ec https://docs.replay.io/docs/examples-d25ae319114e4d109022458... for some videos and examples of using Replay to solve problems. We're working on additional features to help with debugging apps - we already have the React DevTools integrated into our debugger, so you can inspect the component tree at any pause point, and over the last couple weeks I got the initial alpha implementation of Redux DevTools integration working as well. (Long-term, we'd like to integrate _all_ major framework-specific DevTools as well.) Beyond that, we also spend a bunch of time helping teach people how to debug in general, specifically _because_ that's a thing that is so rarely taught. If you've got questions about Replay, or just want to chat about debugging approaches, come by our Discord at https://replay.io/discord https://replay.io/discord and say hi - we'd love to offer suggestions!
coward-guy 4y ago
jbc1 4y ago
Self learning JavaScript and this site has been a huge help. I’ve actually set up Alfred such that when I type “j [search terms]” in to its search bar that it opens a new tab with that search in JavaScript.info because I was doing “site:JavaScript.info” in google so frequently.
synergy20 4y ago
Just bought its PDF version to show some support, it's a decent site for JS indeed. I use another site more often though at https://www.javascripttutorial.net https://www.javascripttutorial.net, which is not as deep as this one, but way more concise. It's kind of like w3schools, not the best authoritative site, but, nothing beats its simplicity.I support all of them.
pronlover723 4y ago
ninja code! https://javascript.info/ninja-code https://javascript.info/ninja-code I get it's a list of bad practices and it's kind of funny in an "inside joke" kind of way but if you're reading the site to learn JavaScript then you are probably not on the "inside" yet? As funny as it is for those "in the know" would it be better as a list of "don't to X (bad examples) do Y instead (good examples)? As it is there are no good examples, just a cryptic joke.
- jmkni 4y ago
  Agreed, needs a big disclaimer at the top imo
- hajile 4y ago
  Some of the practices aren't even bad. Adding an underscore or two as a bad practice? One is well-known convention for stuff you don't want touched and even JS itself uses double underscores for some stuff.
eric4smith 4y ago
Bruh, this is so good! In just a few minutes of reading, I got cleared up on a few things. For reference, I dabble in Javascript just to do small things that are incidental to my main programming languages.
bernardv 4y ago
This looks really good
axg11 4y ago
Is there a list of equivalent excellent resources for other languages? I'm familiar with JS and Python - I'd love to get up to speed with other languages this way.
- aussieguy1234 4y ago
  For PHP - https://phptherightway.com https://phptherightway.com Like JS, PHP has alot of old, outdated practices which aren't considered best practice anymore. Lots of this type of code will show up in search results in google when you search for solutions to common problems.
- qbasic_forever 4y ago
  For Go start with A Tour of Go (https://go.dev/tour/welcome/1 https://go.dev/tour/welcome/1) and then read Effective Go from start to finish (https://go.dev/doc/effective_go https://go.dev/doc/effective_go) and you'll have a very good grasp of the language. Both are extremely high quality and maintained by the core language group/team.
jamal-kumar 4y ago
As far as Javascript books goes this looks pretty replete, kudos to the author! I will add it to my bookmarks to recommend to new developers alongside the excellent Eloquent Javascript [1], which for all I know probably is missing some things between when it was written and now which this modern javascript tutorial seems to cover. Very cool! [1] https://eloquentjavascript.net/ https://eloquentjavascript.net/
- bpesquet 4y ago
  The modern JS tutorial is indeed a very good and comprehensive resource. For all its qualities, Eloquent JS is not a very beginner-friendly book. For a smoother learning curve, you might consider https://github.com/thejsway/thejsway https://github.com/thejsway/thejsway. Disclaimer: I wrote this book.
  - dorfsmay 4y ago
    FYI, you link to https://bpesquet.fr/ https://bpesquet.fr/ both on that page and on your HN profile but your server isn't listening on https/443 (works on http/80).
    - bpesquet 4y ago
      Corrected, thanks for pointing it out.
- grech 4y ago
  The OP (javascript.info) and Eloquent Javascript go great together - I used these two together all the time. Eloquent Javascript is great for deep dives into select topics and is well-written. OP is great as a reference guide while you're writing code.
troller1992 4y ago
Might be a dumb question, but anyone got a similar tutorial for TS?
- mgomez 4y ago
  Check out: https://basarat.gitbook.io/typescript/ https://basarat.gitbook.io/typescript/ https://www.typescriptlang.org/docs/handbook/intro.html https://www.typescriptlang.org/docs/handbook/intro.html
raj_nishad 4y ago
hi , i love your content . it is so organised and has everthing for a new begineer.
AltruisticGapHN 4y ago
Great resource which I'd like to use, I only wish the search would work like a command palette like on MDN or Tailwind docs... because if this is so complete this could be a great alternative for me from MDN, having more "tutorial" text and examples, not just specifications. So I'd like to be able to hit Cmd P or Ctrl K or the like, enter "nullish" and then find the article on nullish coalescing op.
sahinyanlik 4y ago
I am proud to be contributing to Turkish translation of this project.
louissan 4y ago
Ask Douglas Crockford to review this? :-)
nicomeemes 4y ago
I also recommend checking out https://learn.javascript.ru/ https://learn.javascript.ru/ which has more content than the english version (same author though I believe). Install https://addons.mozilla.org/en-US/firefox/addon/traduzir-paginas-web/ https://addons.mozilla.org/en-US/firefox/addon/traduzir-pagi... and let the learning begin.
dgb23 4y ago
I love the design of the site. Very clean and good use of available space.
12335546 4y ago

538 points by Hbruz0 4y ago

taesu 4y ago

Preparing to interview with JavaScript. This is helpful, thanks!!

mosdl 4y ago
having just gone through that, my pro tip is: look at implementing promise.all() as well as extending the code to have a limit on concurrent promises/etc. very popular question.
- faruzzy 4y ago
  Thanks for this! Could you please share any other tip if any?
  - fullstackchris 4y ago
    Closures, event bubbling, event loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop https://developer.mozilla.org/en-US/docs/Web/JavaScript/Even... Basically all the things you otherwise forget about or never need to worry about when writing production JavaScript. Yawn. I sound like a curmudgeon and I am: too many interviews I've been in that involved JavaScript felt like abstracted garbage. Nevertheless, good luck!
  - LocalPCGuy 4y ago
    have a really good way of talking through how you handle async code and the difference between async and procedural code. Plus, how you can make async code read like procedural (async/await). I always give bonus points if you can describe clearly the difference between using ansync/await and then based promise code (not just saying "syntactic sugar", but actually explaining how the code looks different but yet how they are effectively the same). How people answer questions around promises in general often gives me a good idea of where they are at in their JavaScript journey.

12335546 4y ago

Veuxdo 4y ago

In almost 10 years of professional development with Javascript/Typescript, I have never encountered a colleague using the call/bind/apply keywords (or "this" outside of classes). I'd say almost all professionals deliberately avoid 80%+ of the language in practice.

Tcepsa 4y ago
As someone who likes functional programming, I appreciate .bind as a reasonably convenient way to do partial function application.
- golergka 4y ago
  One thing I didn't get about functional programming is planning the parameter order in advance for currying them later. Arrow functions may not look as neat as Haskells currying, but you can partially apply any parameter regardless of whether it's first or not, including separate properties of object parameters.
  - gherkinnn 4y ago
    Defaulting to data-last gets you 80% of the way. fn = (a -> b) -> a So your typical array mapping becomes list.map(to(v => v * 2)) All very contrived of course. Ramda’s currying [0] gives you the _ param to play with the order. But I’ve come to the conclusion that currying in JS is rarely worth the effort. [1] 0 - https://github.com/ramda/ramda/blob/v0.28.0/source/__.js https://github.com/ramda/ramda/blob/v0.28.0/source/__.js 1 - https://2ality.com/2017/11/currying-in-js.html https://2ality.com/2017/11/currying-in-js.html
robgibbons 4y ago
They are very useful at the framework level, if you do much work with vanilla JS at scale they become useful for applying generic functions against various scopes.
- phist_mcgee 4y ago

markhaslam 4y ago

For me this is a great supplementary resource to the MDN docs.

caseyross 4y ago

Some previous discussion from 2020: https://news.ycombinator.com/item?id=25333350 https://news.ycombinator.com/item?id=25333350 This site is IMO the best reference out there for modern JS/DOM fundamentals. It's concise, clear, consistent, accurate, and well-organized throughout, which is no mean feat for how many topics it covers.

dang 4y ago
Thanks! Macroexpanded: A Modern JavaScript Tutorial - https://news.ycombinator.com/item?id=25333350 https://news.ycombinator.com/item?id=25333350 - Dec 2020 (292 comments)
pryce 4y ago
Most of the areas I checked out looked great, but... the section 3.4 on 'Ninja code' is terrible: It swaps to an ironic, sarcastic, in-jokey tone almost completely divorced from the previous sections that will leave much of the intended audience (people new-ish to programming) utterly confused by what is being said—or in this case, worse, what is intentionally not said. The effect of this self-absorbed style of teaching is so poor, I think, that that page actually damages the overall text in its current state. Surely the point of a site like this shouldn't be shaped for the entertainment of experienced programmers, but to help less experienced programmers know what to do—and what not to do. They could still make it funny, just... not that.
- akshaykumar90 4y ago
  That's the joke.
threatofrain 4y ago
Is it better than MDN's own tutorials or references?

frigid 4y ago

This is excellent. I think https://www.internetingishard.com/html-and-css/ https://www.internetingishard.com/html-and-css/ complements it well as an introductory tutorial to HTML/CSS.

acemarke 4y ago
Agreed! I wrote a related blog series on "How Web Apps Work" after years of trying to teach web dev to Java/C++ devs, or seeing beginners ask questions because they had no idea what any of these things are in the first place. That series tries to explain the key pieces of web dev concepts, terms, and technologies, and how they fit together, and provides an overview of HTTP and servers, client dev, browsers / HTML / CSS, JS / DOM, and AJAX: https://blog.isquaredsoftware.com/series/how-web-apps-work https://blog.isquaredsoftware.com/series/how-web-apps-work The "Interneting Is Hard" HTML+CSS page is one of the best intro resources I've found for those topics, as is the "Modern JS Tutorial", and I specifically linked those as recommended resources from the related posts I wrote.
_smmt 4y ago
The only thing I want is a proper tutorial or book on how to debug and trace a modern web app.
- acemarke 4y ago
  I wrote a sibling comment about some web app fundamentals posts I've put together, but fwiw I've also got some resources on debugging as well. This is another topic that seems to be rarely taught, and people just have to pick it up through hard-earned experience. I did a presentation last year that provided some general guidelines and suggested approaches to debugging, as well as specific info on the standard controls used in GUI debuggers and tips for debugging React and Redux: https://blog.isquaredsoftware.com/2021/06/presentations-debugging-software/ https://blog.isquaredsoftware.com/2021/06/presentations-debu... I also have a prior post where I gave some general debugging tips, and wrote up several "war stories" of weird and difficult problems I've debugged: https://blog.isquaredsoftware.com/2019/01/blogged-answers-debugging-tips/ https://blog.isquaredsoftware.com/2019/01/blogged-answers-de... You mentioned "trace", and I'm not sure if you're referring to "trace a request as it gets passed through multiple services", or just "trace data flow on the client side". The other resource I can point you to: a couple months ago I joined https://replay.io https://replay.io , and we're building a time-traveling debugger for JavaScript apps. The basic idea of Replay: Use our special browser to make a recording of your app, load the recording in our debugger, and you can pause at any point in the recording. In fact, you can add print statements to any line of code while debugging the recording, and it will show you what it would have printed every time that line of code ran! See https://replay.io/record-bugs https://replay.io/record-bugs for the getting started steps to use Replay, and https://docs.replay.io/docs/examples-d25ae319114e4d109022458cd47f38ec https://docs.replay.io/docs/examples-d25ae319114e4d109022458... for some videos and examples of using Replay to solve problems. We're working on additional features to help with debugging apps - we already have the React DevTools integrated into our debugger, so you can inspect the component tree at any pause point, and over the last couple weeks I got the initial alpha implementation of Redux DevTools integration working as well. (Long-term, we'd like to integrate _all_ major framework-specific DevTools as well.) Beyond that, we also spend a bunch of time helping teach people how to debug in general, specifically _because_ that's a thing that is so rarely taught. If you've got questions about Replay, or just want to chat about debugging approaches, come by our Discord at https://replay.io/discord https://replay.io/discord and say hi - we'd love to offer suggestions!

coward-guy 4y ago

jbc1 4y ago

Self learning JavaScript and this site has been a huge help. I’ve actually set up Alfred such that when I type “j [search terms]” in to its search bar that it opens a new tab with that search in JavaScript.info because I was doing “site:JavaScript.info” in google so frequently.

synergy20 4y ago

Just bought its PDF version to show some support, it's a decent site for JS indeed. I use another site more often though at https://www.javascripttutorial.net https://www.javascripttutorial.net, which is not as deep as this one, but way more concise. It's kind of like w3schools, not the best authoritative site, but, nothing beats its simplicity.I support all of them.

pronlover723 4y ago

ninja code! https://javascript.info/ninja-code https://javascript.info/ninja-code I get it's a list of bad practices and it's kind of funny in an "inside joke" kind of way but if you're reading the site to learn JavaScript then you are probably not on the "inside" yet? As funny as it is for those "in the know" would it be better as a list of "don't to X (bad examples) do Y instead (good examples)? As it is there are no good examples, just a cryptic joke.

jmkni 4y ago
Agreed, needs a big disclaimer at the top imo
hajile 4y ago
Some of the practices aren't even bad. Adding an underscore or two as a bad practice? One is well-known convention for stuff you don't want touched and even JS itself uses double underscores for some stuff.

eric4smith 4y ago

Bruh, this is so good! In just a few minutes of reading, I got cleared up on a few things. For reference, I dabble in Javascript just to do small things that are incidental to my main programming languages.

bernardv 4y ago

This looks really good

axg11 4y ago

Is there a list of equivalent excellent resources for other languages? I'm familiar with JS and Python - I'd love to get up to speed with other languages this way.

aussieguy1234 4y ago
For PHP - https://phptherightway.com https://phptherightway.com Like JS, PHP has alot of old, outdated practices which aren't considered best practice anymore. Lots of this type of code will show up in search results in google when you search for solutions to common problems.
qbasic_forever 4y ago
For Go start with A Tour of Go (https://go.dev/tour/welcome/1 https://go.dev/tour/welcome/1) and then read Effective Go from start to finish (https://go.dev/doc/effective_go https://go.dev/doc/effective_go) and you'll have a very good grasp of the language. Both are extremely high quality and maintained by the core language group/team.

jamal-kumar 4y ago

As far as Javascript books goes this looks pretty replete, kudos to the author! I will add it to my bookmarks to recommend to new developers alongside the excellent Eloquent Javascript [1], which for all I know probably is missing some things between when it was written and now which this modern javascript tutorial seems to cover. Very cool! [1] https://eloquentjavascript.net/ https://eloquentjavascript.net/

bpesquet 4y ago
The modern JS tutorial is indeed a very good and comprehensive resource. For all its qualities, Eloquent JS is not a very beginner-friendly book. For a smoother learning curve, you might consider https://github.com/thejsway/thejsway https://github.com/thejsway/thejsway. Disclaimer: I wrote this book.
- dorfsmay 4y ago
  FYI, you link to https://bpesquet.fr/ https://bpesquet.fr/ both on that page and on your HN profile but your server isn't listening on https/443 (works on http/80).
  - bpesquet 4y ago
    Corrected, thanks for pointing it out.
grech 4y ago
The OP (javascript.info) and Eloquent Javascript go great together - I used these two together all the time. Eloquent Javascript is great for deep dives into select topics and is well-written. OP is great as a reference guide while you're writing code.

troller1992 4y ago

Might be a dumb question, but anyone got a similar tutorial for TS?

mgomez 4y ago
Check out: https://basarat.gitbook.io/typescript/ https://basarat.gitbook.io/typescript/ https://www.typescriptlang.org/docs/handbook/intro.html https://www.typescriptlang.org/docs/handbook/intro.html

raj_nishad 4y ago

hi , i love your content . it is so organised and has everthing for a new begineer.

AltruisticGapHN 4y ago

Great resource which I'd like to use, I only wish the search would work like a command palette like on MDN or Tailwind docs... because if this is so complete this could be a great alternative for me from MDN, having more "tutorial" text and examples, not just specifications. So I'd like to be able to hit Cmd P or Ctrl K or the like, enter "nullish" and then find the article on nullish coalescing op.

sahinyanlik 4y ago

I am proud to be contributing to Turkish translation of this project.

louissan 4y ago

Ask Douglas Crockford to review this? :-)

nicomeemes 4y ago

I also recommend checking out https://learn.javascript.ru/ https://learn.javascript.ru/ which has more content than the english version (same author though I believe). Install https://addons.mozilla.org/en-US/firefox/addon/traduzir-paginas-web/ https://addons.mozilla.org/en-US/firefox/addon/traduzir-pagi... and let the learning begin.

dgb23 4y ago

I love the design of the site. Very clean and good use of available space.

12335546 4y ago