Suggest an edit

Improve this article

Refine the answer for “ES6 as the most important JS update”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**ES6 (ECMAScript 2015) is the version of the standard approved in June 2015 that changed the language radically.** Before it, JavaScript had gone years without a major update: the previous notable version, ES5, shipped back in 2009. ES6 was the turning point after which JS stopped being a "browser language" and became a full modern programming language.

## Theory

### TL;DR
- ES6 brought modern syntax: `let` and `const`, arrow functions, template literals, destructuring, spread and rest, classes.
- Official `import` / `export` modules appeared for the first time, replacing IIFEs, CommonJS, AMD and RequireJS.
- `Promise` made asynchronous code linear and became the foundation for `async/await` in ES2017.
- The `Map`, `Set`, `WeakMap` and `WeakSet` data structures arrived, along with methods like `Array.from()` and `Object.assign()`.
- `Symbol`, iterators and generators appeared, the machinery that `for...of` and modern asynchrony rest on.
- Together this unified the language for browser and server and opened the door to bundlers, transpilers and frameworks.

### Quick example
```javascript
// math.js
export const sum = (a, b) => a + b;

// main.js
import { sum } from './math.js';

const users = [{ name: 'Maria', age: 30 }];
const [{ name, age }] = users;

console.log(`${name} is ${age}, sum = ${sum(2, 3)}`);
```

### New syntax, closer to modern languages

ES6 added many constructs that made code clearer, shorter and safer.

| Addition | What it does | Example |
| --- | --- | --- |
| `let` / `const` | Block scoping instead of `var` | `let x = 10; const y = 20;` |
| Arrow functions | Compact syntax, lexical `this` | `arr.map(x => x * 2)` |
| Template literals | Convenient interpolation and multiline strings | `` `Hello, ${name}!` `` |
| Destructuring | Easy data extraction | `const { name, age } = user;` |
| Spread / Rest | Flexible merging and splitting | `const all = [...arr1, ...arr2];` |
| Classes | Syntactic sugar over prototypes | `class User { constructor(name) {} }` |
| Default parameters | Removed the `undefined` checks | `function f(a, b = 1) {}` |

`let` and `const` deserve a special mention: they removed the most painful `var` trap, where a variable leaked out of its block, and they fixed the classic puzzle with `var` inside a loop plus `setTimeout`. Arrow functions removed the need for `const self = this` and for `.bind(this)`.

### The import and export modules

Before ES6 there were no standardised modules in JS, so people used:

- IIFEs, that is immediately invoked function expressions,
- or external systems such as CommonJS (Node.js), AMD or RequireJS.

ES6 introduced an **official module system** for the first time:

```javascript
// math.js
export const sum = (a, b) => a + b;

// main.js
import { sum } from './math.js';
```

This became the basis for modern tooling: Webpack, Rollup, Vite, Parcel, Next.js and so on. One important detail: ES6 modules are static, meaning the set of imports is known before execution. That is exactly why bundlers can do tree shaking and drop unused code, which CommonJS with its dynamic `require()` does not allow.

### Promise and the end of callback hell

Before ES6 asynchronous code looked awful, a shape known as "callback hell":

```javascript
getData(function (res) {
  process(res, function (result) {
    save(result, function () {
      console.log('Done');
    });
  });
});
```

ES6 brought `Promise`, and with it linear, readable code:

```javascript
getData()
  .then(process)
  .then(save)
  .then(() => console.log('Done'));
```

Promises also gave a single way to handle errors through `.catch()` instead of an `err` argument in every callback. Later, in ES2017, the `async/await` syntax was built on top of the very same promises.

### Objects, arrays, symbols, iterators and generators

Extended capabilities for objects and arrays:

- improved **object literals**: shorthand properties and methods, computed keys,
- new methods `Array.from()`, `Array.of()`, `Object.assign()`,
- new data structures `Map`, `Set`, `WeakMap`, `WeakSet`.

```javascript
const obj = { a: 1, b: 2 };
const copy = Object.assign({}, obj);

const key = 'dynamic';
const built = { [key]: 1, copy };
```

One level down sits the machinery of the language itself:

- `Symbol` is a new primitive type, used for unique keys and for protocols such as `Symbol.iterator`,
- `Iterator` and `Generator` are the basis for `for...of`, `yield` and ultimately for `async/await`.

```javascript
function* counter() {
  yield 1;
  yield 2;
  yield 3;
}

for (const num of counter()) console.log(num);
```

### Unified environments and the bottom line

ES6 made the language universal: Node.js, browsers and frontend frameworks started speaking one language, and standardised bundlers, transpilers (Babel) and frameworks (React, Vue, Angular) appeared, all leaning on the modules and classes from the standard.

| Reason | In short |
| --- | --- |
| New modern syntax | Made JS convenient and safer |
| Modules | Brought order to project structure |
| Asynchrony through `Promise` | Removed callback hell |
| New data structures | Improved efficiency and expressiveness |
| Unified environments | JS became a serious language on both frontend and backend |

Put simply: before ES6 JavaScript was treated as a "browser toy", after ES6 it is a modern, powerful and mature language standing alongside Python, Java and C#.

### Common mistakes

- **Believing `let` and `const` are not hoisted.** They are hoisted too, but they land in the temporal dead zone, so touching them before the declaration throws a `ReferenceError`.
- **Confusing `const` with immutability.** `const` forbids reassignment, but the contents of an object or array can still change; immutability needs `Object.freeze()` or structural copying.
- **Using an arrow function as an object method or a constructor.** It has no own `this`, `arguments` or `prototype`, so `new` does not work with it.
- **Mixing up ES6 modules and CommonJS.** `import` is static and asynchronous, `require()` is synchronous; blending the two systems in one file produces build errors.
- **Thinking a class is a new inheritance model.** `class` is syntactic sugar over prototypes, the same prototypal model sits underneath.
- **Assuming `Promise` makes code parallel.** It only orders asynchrony; concurrent operations need `Promise.all()` or `Promise.allSettled()`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts1016 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.