Platform under construction

Versions & Runtimes

Intermediate

JavaScript Versions

JavaScript versions are not only history. They explain why older code looks different, why modern syntax exists and why runtime support must be checked before shipping.

// ES5 style
var name = "User A";

// Modern JavaScript
const user = { name: "User A", tasks: 12 };
const message = `${user.name} has ${user.tasks} tasks.`;

Versions & Runtimes

Modern JavaScript is a long evolution, not one single release.

JavaScript started small, but the language grew into a serious application language. Older tutorials often use var, function constructors and manual string concatenation because those patterns were once the normal way to write JavaScript.

A major turning point was ECMAScript 2015, often called ES6. It introduced the style many developers now think of as modern JavaScript: let, const, arrow functions, classes, template literals, modules and many other features.

Today, ECMAScript evolves through yearly editions and individual proposals. In practice, developers usually think less in edition numbers and more in feature support: can my target browsers or runtime run this syntax?

ES3 and ES5 era

Older code often uses var, function scope, callbacks and manual patterns because the language had fewer built-in tools.

ES2015 shift

Modern syntax became mainstream: const, let, modules, classes, template literals and arrow functions.

Yearly editions

The language keeps improving through smaller annual updates instead of rare giant releases.

Feature support

The useful production question is not only which edition exists, but where a feature actually runs.

Examples

Good JavaScript respects its target environment.

Modern code with clear intent

const users = [
  { name: "User A", tasks: 12 },
  { name: "User B", tasks: 18 },
];

const activeUsers = users.filter((user) => user.tasks > 0);

for (const user of activeUsers) {
  console.log(`${user.name}: ${user.tasks} tasks`);
}

Old style copied without reason

var users = [{ name: "User A", tasks: 12 }];

for (var i = 0; i < users.length; i++) {
  console.log(users[i].name + ": " + users[i].tasks + " tasks");
}

// This can still work, but it is not automatically the best style today.

Rules that matter

Version and runtime choices are production decisions.

Modern JavaScript is powerful, but support is never automatic. Choose syntax, APIs and tooling based on the environments that must run the code.

Learn modern defaults

Use const, let, template literals, modules and array methods as the normal baseline.

Recognize older code

You will still meet var, prototypes and callbacks in older projects and libraries.

Do not chase every proposal

A feature is not production-ready just because someone wrote a blog post about it.

Think in targets

A browser project, Node project and embedded webview may support different language features.

Use tools with purpose

Transpilers can turn modern syntax into older JavaScript, but they add complexity.

Read compatibility notes

Before using newer syntax broadly, check the environments that must run it.

Production thinking

Support strategy keeps modern JavaScript reliable.

Why does this matter?

Version awareness prevents cargo-cult programming. You understand why old code looks old, why modern code is cleaner and why support checks matter before release.

Accessibility

If unsupported syntax breaks a script, accessibility features written in JavaScript may fail too. Runtime support is part of inclusive delivery.

Production note

Production teams should define target browsers and runtime versions. Without that baseline, every feature choice becomes guesswork.

SEO note

Broken JavaScript can hurt navigation, rendered content and user engagement. Version choices should not make important content fragile.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace var with const where reassignment is not needed.
Replace string concatenation with a template literal.
Add a second user object and render both names.

Practice assignment

Do this before moving to the next topic.

Find one older JavaScript snippet that uses var.
Rewrite it with const or let.
Explain which part changed style and which part changed behavior.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JavaScript Versions.