Exploring ECMAScript 2015 (ES6) Features

Note: This article was originally published on January 15, 2015. Some information may be outdated.

ECMAScript 2015 (ES6) adds modern syntax, safer defaults, and built‑in tools for async and modular code.

Transpile with Babel:

npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env
echo '{ "presets": ["@babel/preset-env"] }' > .babelrc
npx babel src --out-dir dist

Place ES6 files in src/, run the command, and load the output from dist/ in older browsers.

---

Feature list

• let and const
• Arrow functions
• Template literals
• Destructuring
• Default, rest, spread
• Enhanced object literals
• Classes
• Modules
• Promises
• Iterators and for..of
• Generators
• Map, Set, WeakMap, WeakSet
• Symbols
• Unicode & binary/octal
• New APIs
• Proxies
• Reflect API
• Tail‑call optimisation

---

let and const

for (let i = 0; i < 3; i++) {
  // i scoped to loop only
}
const API_URL = '/api';

---

Arrow functions

const doubled = [1, 2, 3].map(n => n * 2);
button.addEventListener('click', () => this.save());

---

Template literals

const user = 'Luiz';
const msg = `Hi, ${user}
Welcome to ES6.`;

---

Destructuring

const [red, green] = ['#f00', '#0f0'];

const user = { id: 7, role: 'admin' };
const { id, role } = user;

---

Default, rest, spread

function greet(name = 'guest') { return `Hi ${name}`; }

const nums = [1, 2, 3];
sum(...nums); // spread into args

function logAll(...args) { console.log(args); }

---

Enhanced object literals

const name = 'x';
const obj = {
  name,                // shorthand
  [`prop_${name}`]: 1, // computed key
  toString() { return this.name; }
};

---

Classes

class Counter {
  constructor(start = 0) { this.count = start; }
  inc() { return ++this.count; }
}

---

Modules

// math.js
export const PI = 3.14;

// app.js
import { PI } from './math.js';
console.log(PI);

Run through Babel or a bundler to use modules in the browser.

---

Promises

fetch('/data.json')
  .then(r => r.json())
  .then(show)
  .catch(console.error);

---

Iterators and for..of

for (const n of [10, 20, 30]) {
  console.log(n);
}

---

Generators

function* idMaker() {
  let id = 0;
  while (true) yield id++;
}
const gen = idMaker();
gen.next().value; // 0

---

Map, Set, WeakMap, WeakSet

const ids = new Set([1, 2, 2, 3]); // {1,2,3}
const dict = new Map([['key', 42]]);

---

Symbols

const secret = Symbol('secret');
const obj = { [secret]: 123 };

---

Unicode & binary/octal

'𝌆'.length; // 2 in ES5, fixed helpers in ES6

0b1010; // 10
0o755;  // 493

---

New APIs

Number.isNaN(NaN);      // true
[1, 2, 3].includes(2);  // true
Math.trunc(4.8);        // 4
Object.assign({}, { a: 1 });

---

Proxies

const monitor = new Proxy({}, {
  get(target, prop) {
    console.log('read', prop);
    return target[prop];
  }
});
monitor.x = 5;
monitor.x; // logs "read x"

---

Reflect API

const obj = {};
Reflect.set(obj, 'x', 1);
Reflect.get(obj, 'x'); // 1

---

Tail‑call optimisation

function factorial(n, acc = 1) {
  return n === 0 ? acc : factorial(n - 1, n * acc);
}

Tail‑recursive functions can run without growing the call stack in compliant engines.

---

Originally published at letanure.dev