Skip to main content

ES6 as the most important JS update

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.

AdditionWhat it doesExample
let / constBlock scoping instead of varlet x = 10; const y = 20;
Arrow functionsCompact syntax, lexical thisarr.map(x => x * 2)
Template literalsConvenient interpolation and multiline strings`Hello, ${name}!`
DestructuringEasy data extractionconst { name, age } = user;
Spread / RestFlexible merging and splittingconst all = [...arr1, ...arr2];
ClassesSyntactic sugar over prototypesclass User { constructor(name) {} }
Default parametersRemoved the undefined checksfunction 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.

ReasonIn short
New modern syntaxMade JS convenient and safer
ModulesBrought order to project structure
Asynchrony through PromiseRemoved callback hell
New data structuresImproved efficiency and expressiveness
Unified environmentsJS 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().

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.