ES6+ Fundamentals
Modern JavaScript syntax and features that form the foundation of every production codebase today.
Arrow Functions and Lexical `this`
Arrow functions provide concise syntax for function expressions and inherit `this` from their enclosing scope rather than being bound at call time. This makes them ideal for callbacks inside classes or event handlers where you want to preserve the outer context.
Unlike traditional functions, arrow functions cannot be used as constructors and do not have their own `arguments` object. In production code, use arrow functions for short callbacks and keep regular functions when you need dynamic `this` binding or a named function for stack traces.
- Lexical `this` — no `.bind()` needed in most callbacks
- Cannot be used with `new`
- Implicit return for single-expression bodies
const double = (n) => n * 2;
class Counter {
count = 0;
increment = () => { this.count += 1; };
}Destructuring and Rest/Spread
Destructuring lets you unpack values from arrays and objects into distinct variables, reducing boilerplate when working with API responses or configuration objects. Combined with default values, it makes function signatures self-documenting.
The rest operator (`...`) collects remaining elements into a new array or object, while spread expands iterables into individual elements. Together they enable immutable update patterns that are essential in React and Redux-style state management.
- Array destructuring with defaults and skipping
- Object destructuring with renaming
- Rest in parameters for flexible APIs
const { id, name, ...rest } = user;
const updated = { ...user, name: 'Alice' };
const [first, , third] = items;Template Literals and Tagged Templates
Template literals use backticks for multi-line strings and embedded expressions via `${}`. They eliminate awkward concatenation and make SQL queries, HTML snippets, and log messages far more readable.
Tagged template literals pass the string segments and interpolated values to a function, enabling domain-specific mini-languages. Libraries like styled-components and certain i18n tools rely on this pattern under the hood.
- Multi-line strings without `\n` concatenation
- Expression interpolation
- Tagged templates for custom processing
const greeting = `Hello, ${name}!`;
function sql(strings, ...values) {
// sanitize values before joining
return strings.reduce((q, s, i) => q + s + (values[i] ?? ''), '');
}Default Parameters and Shorthand Syntax
Default parameters allow functions to declare fallback values directly in the signature, replacing the old `param = param || defaultValue` idiom that broke on falsy values like `0` or empty strings.
ES6 also introduced shorthand property names, method definitions in object literals, and computed property keys. These small syntax improvements compound across large codebases, reducing noise and making intent clearer during code review.
- Defaults apply when argument is `undefined`
- Shorthand: `{ name }` instead of `{ name: name }`
- Computed keys: `{ [dynamicKey]: value }`
function createUser(name, role = 'viewer', active = true) {
return { name, role, active };
}
const key = 'status';
const obj = { [key]: 'active' };Block Scope with `let` and `const`
The `let` and `const` declarations are block-scoped, unlike `var` which is function-scoped and hoisted. Using `const` by default and `let` only when reassignment is required is a widely adopted convention that prevents an entire class of bugs.
Temporal dead zone (TDZ) behavior means you cannot access `let`/`const` bindings before their declaration line executes. Understanding TDZ helps explain ReferenceErrors that appear during refactoring from `var` to `let`.
- Prefer `const`; use `let` when reassignment is needed
- Avoid `var` in modern codebases
- Block scope prevents loop-closure bugs
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // 0, 1, 2
}
const config = Object.freeze({ apiUrl: '/api' });