A short history of JavaScript

From a quick first version to a standard

The previous lesson, Why JavaScript?, told the short version. JavaScript began at a company called Netscape in 1995. Brendan Eich built it quickly. It got its name while another language, Java, was very popular. This lesson tells that story more slowly.

The goal is not to memorize dates. The goal is to understand names you will see often, like ES5, ES2015, and ES2023. You will also learn why browsers add new parts of the language one at a time.

Here is the main idea in one sentence. JavaScript is the everyday name of the language. ECMAScript is the name of the standard that writes down its core rules. A standard is an official document that everyone agrees to follow.

Browsers follow that standard. Other programs that run JavaScript, called runtimes, follow it too. Each one also adds its own extra tools around the language. The next lesson, Engines, runtimes & hosts, explains those extra tools. This lesson stays with the history of the language.

In this lesson you will:

• click through a timeline of the language,
• compare older ES5-style code with newer ES2015-style code that does the same job,
• sort features by the edition that added them,
• and run real feature checks in your own browser.

In the mid-1990s, the web was young. Most pages were documents to read, like pages in a book. Netscape Navigator was one of the browsers people used to read them.

Netscape wanted pages to do more. For example, a page could:

• check a form before sending it,
• react when someone clicks,
• and let ordinary page authors add small behaviors, without writing a big program in Java.

Brendan Eich built the first version of the language in about ten days in 1995. Its name changed twice. First it was called Mocha. Then it was renamed LiveScript. Finally it became JavaScript.

The final name was a business choice. Java was a very popular language at the time. Netscape was also working with Sun Microsystems, the company that made Java. That is why people still ask if JavaScript is related to Java. It is not. JavaScript is not a smaller Java. It is its own language.

Netscape was not the only company making a browser. In 1996, Microsoft added its own copy of the language to Internet Explorer. Microsoft called it JScript. Now two companies each had their own version.

That was a risk. If the two versions grew apart, page authors would need one script for Netscape and a different script for Internet Explorer.

To prevent that, Netscape gave the language to Ecma International, a group that writes standards. Inside Ecma, a committee called TC39 looks after the language today. A committee is a group of people who meet to make decisions together.

In June 1997, Ecma published the first edition of the standard, called ECMAScript 1. An edition is one published version of the standard.

Why a new name? "JavaScript" was a trademark: a brand name that one company owned. The standard needed a neutral name that any company could use. That is why official documents say ECMAScript, while developers usually say JavaScript.

Each row below is one name from this story. Read across to see what it means, and then a simpler way to say it.

Two more editions came quickly: ES2 in 1998 and ES3 in 1999. ES3 then stayed the main edition for about ten years.

Work started on a very big ES4. It tried to change too much at once, and it was given up in 2008. After that, TC39 chose a more practical path. It improved the language in smaller steps that browsers could really build.

ES5 came out in 2009. It cleaned up the language after the long ES3 years. It added:

• strict mode, a setting you turn on by writing "use strict". It turns some silent mistakes into errors.
• built-in support for JSON, a text format for data (explained below).
• array helpers such as forEach, map, and filter. Each one runs a function for every item in an array.
• Object.defineProperty, a tool for setting up one property of an object in detail.

ES5.1 came in 2011. It was a small edition. It mostly fixed the wording, so the text matched the international ISO version of the standard.

1var orderText = '{"item":"tea","count":2}';2var order = JSON.parse(orderText);3console.log(order.item);

JSON is a text format for sending simple data between programs. It looks like a JavaScript object written inside a string.

Line 1 stores an order as JSON text. Line 2 uses JSON.parse, which ES5 added. It turns the text into a real object. Line 3 reads the object's item property and prints tea. Web apps still use JSON everywhere, so this ES5 tool is still useful today.

ES2015 was a much bigger update. People often call it ES6, because it was the sixth edition. It added things you will use all the time:

• let and const, for making variables,
• arrow functions, a shorter way to write a function,
• classes, a way to describe many similar objects,
• template literals, strings that can hold values inside ${},
• modules, for splitting code into separate files,
• promises, for work that finishes later,
• and destructuring, for copying values out of an object into variables.

You don't need to learn all of these today. Just notice what changed. JavaScript kept everything it could already do. It also gained clearer ways to write common things.

1const profile = { name: "Asha", city: "Pune" };2const { name } = profile;3console.log(name);

Line 1 makes a small profile object. Line 2 uses destructuring. This ES2015 syntax copies the name property into a new variable, also called name. Line 3 prints Asha.

You could write profile.name instead. Both read the same value. Destructuring is just shorter when you need the value many times.

1var makeGreeting = function (name) {2  var message = "Hello, " + name + "!";3  return message;4};5 6console.log(makeGreeting("Maya"));Run

The replay is simple on purpose. In both styles, the code:

• takes a name,
• builds the same greeting,
• and prints the same result.

ES2015 did not swap JavaScript for a new language. It gave developers nicer ways to do things they already did.

1const cart = ["tea", "milk"];2var labels = cart.map(function (item) {3  return item.toUpperCase();4}).join(", ");5console.log(labels);

Line 1 makes a cart. Lines 2 and 3 use map to make an uppercase label for each item. map runs a function once for each item. A function that you hand to another function like this is called a callback. Line 4 uses join to put the labels into one string. Line 5 prints TEA, MILK.

var and the function callback are an older style. You will still see them in articles and in real projects. Newer code might use const and an arrow function instead. The work done on the array is the same.

After ES2015, TC39 started publishing a new edition every year. Since 2016, each edition gathers the features that are finished and ready. It usually comes out in June. So the language gets small, steady updates, instead of one huge update every ten years.

Here are a few features, by the edition that added each one. You don't need to know them yet. Some of them appear in the examples below.

• ES2016: Array.prototype.includes, and ** for powers (2 ** 3 is 8).
• ES2017: async functions and await, for waiting on slow work.
• ES2020: optional chaining ?., nullish coalescing ??, and BigInt for very large whole numbers.
• ES2022: top-level await, .at(), and public class fields.
• ES2023: toSorted and findLast.

Array.prototype.includes is the full name of the includes method that every array has. You will see full names like this in documentation and in feature checks.

1const cart = ["tea", "milk"];2const hasTea = cart.includes("tea");3console.log(hasTea);

Line 1 lists two cart items. Line 2 uses includes, which ES2016 added to arrays. It asks: is "tea" in the list? Line 3 prints true.

Most new features look like this. They make one ordinary task a little easier. You don't have to learn a new language.

1const user = { name: "Asha" };2const city = user.profile?.city ?? "No city";3console.log(city);

Line 1 makes a user with no profile property. Line 2 uses two newer tools:

• ?. is optional chaining. If user.profile is missing, it stops and gives undefined, instead of throwing an error.
• ?? is nullish coalescing. If the left side is null or undefined, it uses the right side, "No city".

Line 3 prints No city. Use this for data that may really be incomplete. Don't use it to hide a bug when a value should always be there.

1const cart = ["tea", "milk"];2console.log(cart.at(-1));

Line 1 makes the same cart. Line 2 uses at(-1), an ES2022 method. A negative number counts from the end, so -1 means the last item. Line 2 prints milk.

Before at, you would write cart[cart.length - 1]. Both work. at(-1) is often easier to read.

Beginners often ask: "Which JavaScript version does my browser support?" A smaller question is more useful: "Does this browser support the feature I want to use?"

Here is why. An edition is one version of the written standard. It is not a switch that a browser turns on all at once. Each browser team adds features on its own schedule. People also update their browsers at different times. So a browser can have some features from an edition and not others.

Checking for one feature in code is called feature detection. The playground below runs six checks in your browser. Each check uses one of two tools:

• typeof Array.prototype.at === "function" asks: is at a function I can call? typeof gives the type of a value as text, such as "function".
• "toSorted" in Array.prototype asks: do arrays have a method named toSorted? in checks whether an object has a property with that name.

1const checks = {2  arrayAt: typeof Array.prototype.at === "function",3  toSorted: "toSorted" in Array.prototype,4  objectGroupBy: typeof Object.groupBy === "function",5  structuredClone: typeof structuredClone === "function",6  replaceAll: "replaceAll" in String.prototype,7  setUnion: typeof Set.prototype.union === "function",8};

The step-through below runs the same six checks, one at a time. Each answer comes from this browser. Another visitor, with another browser, may get different answers.

1const supportsAt = typeof Array.prototype.at === "function";Run2const supportsToSorted = "toSorted" in Array.prototype;3const supportsGroupBy = typeof Object.groupBy === "function";4const supportsStructuredClone = typeof structuredClone === "function";5const supportsReplaceAll = "replaceAll" in String.prototype;6const supportsSetUnion = typeof Set.prototype.union === "function";7console.log(supportsToSorted);

One check is different. structuredClone makes a full copy of a value. You call it from JavaScript, but it is not part of ECMAScript. The browser or runtime adds it as an extra tool.

This leads into the next lesson. There you will meet the engine, the part that runs the language, and the host, the browser or runtime around the engine that adds extra tools.

Where you’ll use this

History is useful when you read code, when you choose what to write, and when code fails in one browser.

Older tutorials often use var and the function keyword. Newer examples often use const, arrow functions, template literals, and optional chaining. If you know the timeline, you can tell the old style from the new style. Both still work.

When you use a newer method, plan a fallback. A fallback is a second way to do the same job, for browsers that don't have the new method. In the example below, both ways sort a copy, so the original scores keep their order.

Line 2 holds the answer from a feature check, like the ones above. Here it is set to false, so the code takes the fallback way.

1const scores = [8, 3, 5];2const canUseToSorted = false;3const sorted = canUseToSorted4  ? scores.toSorted((left, right) => left - right)5  : [...scores].sort((left, right) => left - right);6console.log(scores.join(", "));7console.log(sorted.join(", "));

Line 1 makes scores. Line 2 stands for the result of a feature check. Lines 3 to 5 pick one of two ways to sort. The ? and : work like a short if/else:

• If canUseToSorted is true, line 4 runs. It uses toSorted.
• If it is false, line 5 runs. [...scores] copies every item into a new array. Then sort sorts that copy.

On both lines, (left, right) => left - right tells the sort to put smaller numbers first. Lines 6 and 7 print the original, 8, 3, 5, and then the sorted copy, 3, 5, 8.

1const scores = [8, 3, 5];2const sorted = scores.toSorted((left, right) => left - right);3console.log(scores.join(", "));4console.log(sorted.join(", "));

Line 1 makes a list of scores. Line 2 uses toSorted, from ES2023, to make a sorted copy. Line 3 prints 8, 3, 5. Line 4 prints 3, 5, 8.

This difference matters in a real page. sort() changes the original array. toSorted() leaves the original as it was and gives you a new, sorted array.

1const cart = new Set(["tea"]);2const extras = new Set(["milk", "tea"]);3const items = typeof cart.union === "function"4  ? cart.union(extras)5  : new Set([...cart, ...extras]);6console.log([...items].join(", "));

A Set is a list that keeps each value only once. Lines 1 and 2 make two sets. Both of them hold "tea".

Lines 3 to 5 join the two sets. If cart has the new ES2025 union method, line 4 uses it. If not, line 5 copies both sets into one new set. Line 6 prints tea, milk. The repeated tea appears only once. A fallback makes sense here because union is very new.

Each row of the table below is a situation you may meet. Read across: first the situation, then a better question to ask, then what to do. MDN and caniuse are websites that show which browsers support each feature.

You will see this most when you copy code from documentation. A page might show const names = users.map(user => user.name). You know that const and arrow functions came in ES2015. So you can tell this is newer syntax for ordinary steps: store a value, call a function, and return a result.

Build tools are programs that prepare your code before it goes to the browser. Some of them can rewrite new syntax as older syntax. But they can't always add a missing method. Rewriting an arrow function as a normal function is easy. Adding toSorted to a browser that doesn't have it is a different job. So check your build tool's settings and the exact feature.

Common misconceptions

Each row of the table below is a name people often mix up. Read across: first the common mistake, then what the name really means.

Answer each question from memory first. Then read every explanation. Wrong answers help too: each one names a common mix-up.

Key takeaways

• JavaScript began at Netscape in 1995. Brendan Eich built the first version quickly, so web pages could run small scripts.
• ECMAScript is the standard that writes down the core rules of the language. TC39 is the committee that updates it.
• ES5, from 2009, cleaned up the language. ES2015, also called ES6, was a big update with lots of new syntax.
• Since 2016, a new, smaller edition comes out every year, usually in June.
• Check support one feature at a time. Ask whether the browser supports the exact method, syntax, or tool you plan to use.

Up next: Engines, runtimes & hosts.