The early editions: ES1 to ES5

The early editions: how JavaScript was written down

In 1996, Netscape gave JavaScript to Ecma, a standards group, so that every browser could follow the same rules. Ecma's committee for it is called TC39, and the rulebook it writes is called ECMAScript. Each new version of the rulebook is an edition, and people shorten the names: ES1 is the first edition, ES3 the third, and so on.

Today's JavaScript still contains every early edition. One short program can use a feature from each.

var price = 3;
console.log(price === 3);
console.log(JSON.stringify({ price: price }));
const total = price + 1;
console.log(total);

Line 1 uses var and a number, which were in ES1 from 1997. Line 2 uses ===, which arrived in ES3 in 1999, and prints true.

Line 3 uses JSON, from ES5 in 2009, and prints {"price":3}. Line 4 uses const, from ES2015, and line 5 prints 4.

Read each row of the table as: "this edition came out then, and added this."

ES1 to ES3: from Netscape's language to a standard

ES1, in June 1997, described JavaScript 1.1, the version in Netscape Navigator 3. It was small. Arrays had only four methods: join, reverse, sort and toString. And there was no short way to write an array or an object.

var prices = new Array(3, 4, 5);
var cart = new Object();
cart.price = prices[0];
var total = 0;
for (var i = 0; i < prices.length; i++) {
  total = total + prices[i];
}
console.log(prices.join(", ") + " = " + total);
console.log(typeof cart, cart.price);

Line 1 makes an array with new Array(3, 4, 5), because ES1 had no [3, 4, 5]. Line 2 makes an empty object with new Object(), because ES1 had no { } either. Line 3 adds a property to it.

Lines 5 to 7 add up the prices with a for loop. Line 8 prints 3, 4, 5 = 12. Line 9 prints object 3.

console.log is not part of any edition. It comes from the browser or Node.js, so we can use it to see results in every example.

ES1 also reserved words it planned to use later: class, const, import, export, extends, super, try, catch, switch and a few more. A reserved word can't be a variable name.

var class = 3;
console.log(class);

Line 1 tries to name a variable class. That is a SyntaxError even in sloppy code, the code without "use strict", so line 2 never runs.

var let = 3;
console.log(let);

let wasn't on ES1's list, so old pages used it as a name. Sloppy code must still allow that, and line 2 prints 3. The don't break the web lesson explains why.

ES2, in June 1998, changed only wording. ES3, in December 1999, described JavaScript 1.2 and added much of what you use every day.

var order = "tea: 3, cake: 4";
var match = /cake: (\d+)/.exec(order);
try {
  console.log(Number(match[1]).toFixed(2));
  console.log(match instanceof Array);
  null.price;
} catch (error) {
  console.log(error instanceof TypeError);
}

Line 1 stores some text. Line 2 uses a regular expression, a pattern for searching text, written between slashes. The brackets around \d+ capture the digits after cake: , so match[1] is "4".

Line 3 starts a try block. Line 4 formats the number with 2 decimals using toFixed, and prints 4.00. Line 5 checks the result with instanceof, and prints true.

Line 6 reads a property of null, which throws a TypeError. Lines 7 and 8 catch it, and line 8 prints true. Before ES3, there was no way to catch an error: it stopped the whole script.

1var order = "tea: 3, cake: 4";Run2var match = /cake: (\d+)/.exec(order);3try {4  console.log(Number(match[1]).toFixed(2));5  console.log(match instanceof Array);6  null.price;7} catch (error) {8  console.log(error instanceof TypeError);9}

Press Step to follow each ES3 feature, including the jump from line 6 into the catch block. This replays the example code; it isn't a view inside the JavaScript engine.

console.log(3 == "3");
console.log(3 === "3");
var prices = [3, 4];
console.log(prices.push(5));
console.log(prices.slice(1).join(" "));

Line 1 uses ==, from ES1, which turns the string "3" into a number before comparing, so it prints true. Line 2 uses ===, from ES3, which never changes types, so it prints false.

Line 3 uses an array literal, also from ES3. Line 4 calls push, which adds 5 and returns the new length, so it prints 3. Line 5 uses slice(1), which copies from position 1 on, and prints 4 5.

ES4: the edition that was never finished

After ES3, the committee started a much bigger fourth edition. ES4 aimed to make JavaScript better for very large programs. Its draft added:

• classes with public and private parts,
• type annotations, such as price: int, saying what kind of value a name holds,
• packages and namespaces, for grouping names, as in Java or C#.

package shop {
  public class Cart {
    private var price: int = 3;
    public function total(tax: int): int {
      return price + tax;
    }
  }
}

Line 1 puts the code in a package called shop. Line 2 makes a public class, and line 3 a private variable whose type is int, a whole number. Line 4 says that total takes an int and gives back an int.

Adobe used ideas from these drafts in ActionScript 3, the language of Flash. But browser makers disagreed. Microsoft and Yahoo said the changes were too big and could break the web, and they worked on a smaller update called ES3.1. In July 2008, the committee agreed to drop ES4.

function add(a: int, b: int): int {
  return a + b;
}
console.log(add(3, 1));

Line 1 uses ES4-style types. JavaScript never got them, so the script is a SyntaxError, and line 4 never runs.

ES3.1 was renamed ES5, so there is no ES4 at all. Many ES4 ideas came back later, in smaller pieces. Classes arrived in ES2015 and private fields in ES2022.

class Cart {
  #price = 3;
  total(tax) {
    return this.#price + tax;
  }
}
console.log(new Cart().total(1));

Lines 1 to 6 make a class. Line 2 makes a private field, #price, which only code inside the class can read. Line 7 makes a cart and prints 4.

Type annotations live on in TypeScript, a language from Microsoft that adds types to JavaScript and removes them before the code runs.

ES5: strict mode and JSON

ES5 came out in December 2009, ten years after ES3. It was careful: it added features without changing what old code did. Its best-known addition is strict mode, which you turn on with "use strict". Strict mode turns many silent mistakes into errors.

"use strict";
function setPrice() {
  pirce = 4;
}
try {
  setPrice();
} catch (error) {
  console.log(error.name);
}

Line 1 turns on strict mode. Line 3 has a typo: pirce instead of price. In sloppy code, this would quietly make a new global variable. In strict code, line 6's call throws, and line 8 prints ReferenceError.

Old pages don't contain "use strict", so they keep the old rules. Only code that asks for strict mode gets it. The strict mode lesson lists everything it changes.

ES5 also added JSON, built-in tools for JSON, a text format for data that servers and browsers send to each other.

var text = '{"item": "tea", "price": 3}';
var order = JSON.parse(text);
console.log(order.price + 1);
order.price = 4;
console.log(JSON.stringify(order));

Line 1 stores JSON text. Line 2 turns it into an object with JSON.parse, so line 3 can use order.price and print 4.

Line 4 changes the price. Line 5 turns the object back into text with JSON.stringify, and prints {"item":"tea","price":4}.

Before ES5, code often read JSON with eval, which runs any text as code. That works for real JSON, but it also runs anything else hidden in the text.

var text = '{"price": (function () { return 4; })()}';
console.log(eval("(" + text + ")").price);
try {
  JSON.parse(text);
} catch (error) {
  console.log(error.name);
}

Line 1 stores text that looks like JSON, but its price is a function call. Line 2 reads it with eval, which runs the function, and prints 4.

Line 4 tries JSON.parse on the same text. JSON allows only plain data, so it throws, and line 6 prints SyntaxError. If the text came from someone else, eval would have run their code.

ES5: property settings and new methods

Every property has a value and three settings. ES5 was the first edition that let your code choose them:

• writable: can the value be changed?
• enumerable: do loops such as for…in see it?
• configurable: can the property be deleted, or its settings changed?

Together, the value and the settings are called a property descriptor.

var cart = {};
Object.defineProperty(cart, "price", {
  value: 3,
  writable: false,
  enumerable: true,
});
cart.price = 4;
console.log(cart.price);
console.log(JSON.stringify(Object.getOwnPropertyDescriptor(cart, "price")));

Line 1 makes an empty cart. Lines 2 to 6 add price with Object.defineProperty: its value is 3, line 4 makes it not writable, and line 5 makes it enumerable.

Line 7 tries to change it to 4. In sloppy code, the write is silently ignored, so line 8 prints 3. Line 9 reads the descriptor back. configurable is false, because defineProperty sets every setting you leave out to false.

1var cart = {};Run2Object.defineProperty(cart, "price", {3  value: 3,4  writable: false,5  enumerable: true,6});7cart.price = 4;8console.log(cart.price);9console.log(JSON.stringify(Object.getOwnPropertyDescriptor(cart, "price")));

Press Step and watch cart.price beside line 3 stay 3 after line 7. This replays the example code; it isn't a view inside the JavaScript engine.

ES5 also made getters standard: a property whose value is worked out by a function each time you read it.

var cart = {
  price: 3,
  get total() {
    return this.price + 1;
  },
};
console.log(cart.total);
cart.price = 5;
console.log(cart.total);

Lines 3 to 5 make a getter called total. Line 7 reads cart.total, which runs the getter and prints 4. Line 8 changes the price, so line 9 prints 6.

Line 5 ends with a comma, even though nothing follows it. ES3 didn't allow that comma in object literals. ES5 does.

var menu = Object.freeze({ tea: 3 });
menu.tea = 4;
menu.cake = 5;
console.log(menu.tea, menu.cake);
console.log(Object.isFrozen(menu));

Line 1 freezes the menu: no property can change, and none can be added. Lines 2 and 3 are silently ignored, so line 4 prints 3 undefined, and line 5 prints true.

ES5 also added many methods that are now everyday tools. They take a function and run it on each item.

var prices = [3, 4, 5];
var doubled = prices.map(function (p) { return p * 2; });
var cheap = prices.filter(function (p) { return p < 5; });
var total = prices.reduce(function (sum, p) { return sum + p; }, 0);
console.log(doubled.join(" "), cheap.join(" "), total);
console.log(prices.indexOf(4), Array.isArray(prices), "  tea ".trim());

Line 2 doubles each price with map. Line 3 keeps the prices under 5 with filter. Line 4 adds them up with reduce, starting from 0. Line 5 prints 6 8 10 3 4 12.

Line 6 prints 1 true tea: indexOf finds 4 at position 1, Array.isArray confirms the array, and trim removes the spaces. The functions use the function keyword, because arrow functions didn't exist until 2015.

Harmony and ES2015: smaller steps

When ES4 was dropped in 2008, its bigger ideas went into a plan called Harmony. Harmony kept the good parts, such as classes and modules, but built them from what JavaScript already had, and left out types and packages.

Harmony became the sixth edition, ES6. While it was being finished, the committee decided to name editions by year, so ES6 was published in June 2015 as ES2015. Since then, a smaller edition comes out every June.

function Cart(price) {
  this.price = price;
}
Cart.prototype.total = function (tax) {
  return this.price + tax;
};
var cart = new Cart(3);
console.log(cart.total(1));
console.log(typeof Cart);

Lines 1 to 3 make a constructor function, Cart. Lines 4 to 6 add total to Cart.prototype, the object every cart shares its methods from.

Line 7 makes a cart with new. Line 8 prints 4, and line 9 prints function.

class Cart {
  constructor(price) {
    this.price = price;
  }
  total(tax) {
    return this.price + tax;
  }
}
const cart = new Cart(3);
console.log(cart.total(1));
console.log(typeof Cart);

Lines 1 to 8 make the same thing with class. Lines 2 to 4 are the constructor, and lines 5 to 7 are the total method.

Line 10 prints 4, as before. Line 11 prints function too: a class is still a function with a prototype, the same parts the ES5 version used. This is the Harmony idea: new syntax, built on the old pieces.

The modern JavaScript lesson goes through what each yearly edition added.

Reading old code by its edition

Old code often shows when it was written. Libraries from the 2000s and early 2010s were written for browsers that only had ES3, so they used patterns that look strange today.

var shop = (function () {
  var count = 0;
  return {
    add: function () {
      var self = this;
      count = count + 1;
      return self === shop ? count : -1;
    },
  };
})();
console.log(shop.add(), shop.add());
console.log(typeof JSON === "undefined" ? "load a JSON library" : "JSON is built in");

Lines 1 and 10 wrap everything in a function that runs at once. Before ES2015 modules, this was the way to keep count private. Line 5 saves this in self, which old code did before arrow functions.

Line 11 calls add twice and prints 1 2. Line 12 checks whether JSON exists, as code did when browsers older than ES5 were still common. Today it prints JSON is built in.

Read each row of the table as: "if you see this in old code, it tells you this."

The playground shows one small job, picking the prices under 5 and adding them up, written with the tools of each edition. Pick an edition. The highlighted lines use something that edition added. Guess first: do all four print the same line?

1var prices = new Array(3, 4, 5);2var picked = "";3var total = 0;4for (var i = 0; i < prices.length; i++) {5  if (prices[i] < 5) {6    picked = picked + prices[i] + " ";7    total = total + prices[i];8  }9}10console.log(picked + "= " + total);

All four print 3 4 = 7. ES1 needs new Array and string joining with +. ES3 adds the array literal and push. ES5 replaces the loop with filter and reduce. ES2015 makes it short with const, arrow functions and a template literal.

Common mix-ups

Most mix-ups come from the missing ES4, and from thinking today's basics were there from the start.

• "ES4 was published, then replaced." No. Its draft was dropped in 2008. ES5 comes straight after ES3.
• "[3, 4] and { price: 3 } were always there." No. They became standard in ES3. ES1 used new Array and new Object.
• "ES1 had try and catch." No. ES1 only reserved those words. ES3 made them work.
• "Strict mode changed how all code runs." No. Only code that says "use strict" gets it, so old pages kept working.
• "JSON was part of JavaScript from the start." No. It became built in with ES5. Before that, code used eval or a library.
• "ES2015 classes replaced prototypes." No. A class is a function with a prototype, built from the same parts.
• "ES6 and ES2015 are different editions." No. They are two names for the same sixth edition.

The table below puts three of these side by side. Read each row as: "people often think this, but this is true."

Practice exercises

Every program below is a sloppy classic script. For each one, find the feature and ask which edition added it, and what it does. Guess first, then run it.

console.log(3 == "3", 3 === "3", null == undefined, null === undefined);

console.log(3 == "3", 3 === "3", null == undefined, null === undefined);

var import = 3;
console.log(import);

var importCount = 3;
console.log(importCount);

var order = JSON.parse('{"price": 3, "items": ["tea", "cake"]}');
order.items.push("juice");
console.log(JSON.stringify(order));

var order = JSON.parse('{"price": 3, "items": ["tea", "cake"]}');
order.items.push("juice");
console.log(JSON.stringify(order));

var cart = {};
Object.defineProperty(cart, "price", { value: 3 });
cart.price = 4;
console.log(cart.price, Object.keys(cart).length);

var cart = {};
Object.defineProperty(cart, "price", { value: 3, writable: true, enumerable: true, configurable: true });
cart.price = 4;
console.log(cart.price, Object.keys(cart).length);

var prices = [3, 4, 5];
var picked = [];
for (var i = 0; i < prices.length; i++) {
  if (prices[i] > 3) {
    picked.push(prices[i] * 2);
  }
}
console.log(picked.join(" "));

var prices = [3, 4, 5];
var picked = prices
  .filter(function (p) { return p > 3; })
  .map(function (p) { return p * 2; });
console.log(picked.join(" "));

function Cart(price) {
  this.price = price;
}
Cart.prototype.total = function (tax) {
  return this.price + tax;
};
var cart = new Cart(4);
console.log(cart.total(2));

class Cart {
  constructor(price) {
    this.price = price;
  }
  total(tax) {
    return this.price + tax;
  }
}
const cart = new Cart(4);
console.log(cart.total(2));

Check your understanding

For each question, ask which edition the feature came from, and whether the code is sloppy or strict. Each answer explains why it's right or wrong.

Key takeaways

Every early edition is still inside today's JavaScript. Knowing where each feature came from helps you read old code and understand why the language looks the way it does.

• ECMAScript is the standard for JavaScript, written by Ecma's TC39 committee. Each version is an edition.
• ES1 (1997) was small: no [3, 4], no { price: 3 }, no try. It reserved words like class for later.
• ES3 (1999) added regular expressions, try and catch, ===, instanceof, and array and object literals.
• ES4 was dropped in 2008 and never published. Its small fixes became ES5, and its big ideas went into Harmony.
• ES5 (2009) added strict mode, JSON, property settings with Object.defineProperty, getters, and methods like map and filter.
• Harmony became ES2015. Its classes are built from the same functions and prototypes as ES5 code.
• Since ES2015, a new edition comes out every June.

Coming next: How JavaScript evolves. It explains how TC39 turns an idea into a feature today, one stage at a time.