22 ms·
A Modern JavaScript Tutorial
- forgotmypw17 6y agoI prefer post-modern javascript, the kind that works universally across all browsers starting with Netscape 2.0
- markdown 6y agoalert("Reached here #23");
- forgotmypw17 6y agoMore like: //alert('DEBUG: SomeFunction: condition is TRUE'); Then, depending on what browser I'm debugging in, the post-processor changes that to either console.log, document.title=, or alert( :)
- austincheney 6y agoAside 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.
- viviansolide 6y agoThanks for sharing. I found this quote very appropriated: In older scripts, you may also find another keyword: var instead of let
- Rumudiez 6y agoTrue for reading legacy JS. For newer code, you can still identify noobies (and "experts") by the conspicuous usage of let instead of const.
- reificator 6y agoWhile I certainly prefer immutability there are many who do not, and that preference does not make you better or more experienced than them.
- jsnk 6y agoExcellent resources. Is there one like this for Java?
- alfonsodev 6y agoThe ninja code section is pure sarcasm, right? I'm not sure now which sections are and aren't.
- jeffmcmahan 6y agoIt has an alert at the top that says, "Irony Detected".
- Zhyl 6y agoThat page has an 'irony warning' so just watch out for those on other pages! It might just be my sense of humour (I'm the sort of person that doesn't need an '/s' tag and feels that it shouldn't be necessary if you told the joke properly), but it was pretty obvious to me even without the irony warning that the page was intended as a joke. It looks like it was heavily inspired by the classic 'Tao of Programming' [0]. It uses a very similar style and even quotes the actual Tao Te Ching. [0] http://www.mit.edu/~xela/tao.html http://www.mit.edu/~xela/tao.html
- hutzlibu 6y agoI am with you on not wanting or needing to see /s ... but on a tutorial, where people actually struggle to understand anything at first read, using unmarked irony is maybe not the most helpful for them. Oh and a second thought on /s. For some time I only got my news through satire sites like the onion. And after I switched back to "real news" sites, I could not believe it was not satire. I mean come on, the world and the internet was always full of dumb people, but when even very high ranking people and institution say really out of the world things in all seriousness - I came to the conclusion, marking irony as irony is sadly sometimes important, in those interesting times we live ...
- Sohcahtoa82 6y agoYeah, when we live in a world where people legitimately believe that Bill Gates is trying to use COVID vaccines to install microchips into people, you can't always be sure that someone giving an insane opinion isn being ironic or sarcastic.
- nailer 6y agoThe 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'.
- jedimastert 6y agoCan you point to anything other than saying "this is obvious"?
- nailer 6y agoNo, just experience with a lot of codebases. Here's a simple question to ask yourself: what if non-IO operations allowed you to use the .then() syntax? If you have the choice to use: 1 + 1.then(function(result) { ... } vs const result = 1 + 1 Which would you choose?
- pavlov 6y agoUsing then() doesn't pause execution of the callsite function, while await does. Surely that's a relevant difference here? It doesn't seem unreasonable to use then() to express: "Run this anonymous function whenever the async thing completes. Meanwhile let's do this other stuff right now."
- nailer 6y agoBoth codebases can't do anything until `result` has a value.
- ericwood 6y agoMaybe some codebases mandate it, but it's very common to use either style when it makes the most sense. The classic syntax is by no means deprecated or superseded by async/await.
- deleted 6y ago[deleted]
- ddoolin 6y agoI'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.
- robofanatic 6y agoExcellent. Wish all documentation\tutorial sites were this clean.
- deleted 6y ago[deleted]
- kaycebasques 6y agoWhen you say "clean" are you referring to the formatting of the page?
- realyashnag 6y agoand structuring of the content, i believe.
- madeofpalk 6y agoNot sure what OP was referring to, but I find both the formatting and the tone of voice to be exceptionally clean and mature. I am incredibly jealous of the writer's skill to write like this.
- forest_dweller 6y agoThis 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.
- boberoni 6y ago> 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.
- lights0123 6y agohttps://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Ac...
- jmt_ 6y agoThe Accept-Language HTTP request header is my guess
- pwdisswordfish4 6y agoIs your next thought after having your curiosity piqued not, "I should look at what headers my browser is sending", or "I should type 'browser language headers' into a search engine"? I'm trying to understand what sort of things lead people instead to think, "I should type a question about 'browser language headers' into a comment box on an off-topic thread, wait for a response, and then go back and check what the replies say."
- djeiasbsbo 6y agoMaybe he did fo that but wanted to inform the OP that this was surprising to him. Given that the OP is looking for translators it is valuable feedback imo.
- bryanrasmussen 6y agomaybe: since I'm already here I'll ask the question because on this particular site somebody knows the answer and can probably give me a better starting point for learning about the subject than the average search engine! Also it will serve as a notice to people that not everybody knows these things and might be put out by this sort of question.
- cosmotic 6y agoOh 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).
- corytheboyd 6y agoHonestly, it’s fine if documentation goes out of date, otherwise what’s the point of writing anything at all? The onus is on the reader to check the publish date of what they are reading, and to cross reference it with other sources to ensure accuracy.
- kaycebasques 6y agoI'd be careful about relying on "updated" dates too heavily. As a professional technical writer, I've seen that some people bump the "updated" timestamp for any update, no matter how small. At other times it's bumped automatically by the build system. I think the best practice is to only bump the timestamp for substantial updates, or to use an explicit changelog at the bottom of the doc. But that practice isn't standardized across docs sites.
- corytheboyd 6y agoThat’s a good point to call out, thanks! There is so much involved in being a “defensive reader” heh
- olnluis 6y agoI encounter this "article update" problem a lot with Java blogs... Baeldung instantly comes to mind. Every article I find there was last updated on 2020, but don't seem to have actually changed.
- willio58 6y agoI think it’s precisely the fact that js is constantly changing that they’ve branded this as “modern”.
- 6y ago
- kaycebasques 6y agoThis is not a tutorial [1]. It's more like a guide [2]. [1]: https://documentation.divio.com/tutorials/ https://documentation.divio.com/tutorials/ [2]: https://documentation.divio.com/how-to-guides/ 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).
- dboreham 6y ago'And thirdly, the code is more what you'd call "guidelines" than actual rules.'
- useragent86 6y agoI looked at those links. Here's what I got from them: 1. Tutorials "are lessons that take the reader by the hand through a series of steps." They "are oriented towards learning how." 2. How-to guides "take the reader through steps." 3. "How-to guides are wholly distinct from tutorials." If I found a "community" around a topic, do I then get to decide what words mean? By consensus, of course.
- xixixao 6y agoYou can see a good breakdown of what they mean by each label in this table: https://documentation.divio.com/introduction/#the-secret https://documentation.divio.com/introduction/#the-secret It's certainly a valuable take, even if you disagree with the claim that all 4 functions are required for good documentation.
- quietbritishjim 6y ago
- simonw 6y agoI'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/graphs/contributors https://github.com/javascript-tutorial/en.javascript.info/gr...
- mekoka 6y agoEven more surprising, it's been submitted umpteen times before: https://news.ycombinator.com/from?site=javascript.info https://news.ycombinator.com/from?site=javascript.info I sometimes wonder what are the dynamics that trigger the snowball on HN.
- codetrotter 6y agoI think time of day, novelty, luck, and whether any mods notice the post and decide to give it a second wind. By novelty I mean something that is easily recognized as new and important. It doesn’t help that something is new if no one catches the point of reading about it. Could be a bad title or a bad article. Or bad luck. In terms of good luck I mean a couple of specific things especially: - If a few people see it that are excited about it, either from hearing about it the first time or from knowing it in the past, and these people write positive comments about it, then others who come across the post may be encouraged to check it out and to upvote it too. - “Micro zeitgeist”. If it’s about a topic that recently hit the front page and it adds something new about that, it could luck out. Why luck in this case? Because you probably don’t know ahead of submitting that people will care to read even more about some topic even if it was popular the day before. Perhaps instead people are tired of the topic. - The other things submitted the same day did not gain enough traction to push this thing away. - Evergreen topics that have not gotten traction in a while but that people care about. - Topics that people in university and college are currently learning about so it catches their attention. I dunno how big the amount of people currently in university is versus people that are in jobs. But I remember that I learned about HN from some other students in a student union I was in back then. And I don’t know how students HN reading habits are compared to people in jobs either. I remember reading HN a lot when at the university. But I still read HN a lot. These days I read HN in the morning, the evening and at night though, not when I am working. But even if you have a job you might read HN in the lunch break, or perhaps you have some downtime where you are waiting for something at work and you read HN for a while. There are other possible factors too that I have thought about in the past but these are the ones I can think of right now. Please note that all of what I am saying here is only my thoughts based on my own habits and from what I’ve heard other people say and what I’ve seen.
- emmanueloga_ 6y agoLooks 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.
- joshxyz 6y agoI think comparing gaps with exploringjs.com (separated by ecmascript versions) would be worth a shot.
- OpuRahman 6y agoNeeds to be updated on a regular basis.
- stasgavrylov 6y agoIt's open source and they're actively looking for contributors.
- priyatham_ 6y agoThis 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.
- arebhaibhai 6y agoI just wish it didn't have Disqus :(
- 29athrowaway 6y agoIt 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.
- cercatrova 6y agoNote 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 6y agosighs and opens Russian learning book
- Avtomatk 6y agoThe Russian version simply adds a CSS section for JS developers and an extra page at the end of the first section, I don't know if the content of the chapters differs from the English version.
- cercatrova 6y agoYou're right, the English version is now updated, it used to not be as up to date as the Russian version.
- cgrealy 6y agoIsn’t step 1 of “modern JavaScript” to install TypeScript? :)
- halfmatthalfcat 6y agoAmazing how many JS devs I meet (or work with) that are against the very idea of Typescript.
- DrScientist 6y agoBecause it fails to meet the 'it's the platform stupid' maxim. ie languages aren't nearly quite so important as the platform. Stuff wasn't written in js because early js was a brilliant language - it was because the platform - the web - was brilliant. Many have written 'better' languages that compile to js - https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS https://github.com/jashkenas/coffeescript/wiki/List-of-langu... and while typescript is one of the better, more supported ones, isn't it just another one? Surely in the end it just adds complexity and fragmentation of the ecosystem?
- rictic 6y agoUnlike other languages, typescript adds zero runtime overhead, and the APIs that one writes in TS are trivially consumable from JS. Consuming JS from TS is also made as easy as possible, including the option to set types aside entirely for some parts of your code using the "any" type, which means "don't type check this, just trust me that it works". TS really is different from other compile-to-js languages in this respect.
- jonnycomputer 6y agoI looked at this page first and assumed that it was all a gag. https://javascript.info/ninja-code 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.
- weaksauce 6y agoIt was tongue in cheek though... the summary tells you as much.
- jonnycomputer 6y agoI mean, I read it, and assumed the rest of the guide was also tongue in cheek.
- SamBam 6y agoEvery single example on that page was clear bunk -- showing the worst habits of some developers, and making clear why they are terrible. I think if you've gotten as far as that chapter, it would be pretty impossible not to realize it was tongue in cheek. At the top of the page is a big warning triangle that says "Irony detected." No other chapter includes such a prominent warning. I think it's pretty clear that the "gag" is specific to that chapter.
- z3t4 6y agoThen 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) ...
- lxe 6y agohttps://javascript.info/ninja-code https://javascript.info/ninja-code hah this is a great read :)
- throwawaysea 6y agoIs 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.
- icebr9 6y agoTbh if you know JavaScript well all these frameworks work like js. I build couple websites using vanilla js and when using any framework I can tell what it is doing behind the curtains because I have done it myself dozen or times in multiple lines of normal js
- deleted 6y ago[deleted]
- msie 6y agoRemember when some people advocated not using semicolons to end statements? Good times... https://javascript.info/structure https://javascript.info/structure
- pknopf 6y agoYeah... There was a big push for that a while back. The JavaScript community can be silly.
- stingraycharles 6y agohttps://news.ycombinator.com/item?id=2024328 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! :)
- wwweston 6y agoSomething I always thought was interesting about that argument is how a similar line of reasoning could apply to the `==` and `===` comparison operators. Just about anyone who's ever written JS probably knows about the heavy lean towards "always use `===`". And it's not without good reason, because there are more than handful of not-entirely-intuitive implicit coercions/comparison corners associated with `==`. Personally, I think it's OK to use it, but I understand that it requires knowing the rules associated with use and most of all comes with the overhead of keeping them in mind when you do so. Most of the time it will be OK if you know even most of the rules. Sometimes it will not be OK. More often the overhead will cost you attention to other things. Some people have made the call "wouldn't it be simpler if we just did strict comparison and saved our attention for other things?" and while it's not my first choice, I can understand and respect it. The statement termination thing strikes me as pretty much the same. Sure, if you know the rules, you can do it freely. But it takes something explicit that you don't have to think about and turns it into something implicit that you do. It isn't going to be a problem most of the time, but sometimes it will not be OK. A little more often the overhead will cost you attention to other things. Following the rule that semicolons terminate statements hasn't ever cost me anything. The weird thing in my experience was the frequent overlap between antisemicolonists and always===ists. My theory is that mostly these people came from Ruby and Python, liked less punctuation for subjective aesthetic reasons, and didn't actually know the coercion rules well or particularly like JS, but that's speculation.
- sireat 6y agoStill 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...
- longnow 6y agoThere 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).
- mcgingras 6y agoyes, it's a whole chapter written ironically. I too find this to be misleading.
- hanoz 6y ago>There is one small comment at the top of the chapter, which says ‘Irony detected’. The whole chapter is littered with clearly tongue in cheek remarks.
- lucideer 6y agoI understand that often subtleties of language, particularly when it comes to irony or sarcasm, can be lost in textual content (particularly supposedly-formal content like educational materials), and that generally this is something to be avoided. However, after reading that chapter, I really can't help thinking that you simply weren't paying any attention. It's not just written in sarcastic tone (something that yes, could be easy to miss for many), but it's also littered with active dissuasion and explicit explanations of the pitfalls of using this style. Examples: > If you write like that, a developer who comes across this line and tries to understand what is the value of i is going to have a merry time. Then come to you, seeking for an answer. > A quick read of such code becomes impossible. And when there’s a typo… Ummm… We’re stuck for long > A fellow programmer who wants to work with elem in the second half of the function will be surprised… Only during the debugging, after examining the code they will find out that they’re working with a clone! > First, the code becomes longer and less readable, and the second, a fellow developer may spend a long time trying to figure out what the underscores mean. You can argue that the chapter is inappropriate, but I don't think you can reasonably argue that it's misleading.
- dmje 6y agoNever rely on Americans to spot irony
- ZoomZoomZoom 6y agoSuppose 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.
- OkGoDoIt 6y agoWell for client side code running on a website, it’s your only option. I guess nowadays many client support web assembly, but for all practical purposes you need to use JavaScript to do any client side web programming. On the server the advantage is much less clear-cut, but a lot of it boils down to “we want to use the same language for the front end and the backend“. Although in my experience this is actually a horrible idea, and tends to result in very messy code and lots of work arounds in practice. Anyway for me personally I continue to use JavaScript because of a combination of wanting to build lightly-interactive webpages and because that really is what the job market demands. So many companies are dead-set on hiring someone with node, react, and whatever other JavaScript experience. I tried taking it off my resume at one point because I kind of hate it, but if you’re at all involved in full stack web development it’ll really hurt your career if you don’t do JavaScript.
- meow_mix 6y agoI swear this tutorial comes out fresh every other month
- yudlejoza 6y ago> ... 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?
- dfilppi 6y agoThe Ninja section is priceless.
- z3t4 6y agoJavaScript 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.
- fogetti 6y agoWhat are you talking about? Did you even take a look at the table of contents?
- rfrey 6y agoI didn’t downvote, but calling people out for not reading the article — even if it seems blindingly true — is against HN rules and always gets downvoted.
- rfrey 6y agoNow I'm being downvoted because my comment seems like a non-sequitur. But prior to an edit, my parent was wondering why they were being downvoted, which is what I replied to.
- SPBS 6y agoThis website covers every nitty gritty detail of javascript, even DOM specific aspects like https://javascript.info/bubbling-and-capturing https://javascript.info/bubbling-and-capturing (just look at how well it is written). I would be highly surprised if it did not even mention those javascript basics. A brief look at its table of contents shows that indeed it mentions those, and I am baffled why the other commentor is getting downvoted for calling you out.
- z3t4 6y agoFor example the article about callbacks basically says "use Promises" which is even more complicated then first class functions. Helpful resource: http://callbackhell.com/ http://callbackhell.com/
- vmurthy 6y agoLot 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 https://javascript.info/ebook
- ianstormtaylor 6y agoWow, this is really well put together! Anyone know an equally good guide for Python?
- lenkite 6y agoThe site is awesome, but I wish they had an all-in-ONE-page option. Navigating through X sections and links is a chore.
- qwerty456127 6y agoSo 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.
- pachico 6y agoI 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.
- stevenjgarner 6y agoLooks 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?
- x14km2d 6y agoThe 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.
- MaxBarraclough 6y agoLooks 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).
- bovermyer 6y agoThis 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 6y agoYou 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 6y agoI 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 6y agoThe cheaty way is `let copy = JSON.parse(JSON.stringify(val))`. Doesn't work for functions or cyclic structures though.
- derivagral 6y agoIn addition to the cloning stuff, I've seen use of an immutables library [0] to make this stuff a little more explicit and simple. Not sure if that's still fashionable though. [0] e.g. https://immutable-js.github.io/immutable-js/ https://immutable-js.github.io/immutable-js/
- cphoover 6y agoHmmm 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.
- ngcc_hk 6y agoLike the email based one more. But this seems more complete.