Gao Xiang, the front-end engineer of The Cloud service team of Wedoctor, loves food, technology and thrashing.

I don’t know if you’ve noticed that in the process of building our application, we have the option to target the ES version. We can usually select ES3, ES5, ES6 or even the latest ES10, but we don’t have the ES4 version.

ES4 brief

According to Wikipedia, ES4 was drafted in February 1999 and was scheduled for completion in August 2008. However, the development process is not smooth, ES4 put forward a lot of amazing new features, such as: classes, strict types, modules, etc., there is a potential to reform JavaScript, for the JS ecology at that time, the compatibility cost has become very high.

Due to being too aggressive, browser manufacturers were deeply divided, led by Yahoo, Microsoft, Google, large companies opposed to a large upgrade of JavaScript, advocating small changes; Mozilla, led by JavaScript creator Brendan Eich, is sticking with the current draft.

Prior to the release of ES4 in July 2008, ECMA held an interim meeting and decided to terminate development of ES4 and scrap the release. A few of the improvements involved were released as ES3.1 (later renamed ES5), and other radical ideas were put into a later release (ES.Next), codenamed Harmony due to the mood of the conference.

What is in ES4 draft

Classes (Classes)

Classes were eventually implemented in ES6, but in fact there was a class definition in the earliest DRAFT of ES4:

class Bar {
  var val = 1
  const pi = 3.14
  // A function
  function f(n) {
 return n + val * 2  }  // Getters and setters  function set foo(n) {  val = n  }  function get foo() {  return val  } } Copy the code

You’ll notice a slight difference between ES4’s syntax and ES6’s class syntax, and another surprise is the absence of this.

ES4 also provides the following keywords for classes:

  • static
  • final
  • private,protected,public
  • prototype

Interfaces

ES4 introduced the concept of interfaces, much like the Typescript we use today:

interface MyInterface {
  function foo();
}
Copy the code

Strict typing

Strict type checking was introduced in ES4:

function add(a: int, b:int): int {
  return a + b;
}
Copy the code

It also has typescript-like union types:

// typescript
var a: number | string;
// es4
var a: (number, string)
Copy the code

ES4 also has generics:

class Wrapper<T> {
  inner: T
}
Copy the code

Like keywords

By default, types in ES4 must be exact types, but by using the like keyword, you can reduce restrictions:

function getCell(coords: like { x: int, y: int }) {
}
Copy the code

So it is possible that types in ES4 are based on nominal subtypes rather than structural subtypes.

  • Nominal subtypes: In which the type declaration is identical only if it has the same name, the subtype relationship must be explicitly declared. C, Java and other languages fall into this category.
  • Structural subtypes: The structural composition of the two types determines whether one type is a subtype of the other. Typescript falls into this category

New types

We already have Boolean, objetc, array, Number, BigInt, and many other basic types in the ES version, but ES4 draft also plans to introduce:

  • byteByte type
  • inT the integer
  • unitUnsigned integer
  • doubleA double precision floating point type
  • decimalExact numerical type

But in today’s ES development plan, only the decimal type might be implemented in the future, and it might end up looking like this:

const allowance = 1.50m
Copy the code

In fact, the m suffix also exists in ES4, used to denote price.

Letter of credit (letter of letter)

// ES4
const hi = """Hello my name is"Evert"""";
// ES6
const hi = `Hello my name is "Evert"`;
Copy the code

Is there a python smell? Of course, ES6 introduced new template strings that look a little better.

Packages (bag)

Packages are a bit like our modules today and can be imported in other files, but unlike ES6 modules, the command space for packages is more like a global namespace, a bit like Java.

package com.evertpot {
  // Private
  internal const foo = 5;
  class MyClass { 
  }
} Copy the code

Use this class as follows:

const myObj = com.evertpot.MyClass;
/ / or
import * from com.evertpot;
const myObj = MyClass;
Copy the code

Generic functions

Using a generic keyword to declare a generic function is similar to, but not exactly the same as, “overloaded functions” in Typescript:

class Foo {
  generic function addItem(x);
  function addItem(x: int) {
  }
  function addItem(x: number) {
 } } Copy the code

What makes ES4 function overloading even more powerful is that overloading happens at run time, whereas Typescript happens at compile time.

E4X

The full name of E4X stands for ECMAScript for XML. Here is the E4X code:

const myClass = 'welcome';
const name = 'Evert';
const foo = <div class={myClass}>{"Hello" + name }</div>;
Copy the code

Look familiar? I suspect JSX is the reference to E4X 😆. Although ES4 was never released, E4X worked in Firefox until it was removed in Firefox 10.

More features

There are many other features in ES4, such as let const block-level scope, Generator yield asynchronous schemes, and more.

Afterword.

In fact, many of the concepts in ES4 are quite radical at the moment. For the JS ecosystem at that time (IE5 era), the word “subversive” is not an overstatement, but many of the radical features remain and are finally implemented in ES6. Throughout this history, if ES4 had been implemented, the JS ecosystem would have looked different today.

In this paper, translation from https://evertpot.com/ecmascript-4-the-missing-version/