By Yann S

Translation: Crazy geek

Original text: medium.com/engineered-…

Reproduced without permission

** What is JavaScript? ** Wikipedia describes it as a scripting language that complies with the ECMAScript specification. ES6, ES7, these are the names you’ve probably heard, and you’ve probably been using ES6 for a while (in many cases via Babel).

I’m sure most of you are using many different new ES6 features without asking yourself: Is this really ES6, and does the browser support it? But what do you know about Babel’s 2019 conversion? Are you relearning what’s in ES? What has been removed since the ES6 proposal was first made? What has been added since the original ES7 proposal?

Let’s sit down and review the current state of ES. What has happened since Babel and ES6, and what is fully integrated?

Some history and literacy

I think it’s useful to reacquaint you with the different stages of a project.

Essentially, these features go from 0 to 4, with 0 being the earliest stage and 4 being “ready for release.”

Phase 0 is a purely human idea that is organized into a phase 1 proposal, reviewed and discussed up to phase 3, and finally classified as a priority for Phase 4. Once phase 4 is reached, it will be implemented in the browser and scheduled for release.

Get all deets: tc39.es/process-doc here…

ES6 and ES7 — Reminder

In short, ES6 (or ES2015) is a set of features that pass phase 4 based on the 2015 milestone. In other words, if you have a good understanding of ES6 and a reasonable understanding of ES7, you have about four years to catch up… No pressure.

Let’s take a look at the official components of ES6. By the way, all of these features are officially supported in all browsers. In other words, no matter which browser you use, you don’t need Babel (unless you need to support IE 11).

In ES6, we were able to get:

The ability to create and inherit classes.

class MyComponent extends React.Components {}
Copy the code

ES6 module with import and export functions.

import * from 'React';export default MyComponent;
Copy the code

The generator

let fibonacci = {     
  *[Symbol.iterator]() {         
    let pre = 0, cur = 1         
    for (;;) { 
      [ pre, cur ] = [ cur, pre + cur ]
        yield cur
    }
  }
}
Copy the code

We also have: templates, arrow functions, promises, new numeric types, Const/Let, typed arrays, array deconstruction, Map/Set, symbols.

Here’s a list of all the features: es6-features.org

Did you notice that? Decorators, object destructors (e.g. React props:{… Props}) are not part of ES6!

Here’s what we were able to get in ES7 (ES2016). Here’s a minor update:

  • Power operatorbase ** exponent
  • Array containsArray.includes (myItem) // true or false

Source: ecma-international.org/ecma-262/7….

You may have noticed that Async/Await is not part of ES7, but ES8!

ES8, ES9, ES10

In the past two years, everyone who has been interviewed about JavaScript has been asked what ES6 is and what it brings. But someone noticed that JS apparently didn’t suddenly settle on ES6 and ES7, but no one asked you? This is your chance to set things right!

In **ES8 (ES2017) **, the following features are available:

  • Object.entries/object. values (Array value/key equivalent Object)
  • String paddingmyString.padStart(2); / / or padEnd
  • Trailing coma function test(a,b,c, ) // notice the coma after c
  • Atoms and shared memory: developer.mozilla.org/zh-CN/docs/…

Of course there are Async/Await functions:

async MyAjaxGetCall(url) {
  return ajax.get(url)
}const response = await MyAjaxGetCall("/getUsers");
console.log(response) // response is available without using promise.then
Copy the code

If you’ve been reading this post, you should know by now: With a few exceptions, these features are Stage 4, and you can use them in browsers without Babel (that is, ES8 is ES2017, which is still up to date, and engines like Edge and Opera lag a bit for some implementations).

Now switch to ES9. Just like ES8 and ES6, ES9 (or ES2018) is a fairly significant update:

  • Lifting template literals (TC39.es /proposal-te…
  • Asynchronous iterators: You can use iterators for asynchronous operations, such as reading HTTP streams (tc39.es/proposal-as… for-wait-of
  • Promise.finally:github.com/tc39/propos…
  • Object is destroyed. Yeah, in this case, you’ve been using it for years, it’s a termES9Function. Note from non-React developers: It allows you to:MyNewObject = {a, b, c,... object}
  • Also included are Unicode escapes and improvements to regular expressions (github.com/tc39/propos… , github.com/tc39/propos… Github.com/tc39/propos…

Most browsers already support these features!

Finally, switch to ES10 (or ES2019)!

  • Array.flat: 3], [[1, 2]) flat () / / [1, 2, 3]
  • Array. FlatMap: equivalentmap().flat()
  • Object.fromEntries: Object.entriesReverse operation of (See here,)
  • String.trimstart () and String.trimend (): Remove extra Spaces from strings
  • Optional Catch binding: No arguments need to be added to a Catch (you can use it now} catch {Rather than} catch (e) {)
  • To put forwardFunction.toStringThe problem of behavioral consistency 🥳🥳🥳
  • Symbols that
  • BigInt (64-bit number)
  • Improved Unicode support for json.stringify ()
  • If the keys are the same, array.sort preserves the order
const array = [
 {key: 2.value: 'd'},
 {key: 1.value: 'a'},
 {key: 1.value: 'b'},
 {key: 1.value: 'c'},]; array.sort(...)/* [ {key: 1, value: 'a'}, {key: 1, value: 'b'}, {key: 1, value: 'c'}, {key: 2, value: 'd'}, ] */
Copy the code
  • Make JavaScript a superset of JSON (more details here)

What about ES5?

If ES6 is ES2015 and ES7 is ES2016, can you guess which year ES5 belongs to?

… You lost! (Unless you really know, but since I can’t hear you, I’m going to assume you’re wrong). ES5 is ES2009!

Before ES5, the last ES update was in 1999!

As you can see, updates from 97 to 99 were quite frequent, and for the next 16 years ES5 was the only update!

How do we explain this? Well, I think there are two factors.

The first is technical: “JavaScript sucks.” Honestly, it is. At the time, there were alternatives to JS: Java Applets, ActiveX and even Flash.

Not only were these technologies orders of magnitude faster than JS until 2011, but they also had a lot of functionality that we’re still struggling with for JS. Java has all the language features, such as classes and decorators, support for multithreading, OpenGL, sockets, etc. When Chrome and Google came in and announced the elimination of Java (and then Flash) in 2013, JS’s race to catch up with its competitors was already under way. Two years later, we had the ES6.

The second factor was economic: 2000 was the year the dotcom bubble burst. For the youngest of you, imagine bitcoin a few years ago, Internet startups were the same in the late ’90s. Startups added.com to the end of their names (just like mySuperStartup**. Ai ** now) in order to get lots of venture capital, until its value suddenly dropped in the 1920s. This is a very basic explanation, please refer to the Wikipedia article for a more detailed explanation.

The point is that the Internet no longer has the traction it needs to bring JS and Web-related technologies into focus. Later, with the rise of Amazon, Facebook and Google, the Web has a new reason for development, we choose JS is logical! Chrome was released in 2008 and became the most popular browser in 2014: the first year ES6 was released.

What’s missing? (Rejected proposal)

This is an exhaustive list of proposals that never made it to Phase 4. You can read more here: github.com/tc39/propos…

Object.observe

Initially it allowed JS to observe values in code:

var obj = {
  foo: 0.bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes); }); obj.baz =2;
// [{name: 'baz', object: <obj>, type: 'add'}]
Copy the code

This is a great feature, and you can obviously implement it in code (or polyfill), but implementing it in a browser requires a faster response guarantee (e.g. Angular uses a lot of observers). They were withdrawn because they could not achieve stable performance. More details are available here.

Cancelable promises

It goes without saying, and I’m sure this isn’t the only missing feature. The idea is to allow developers to cancel any Promise at any time.

The use cases are different, for example, to timeout the client during asynchronous operations, or if you have a tabbed-driven navigation system and the user clicks another TAB before loading the contents of the current TAB.

blöcks

I only mention this because I like the name and because it’s a nice feature similar to Go Routines or C# Tasks.

constBlock =await {|
  // This code is Async, but most importantly, executed in another thread
|};
Copy the code

other

There are also some interesting suggestions, such as callable constructors. Most were either withdrawn because of the original authors or rejected because of conflicts or overlaps with features in existing plans.

What’s next?

So far, there is some excitement in phases 0 to 3. I will highlight a few:

Observables (Stage 0)

Observe has been rejected, but the fight hasn’t stopped, Observable is a proposal for an improved API to eliminate the performance bottlenecks that Observe() has encountered.

Tc39. Es/proposal – ob…

String.ReplaceAll (Stage 3)

Github.com/tc39/propos…

Top-level Await (Stage 3)

Using Await requires you to be inside an asynchronous function, which means you can’t simply remove script tags containing Await, which doesn’t necessarily make sense, and restricts ES6 modules from running seamlessly in the browser. It also allows you to fetch or not to fetch.

// You can do this in a .js file:fetch(...) .then((res) = > something = res);
// But you can't do this unless you have a Async keyword
const res = awaitfetch(...) ;Copy the code

Github.com/tc39/propos…

Optional chain

Also known as the Elvis operator (that’s what I’m going to call it, you can’t stop me!) , which allows you to browse objects easily without causing errors:

const test = myObject && myObject.a;
// equivalent to
consttest = myObject? .a;Copy the code

It’s called the Elvis operator because the operator? : Looks like a profile of Elvis Presley.

The proposal also mentions the Nullish merge operator:

let x = 0 || 1; // x is 1 because 0 is falsy
let x = 0 ?? 1; // Since 0 is defined, x is 0
Copy the code

Conclusions and FAQs

How long! You can’t remember it all, that’s for sure, and frankly, neither can I! Hopefully this article has given you a comprehensive overview and encouraged you to reconsider your view of JavaScript! I’d like to start with the most common question:

Do I still need Babel?

Good question! Consider the most common features of JS (ES6 to ES9), which are fully implemented in browsers other than IE11. You might think, “Well, that’s not good enough.” Yes, not good enough, because you made a choice, so you should consider:

  • At the time of this writing, IE11 currently has 1.86% browser penetration. But not supporting IE11 doesn’t mean you’ll lose 1.86% of your audience, because you should consider that people can switch browsers and that the percentage of your target audience that actually uses IE11 is likely to be much lower (if you’re targeting younger people, for example) or tech enthusiasts.

  • Does supporting IE11 make you more money than you would lose by not supporting it? Developing for IE11 is not just about using Babel. You also need to test all the features on the browser, because even with Babel, some of them are broken, and then find fixes for all of them. The overhead may not be worth it.

Also, using acoustic functions can be up to three times faster than Babel’s compiled code, as highlighted by this benchmark: www.inovex.de/blog/node-j… Babel also increases package size and, finally, build time during development. So why use Babel in every project!

Babel reduces code execution speed, increases package size, and increases build time compared to using native functions. Do you really need it in every project?

Why add a new keyword like let instead of updating it?

You may be wondering why JS introduced let instead of improving the existing var keyword. The answer is simple: this is done to maintain backward compatibility. You don’t want to break the Web, do you? (I’m serious!)

What about Typescript?

Typescript rules are phase 3 proposals.

Where can I find more information?

Github and the official website are here:

Github.com/tc39/propos…

Tc39. Es /? Source = pos…

Welcome to pay attention to the front public number: front pioneer, free webpack from the entry to the advanced, the full series of tutorials.