I wish there was a "learn modern Javascript for people who learned Javascript in 1998" - it seems like the only way to get up to speed is to slog through all the basics (yet again) and keep an eye out for the parts that seem to be unfamiliar/new.
As a fellow old-schooler who's been getting back into JS myself, I've come across a couple of these types of resources that I found particlarly helpful. Here's the links:
I suggest reading the ExploringJS books [0]. If you already know ES5 then you can jump to Exploring ES6 [1], then you can work your way through Exploring ES2016 and ES2017, and finally Exploring ES2018 and ES2019. Each book explains what new features that were added to the language as part of that specific version. Don't feel daunted though! ES6 added the largest amount of features, and after that there haven't been nearly as many changes. If you find the book useful please consider buying a copy; I'm not associated with the author in any way, just a big fan of his writings.
I was in the same position a while back, and found Eloquent JavaScript [0] to be a really good read. It's quite well structured, which makes diving into the bits that sound unfamiliar a lot easier.
I skimmed this (which looks good) and the Airbnb guide recommended (recommended in another comment) and I can't help noticing that one uses double quotes for strings and the other single quotes (Airbnb).
Is there actually any sensible argument one way or the other - that isn't just being consistent with your team/project/platform...?
For these sorts of style rules we've started using Prettier (https://prettier.io/) to auto-format code for style. We set VS Code to just run it every time you save a file. It's been a huge win for us so developers don't have to spend time on trivial stuff like double vs single quotes and the like. No more having to comment on style inconsistency in PRs, we can focus on actual code quality. And no more arguments about what's the right style rules.
Prettier doesn't resolve my primary issue with excessive linting rules.
The way I see it, there are three kinds of syntax linting rules:
1) Potential bugs. These are where a syntax will technically work, but makes it easy for an unintended bug to creep in. Most everyone agrees that these are bad. (There are a few arguments about what qualifies, but this is nonetheless a less-argued-about category.
2) Purely stylistic. This is where Prettier shines, because everyone wants the "more readable" option - where "readable" means "more familiar". Prettier allows you to write your preferred style, though of course anything you READ will be in the defined style (absent two-way conversion).
3) Expressiveness. This is where you're formatting your code to communicate. While Perl is notorious for this - the advocates love it because well-written code is easy to follow and maintain and the detractors hate it because just because you CAN write clearly in it, the skill to do so is rarely developed and the result is near-gibberish, even from skilled coders - like a story that has every sentence written by a different person. Java is the reverse - the advocates love it because the code tends to be very uniform and the detractors hate it because it's universally verbose and unclear.
That last category is why I'm leery of excessive linting. If I'm dealing with code that changes hands often, a Java style makes sense - newspapers written for a low but common reading level, even if the reader is capable of much more nuance. In this scenario nuance would risk being ignored, or worse, being mis-applied, which means the result would be misleading. If I'm dealing with code that is owned by a team that has routine staffing changes but no complete upsets, nuance has a real benefit - reading code is faster and more accurate/informative, with the result of fewer bugs (citation needed).
But saying "It's okay to use Prettier and stop arguing about linting" dismisses the nuanced case. It carries the assumption that linting rules - any rules - are automatically valuable regardless of the choices made, and if you don't like it than write what you like and just use Prettier.
Linting rules (and linting arguments) exist for a reason - these are LANGUAGES that we are using to communicate - and as much as I'm tired of the arguments too, until we honestly figure out how to communicate well, ignoring the arguments doesn't help.
I agree that nuance and discussion about style is incredibly important because, as you aptly point out, we're writing in a language used for communication. That being said, since we've introduced Prettier, I haven't encountered any changes it's made to code that are anything more than trivial formatting/purely-stylistic changes.
I think readability and expressiveness are more about larger scale patterns in code writing (writing self-documenting code with descriptive variable and function names, writing modular code, etc). These are things that should be continuously discussed and improved upon for clarity and alignment. The really granular formatting changes that Prettier chiefly concerns itself with don't seem to be a concern in this case. If you could point me at a more specific case where you think Prettier mucks things up I'd love to see more of what you're talking about.
I could be misunderstanding (I've not yet used Prettier), but I thought Prettier was agnostic to the linting rules used. I was arguing not that Prettier is bad, but the _excessive_ linting rules were bad (Prettier should be fine for reducing arguments over trivial rules that neither impact bugs nor expressiveness), and further, that arguing that excessive linting wasn't a problem because Prettier can let you ignore them is likewise bad.
None of which says that Prettier itself is bad, but that excessive linting rules, with or without Prettier, are bad.
If I'm wrong about what Prettier does, please let me know. If you're discussing a default set of linting rules Prettier uses, cool, but I can't really say if I think they impact expressiveness since I'm not familiar with that set of rules.
I think you are misunderstanding what Prettier does - Prettier is more in line with gofmt as it is a formatter not a linter. Prettier parses the JS code into an abstract syntax tree and then outputs that AST back into code using a defined set of rules, so you end up with one unified style. Prettier intentionally doesn't give you many configuration options for this style, with the goal of eliminating the discussion about which style to use.
If you are using Prettier, you can use the Prettier config with eslint or tslint, which fully disables the style rules for those two linters and lets them focus solely on linting for errors and structural issues.
Ah, I thought it consumed the style rules and rewrote to them, so you could pick your preferred styles and have everyone submit code that met them even if they didn't write in that way. Which sounds mostly correct, except for the "pick" part.
That whole issue is arguably old JavaScript. It was because HTML style preferred double quotes so using since quotes in JS made that easier.
Modern Javascript has template literals using backticks so arguably the new rule should be used double quote everywhere except use a template literals for HTML or whenever doing string manipulation.
The number one thing I hate about using single quotes it is matches almost no other languages so it ruins muscle memory if switching between languages.
JS itself prefers double quotes. See JSON.stringify or log anything to the console that gets auto quoted, always uses double quotes
The sane argument is about avoiding escaping of nested quote characters.
It's easier to use double quotes if your text is english (or other language that uses apostrophes).
It's easier to use single quotes if your text is HTML (for double quotes)
I've seen an argument to use template literals (backticks) almost everywhere. I don't know if that involves any real performance hit, but I've also not adopted this convention, at least not yet.
An argument for " is you don't have to escape ' inside string's. In an argument about single vs double quote you can bring up `Template strings` and everyone will hate you ;)
For a slightly different reason than many I've seen here - double-quotes require the shift key to be depressed on standard keyboards. So programming with double-quotes doubles the number of keystrokes you need to type any time you quote something. Pretty sure the person that told me that was a Vim fanatic as well.
Not saying that it's a strong reason to use one over the other, but it is an objective reason that doesn't rely on style or preference.
I agree w/ other commenters that using a formatter like Prettier is a good idea. But to answer your question, single quotes don't require use of the Shift key so are a better choice for DX / ergonomics. RSIs are no joke.
In practice the only thing you absolutely need to know is the spread syntax for arrays `blist=[...alist]` and objects `objb={...obja}` that will trick you up if you're never seen in before
I would read through AirBnB's JS style guide. Very well structured, and most rules have reasons specified in the guide. It should cover all the unfamiliar parts for you. After that, the next biggest thing is tooling so it'd be picking a framework and seeing how the development process has changed with npm & webpack. Start with Vue, Angular, or React and go through their hello world examples. Not that you need to be a "framework developer", but they are probably the best spots to see how the development process has changed.
I'm sure a lot of people are in this same boat. It used to be that I was afraid to use any new JS features for many, many years due to the fact that so many people were using old browsers. Today, browsers update automatically, and the only outlier is the 5% of people still using Internet Explorer. So, recently I've changed my attitude to accept anything in ES8 (or at least async/await).
The problem now is that different sources of info will still use older methods. E.g. Promises were used to augment/replace the use of callbacks in many situations. And now async/await is augmenting and replacing promises in a lot of places. So you'll still run into a lot of sources saying promises are the new and better way to do some things, when async/await is actually a better choice.
I still code JS like it's 1999 :P Most new updates are syntax sugar. ES5 added a ton of stuff that are useful, for example binary buffers which is useful for optimization. When people say "modern" JS though, they mean the syntax sugar from ES6 and ES7. I actually prefer the "old school" style. I hate how the language has become more complex, but I guess it's an evil necessary in order to please everyone. If you for example are into functional programming you will love arrow functions. If you never liked async or functional programming you will like async/await. If you like meta programming you can use new tools like Babel to come up with your own syntax sugar. The tooling and ecosystem for JS has really exploded. If you haven't already, take a look at Node.JS.
While I agree some of that sugar does a lot to clean up a lot of boilerplate code that we used to have to write, such as arrow functions retaining this in scope without having to do binds or "self = this" stuff we used to have to do. as well as adding let which allows you to properly scope variables. It is sugar and the language was perfectly usable without them but they sure do tidy up the code we write.
For me, it's not really so much the JS syntax - I agree it's mostly syntactic sugar and if I really want to use something like, say, "map", I can always do something like:
Array.prototype.map = Array.prototype.map || function(f) { var a = []; for (var i = 0; i < this.length; i++) {a[i] = f(this[i]);} return a;}
What I'm still trying to get my head around is this whole new ecosystem of bower, webpack, babel, eslint, npm, node, grunt, jQuery, angular, react, vue, yarn, parcel, browserify, gulp, etc... and apparently Javascript has modules now?
Around year 2000 "AJAX" started to get popular which allows you to make HTTP requests from JavaScript (JS). "AJAX" makes it possible to have upload progress bars, or have "new messages" badges without reloading the page. "AJAX" made it possible to move back-end code into front-end JavaScript. To make the transition easier, front-end JavaScript frameworks was invented.
AJAX was initially implemented differently between browsers, and jQuery became popular, as it added abstractions that work on all major browsers.
In 2011 Websockets was made into a standard, which set the new direction on how you create web apps. Instead of having a back-end in Perl, PHP, CGI, etc, which renders the HTML on the server, the DOM is now rendered on the client, and the client communicate to the server via REST/HTTP or Websockets. This accelerated the growth of front-end frameworks as more and more started to port their back-end rendering to the front-end.
In 2008 Google's Chrome browser was released which had a very fast JS engine called v8.
And about that time a mathematician named Ryan thought that in order to have a performant web server, it need to be async ... While JS on the server was already a thing, it was not async. Ryan took the v8 JS engine from Chrome. and made a fully async library/API for IO on the server. He called it Node.JS. And it become popular. The "CommonJS" module system became the standard module system in Node.JS. NPM was created to host modules/packages. Webpack makes it possible to convert Node.js modules to run in the browser. Grunt was picked as the "make" system for Node.JS modules, and I think Gulp is a competitor to Grunt. Bower and Yarn sprung up as competitors to NPM.
Then in 2015 the EcmaScript (ES) committee standardized JS modules, but incompatible with Node.JS module system, missing features such as lexical scoping, dynamic import and lazy loading available in the NodeJS module system. As a result Node.JS has still not implemented ES modules. But you can use Babel to transpile the code.
Personally I try to avoid transpilation and front-end framworks, and only use vanilla JS. Node.JS is a really good back-end JS framework. There's a module for everything you need. And all of them are free and open source!
