cf.completefrontendCode editorOpen lab
THE JAVASCRIPT FIELD GUIDE

A short history of JavaScript

Follow JavaScript from Netscape’s ten-day prototype to ECMAScript, ES5, ES2015, yearly releases, and feature-by-feature browser support.

By the end, you’ll be able to
  • 01
    Tell the origin storyPlace Netscape, Brendan Eich, JScript, Ecma, and TC39 in order.
  • 02
    Decode edition namesKnow why ES5, ES2015, and ES6 can appear in the same conversation.
  • 03
    Check real supportUse feature detection instead of guessing from a version label.

From prototype to standard

The previous lesson, Why JavaScript?, gave you the headline: JavaScript began at Netscape in 1995, was built quickly by Brendan Eich, and was renamed during the Java hype. This lesson slows that story down. The goal is not trivia. The goal is to understand why modern JavaScript has edition names like ES5, ES2015, and ES2023, while browsers still ship features one by one.

A useful one-line definition: JavaScript is the common name of the language; ECMAScript is the standard that defines its core rules. Browsers and other runtimes implement that standard, then add their own surrounding APIs. The next lesson, Engines, runtimes & hosts, will explain those surroundings in detail. Here we stay with the language’s timeline.

The history explains today

When someone says “this is ES6 code,” they usually mean “this uses features standardized in ES2015,” not that your browser switches into one giant ES6 mode. Modern compatibility is more like asking, “Does this browser support this feature?”

You will click through a timeline, compare ES5-style code with ES2015-style code that does the same job, sort features by era, and run real feature checks in your own browser.

Netscape & Brendan Eich

INTERACTIVE

In the mid-1990s, the web was young and mostly made of documents. Netscape Navigator was one of the browsers people used to read those pages. Netscape wanted pages to become more interactive: validate a form before submitting it, respond to clicks, and let non-specialist web authors add behavior without writing a large Java program.

Brendan Eich created the first version in about ten days in 1995. It was first called Mocha, then LiveScript, and finally JavaScript. The final name was a business decision made while Java was fashionable and Netscape had a partnership with Sun Microsystems. That naming story is why people still ask whether JavaScript is related to Java. It is not a smaller Java; it is its own language.

Step through JavaScript's timeline
Mocha, then LiveScript, then JavaScriptBrendan Eich builds the first version at Netscape in about ten days for Netscape Navigator 2.
Step 1 of 81995

1995: Brendan Eich builds the first version at Netscape in about ten days for Netscape Navigator 2.

A guided timeline. Use the year buttons or Next idea: each milestone explains why the language needed the next one.
Real-life analogyA standard is a shared rulebook

Imagine every soccer team using a different rulebook. One team allows hands, another changes the goal size, and a third counts two points for a fancy kick. That would be chaos. The web needed a shared rulebook so the same script could work in different browsers.

In real life: The rulebook for a sport
In JavaScript: The ECMAScript specification
In real life: The rules committee
In JavaScript: Ecma International and TC39
In real life: Teams playing by those rules
In JavaScript: Browser engines and runtimes implementing JavaScript
In real life: A referee checking fair play
In JavaScript: Compatibility tests and real websites exposing differences

Where the analogy stops: Sports teams do not invent physics, but browser vendors do engineering work to implement a feature. The rulebook analogy explains agreement, not the hard work of building an engine.

The ECMAScript standard

RULEBOOK

Netscape was not the only company building a browser. In 1996, Microsoft shipped a compatible language in Internet Explorer called JScript. Now the web had two major implementations. If they drifted apart, authors would have to write one script for Netscape and another for Microsoft. Netscape submitted the language to Ecma International, a standards organization. The committee responsible today is called TC39.

In June 1997, Ecma published the first edition of the standard: ECMAScript 1. The name is deliberately neutral. “JavaScript” was a trademarked brand name, but the web needed a standard name any implementer could use. That is why official documents say ECMAScript while everyday developers say JavaScript.

JavaScript name vs ECMAScript standard
TermWhat it meansBeginner translation
JavaScriptThe common language name used by developers and browsersWhat you write in .js files
ECMAScriptThe standardized core language defined by Ecma and TC39The shared rulebook
TC39The committee that evolves the ECMAScript standardThe rules committee
ImplementationA browser or runtime’s working version of those rulesA team playing by the rulebook

ES2 followed in 1998, and ES3 in 1999. ES3 became the stable baseline for many years. A very ambitious ES4 effort was eventually abandoned in 2008, which led to a more practical path: improve the language in steps that browsers could actually ship.

Fun fact

“ES” simply means ECMAScript. So ES5 means ECMAScript 5, and ES2015 means the ECMAScript edition published in 2015.

ES5 and ES2015: two big landmarks

STEP THROUGH

ES5, published in 2009, cleaned up and modernized the language after the long ES3 era. It added strict mode, standardized JSON support, brought array helpers such as forEach, map, and filter, and included tools such as Object.defineProperty. ES5.1 followed in 2011 as a small alignment edition.

ES2015 was a much larger update. You will often hear it called ES6 because it was the sixth edition. It introduced syntax you will use constantly: let, const, arrow functions, classes, template literals, modules, promises, destructuring, and more. You do not need to master all of those today. For now, notice the shape of the change: JavaScript kept its old abilities but gained clearer ways to write common ideas.

Same task, ES5 style and ES2015 style
Step 0 of 4Ready
Your turn: follow the blue line

Switch between ES5-style and ES2015-style syntax. Predict the output first: both versions should print the same message.

Running in
  1. script
Next: line 6
Click the blue line to take the next stepPop out in the code editor (opens in a new tab)JavaScript
var makeGreeting = function (name) {  var message = "Hello, " + name + "!";  return message;}; 
CallStoreChangeResultRun = next line. Ran = already executed.
Recent returnsNothing yet. Start with the blue line.
Choose the syntax style
Choose the name passed to line 6

Changing a setting starts a fresh recorded run. The result should stay identical for the same name.

A guided replay recorded from real JavaScript calls, not an engine debugger. Step follows executed statements; Back reviews a snapshot. Reset starts a fresh run.

The replay is deliberately simple. Both versions call a function with a name, build the same greeting, and print the same result. ES2015 did not replace JavaScript with a different language; it gave developers nicer tools for tasks they were already doing.

A small ES5-era patternPop out in the code editor (opens in a new tab)JavaScript
var total = [1, 2, 3].map(function (n) {  return n * 2;}).join(", ");console.log(total);

This code uses var and a function callback, an older style you will still see in articles and production code. Modern code might use const and an arrow function, but the underlying array idea is the same.

Yearly releases

SORT

After ES2015, the language moved to a regular yearly rhythm. Since 2016, each edition has collected finished features into a new standard edition, usually published in June. That means smaller, steadier updates instead of one enormous release every decade.

Real-life analogyYearly editions are like phone software updates

Instead of waiting forever for one giant upgrade, modern JavaScript gets a steady stream of smaller improvements. That keeps the language moving without making every year feel like a new language.

In real life: A phone gets a yearly operating-system update
In JavaScript: ECMAScript gets a yearly edition
In real life: Small features arrive regularly
In JavaScript: Array includes, async functions, optional chaining, .at(), toSorted
In real life: Your older phone may get some updates later
In JavaScript: A browser may implement a feature after the standard edition

Where the analogy stops: Phone updates come from one vendor for one device family. ECMAScript features are standardized by TC39, then implemented by many independent engines on different schedules.

A few examples: ES2016 added Array.prototype.includes and the exponentiation operator **. ES2017 included async functions and await. ES2020 standardized optional chaining ?., nullish coalescing ??, and BigInt. ES2022 included top-level await, .at(), and public class fields. ES2023 added methods such as toSorted and findLast.

Which era introduced it?
  • Mocha becomes LiveScript, then JavaScript
  • ECMAScript 1 standard
  • "use strict";
  • Built-in JSON.parse and JSON.stringify
  • const double = n => n * 2;
  • Template literals: Hello, ${name}!
  • [1, 2, 3].includes(2)
  • user.profile?.name ?? "Guest"
  • items.toSorted()
Try it yourself
0 of 9 correct

Sort each milestone or feature into its era. Wrong answers explain the date, so use this as a study game.

Choose a category for every card. You can change an answer at any time; Reset clears them all.

Versions vs features

REAL BROWSER

Beginners often ask, “Which JavaScript version does my browser support?” The more useful question is narrower: Does it support the feature I want to use? Browsers do not flip one switch from “ES2022 off” to “ES2022 on.” Engines implement individual features as they become ready.

Real-life analogyAsk the restaurant for the dish, not the menu edition

If you are hungry for pasta, you ask whether the restaurant serves pasta. You usually do not ask which menu edition the host printed. JavaScript compatibility works the same way: check the feature that matters.

In real life: Do you serve pasta?
In JavaScript: Does this browser support toSorted?
In real life: Which printed menu edition is this?
In JavaScript: Which JavaScript version is this?
In real life: A chef can add one dish before reprinting everything
In JavaScript: An engine can ship one feature before another

Where the analogy stops: Restaurants choose dishes freely. Browser engines still follow the ECMAScript standard and compatibility expectations; they cannot redefine a feature however they like.

Ask your browser which features it supports
Feature checksPop out in the code editor (opens in a new tab)JavaScript
const checks = {  arrayAt: typeof Array.prototype.at === "function",  toSorted: "toSorted" in Array.prototype,  objectGroupBy: typeof Object.groupBy === "function",  structuredClone: typeof structuredClone === "function",  replaceAll: "replaceAll" in String.prototype,};
Your browser's answersnot checked
Array.prototype.at

typeof Array.prototype.at === "function"

A modern array method for reading by index, including negative indexes.

Run check
Array.prototype.toSorted

"toSorted" in Array.prototype

A copying sort method from ES2023: it sorts without changing the original array.

Run check
Object.groupBy

typeof Object.groupBy === "function"

A newer grouping helper. Some older browsers may not have it yet.

Run check
structuredClone

typeof structuredClone === "function"

A web/API helper available in modern browsers and runtimes, not an ECMAScript feature.

Run check
String.prototype.replaceAll

"replaceAll" in String.prototype

An ES2021 string method for replacing every match.

Run check
Try it yourself

Reset hides the answers. Run the checks to ask feature-by-feature questions instead of trusting a version label.

No eval is used. Each row runs the same feature-detection expression shown in the code block.

The check for structuredClone is included on purpose. It is commonly used from JavaScript, but it is a web/runtime API rather than an ECMAScript language feature. This is the bridge to the next lesson: the engine runs the language, while the host supplies extra APIs.

Where you’ll use this

History becomes practical when you read code, choose syntax, and debug compatibility. Older tutorials may use var and function expressions. Modern examples often use const, arrow functions, template literals, and optional chaining. Knowing the timeline helps you translate without panic.

Common compatibility decisions
SituationBetter questionPractical move
You see var in old codeIs it old style or intentionally function-scoped?Read it, then modernize only when tests protect behavior.
You want to use toSortedDo my target browsers support Array.prototype.toSorted?Check MDN or caniuse, or provide a fallback.
A tool says it compiles modern JavaScriptWhich features does it transform?Look at the tool’s target browsers, not just an ES label.
A snippet fails in one browserWhich exact feature is missing?Feature-detect or rewrite that feature.

You will see this most when copying code from documentation. A page might show const names = users.map(user => user.name). If you understand that const and arrows are ES2015 syntax, you can recognize them as modern syntax for ordinary ideas: store a value, call a function, return a result.

Plain-English rule

Learn features by name. “This code uses optional chaining” is more useful than “this code is ES2020,” because support tools, docs, and error messages talk about features.

Common misconceptions

“JavaScript and ECMAScript are two different languages.”

They are two names around the same core. JavaScript is the everyday language name; ECMAScript is the standard that defines the core language.

“ES6 replaced old JavaScript.”

ES2015 added features. Old syntax still works because the web depends on backward compatibility.

“A browser supports all of ES2023 or none of it.”

Support is feature-by-feature. A browser can have one ES2023 method and still miss another newer API.

“If a feature is in the standard, every browser has it immediately.”

Standardization and implementation are connected but not identical. Engines need time to ship and users need time to update.

“Newer syntax is automatically better.”

Newer syntax is often clearer, but compatibility, team style, and readability matter. Choose the feature that solves the problem.

Easy-to-confuse names
NameCommon confusionAccurate meaning
ES5Any old JavaScriptThe 2009 fifth edition and its features.
ES6A different languageAnother name for ES2015, the sixth edition.
Modern JavaScriptOne exact versionA moving phrase for commonly supported newer features.
Browser supportA yes/no answer for a whole editionA feature-by-feature compatibility question.

Practice: read history like a developer

5 EXERCISES
Exercise 1 · Warm-upPredict the rename

Trace this tiny history-themed program. What does it print?

Starter codePop out in the code editor (opens in a new tab)JavaScript
var tool = "Mocha";
tool = "LiveScript";
console.log(tool);

Answer, then press Check. Spacing and letter case don’t matter.

    Exercise 2 · PracticePut the names in order

    Type these in earliest-to-latest order: ES2015, Mocha, ES5, ECMAScript.

    Answer, then press Check. Spacing and letter case don’t matter.

      Exercise 3 · PracticeWhat does ES stand for?

      When someone says ES5, ES2015, or ES2023, what does the ES stand for?

      Answer, then press Check. Spacing and letter case don’t matter.

        Exercise 4 · PracticeFind the compatibility question

        A teammate asks, “Can we use ES2023?” Rewrite that as a better feature-level question for code that wants Array.prototype.toSorted.

        Answer, then press Check. Spacing and letter case don’t matter.

          Exercise 5 · ChallengeFind the feature that may need a fallback

          This code keeps the original array unchanged while making a sorted copy. Which feature should you check before relying on it in older browsers?

          Starter codePop out in the code editor (opens in a new tab)JavaScript
          const scores = [3, 1, 2];
          const sorted = scores.toSorted();
          console.log(scores.join(","));
          console.log(sorted.join(","));

          Answer, then press Check. Spacing and letter case don’t matter.

            Quiz: check your understanding

            8 QUESTIONS

            Answer once from memory, then read every explanation. Wrong answers are useful because they name common confusions.

            Lesson quiz · 8 questionsScore: first tries count
            1. Question 1 of 8Who created the first version of JavaScript at Netscape?

              Choose an answer to see the explanation.

            2. Question 2 of 8What does ECMAScript name?

              Choose an answer to see the explanation.

            3. Question 3 of 8What does this code print?

              Read the code, then predictPop out in the code editor (opens in a new tab)JavaScript
              var label = "ES";
              label = label + "2015";
              console.log(label);

              Choose an answer to see the explanation.

            4. Question 4 of 8Which name refers to the same major edition as ES2015?

              Choose an answer to see the explanation.

            5. Question 5 of 8Which feature is from ES2015 rather than ES5?

              Choose an answer to see the explanation.

            6. Question 6 of 8What boolean does this feature-list code print?

              Read the code, then predictPop out in the code editor (opens in a new tab)JavaScript
              const features = ["ES5", "ES2015"];
              console.log(features.includes("ES2015"));

              Choose an answer to see the explanation.

            7. Question 7 of 8Why is feature detection useful?

              Choose an answer to see the explanation.

            8. Question 8 of 8What is the usual modern release rhythm for ECMAScript editions?

              Choose an answer to see the explanation.

            Key takeaways

            • JavaScript began at Netscape in 1995 when Brendan Eich built the first version quickly for browser scripting.
            • ECMAScript is the standard; TC39 is the committee that evolves it.
            • ES5 was a 2009 cleanup and compatibility landmark; ES2015, also called ES6, was a major modernization.
            • Since 2016, ECMAScript has used yearly editions, usually collecting smaller finished features each June.
            • Compatibility is best checked feature by feature: ask whether the browser supports the specific method, syntax, or API you plan to use.

            Remember the one-liner.
            JavaScript is the language name; ECMAScript is its shared rulebook; real browsers ship the rulebook feature by feature.

            Up next: Engines, runtimes & hosts.

            CompleteFrontend Clear concepts. Working examples.