ES6+ introduced fundamental improvements to JavaScript: block scoping, arrow functions, template literals, destructuring, default parameters, spread/rest operators, and module syntax. These features are now standard in all modern browsers and Node.js.
| Name | Signature / Syntax | Description |
|---|---|---|
| let / const | let x = 1; const PI = 3.14 | Block-scoped variable / immutable binding |
| Arrow function | (a, b) => a + b | Concise function, lexically binds this |
| Template literal | `Hello ${name}!` | String interpolation with backticks |
| Destructuring array | const [a, b] = [1, 2] | Unpack array values into variables |
| Destructuring object | const {name, age} = person | Unpack object properties |
| Default params | function f(x = 10) {} | Parameter default values |
| Spread operator | [...arr1, ...arr2] | Expand iterable into elements |
| Rest params | function f(...args) {} | Collect remaining args into array |
| Optional chaining | obj?.prop?.sub | Safe navigation — returns undefined if null |
| Nullish coalescing | val ?? 'default' | Return right side only if left is null/undefined |
| Logical assignment | x ||= y; x &&= y; x ??= y | Assign only under logical condition |
| Object shorthand | const obj = {name, age} | Property shorthand when key = variable name |
| Computed properties | const obj = {[key]: value} | Dynamic property key |
| for...of | for (const x of iterable) {} | Iterate over iterable values |
| for...in | for (const key in obj) {} | Iterate over object keys |
| Symbol | Symbol('desc') | Unique, immutable primitive value |
| typeof | typeof x → string | Return type as string |
| instanceof | x instanceof Array | True if x is instance of constructor |
| class | class Animal { constructor() {} } | ES6 class syntax (syntactic sugar over prototype) |
| extends | class Dog extends Animal {} | Inheritance |
| super | super(args) / super.method() | Call parent constructor or method |
| static | static method() {} | Class-level method (not on instances) |
| getter/setter | get name() {} / set name(v) {} | Computed property access |
| import | import { fn } from './module.js' | ES module import |
| export | export default fn / export { fn } | ES module export |
| Proxy | new Proxy(target, handler) | Intercept object operations |
| Reflect | Reflect.get/set/apply(...) | Mirrors Proxy traps as functions |
| WeakMap | new WeakMap() | Map with weakly-held object keys (no memory leak) |
| WeakSet | new WeakSet() | Set with weakly-held object members |
| globalThis | globalThis.fetch | Universal global object reference |
Run with node script.js or save as HTML and open in browser.
// ES6+ Modern JavaScript
// --- Destructuring & defaults ---
const [first, second = 'default', ...rest] = ['a', undefined, 'c', 'd'];
console.log(first, second, rest); // a default ['c','d']
const { name, age = 25, address: { city } = {} } = { name: 'Alice', address: { city: 'LA' } };
console.log(name, age, city); // Alice 25 LA
// --- Arrow functions & closures ---
const multiply = (x, y) => x * y;
const makeCounter = (start = 0) => {
let count = start;
return { inc: () => ++count, dec: () => --count, val: () => count };
};
const counter = makeCounter(10);
console.log(counter.inc(), counter.inc(), counter.dec()); // 11 12 11
// --- Template literals ---
const greet = (name, score) =>
`Welcome, ${name.toUpperCase()}! Score: ${score.toFixed(1)} (${score >= 90 ? 'A' : 'B'})`;
console.log(greet('alice', 94.7));
// --- Spread & rest ---
const arr1 = [1, 2, 3], arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
console.log(Math.max(...merged)); // 6
const sumAll = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sumAll(1, 2, 3, 4, 5)); // 15
// --- Optional chaining & nullish coalescing ---
const user = { profile: { theme: null } };
const theme = user?.profile?.theme ?? 'dark';
console.log(theme); // dark
// --- Classes ---
class Shape {
constructor(color = 'black') { this.color = color; }
area() { return 0; }
toString() { return \`\${this.constructor.name}(color=\${this.color}, area=\${this.area().toFixed(2)})\`; }
}
class Circle extends Shape {
constructor(radius, color) { super(color); this.radius = radius; }
area() { return Math.PI * this.radius ** 2; }
}
class Rectangle extends Shape {
constructor(w, h, color) { super(color); this.w = w; this.h = h; }
area() { return this.w * this.h; }
}
const shapes = [new Circle(5,'red'), new Rectangle(4,6,'blue'), new Circle(2.5,'green')];
shapes.forEach(s => console.log(s.toString()));
// node script.js