← Back to Curriculum

ES6+ Features

📚 Lesson 6 of 20 ⏱️ 45 min

ES6+ Features

45 min

ES6 (ECMAScript 2015) was a massive update to JavaScript, and subsequent yearly releases (ES2016+) have continued to add powerful features. Mastering these is essential for modern development.

**Destructuring** allows you to unpack values from arrays or properties from objects into distinct variables (e.g., `const { name } = user`). It's concise and readable.

**Template Literals** (backticks) support multi-line strings and expression interpolation (`${variable}`), replacing clunky string concatenation.

**Spread/Rest Operators** (`...`) are incredibly versatile. They can merge arrays/objects, copy them (shallow copy), or gather function arguments into an array.

Key Concepts

  • Destructuring (Object & Array).
  • Template Literals & Interpolation.
  • Spread (`...arr`) vs. Rest (`...args`).
  • Default Parameters.
  • Modules (Import/Export).

Learning Objectives

Master

  • Refactoring old code to ES6+
  • Using destructuring for cleaner data access
  • Manipulating data with spread syntax
  • Writing modular code with imports/exports

Develop

  • Writing concise, expressive code
  • Understanding the evolution of the language
  • Keeping up with new ECMAScript proposals

Tips

  • Use destructuring in function parameters: `function greet({ name }) { ... }`.
  • Use the spread operator to copy arrays/objects immutably: `const newArr = [...oldArr]`.
  • Use object property shorthand: `{ name, age }` instead of `{ name: name, age: age }`.
  • Use `?.` (Optional Chaining) to safely access nested properties: `user?.address?.city`.

Common Pitfalls

  • Confusing Spread (expands) with Rest (collects), though they look the same.
  • Assuming `const` makes objects immutable (it only protects the reference binding).
  • Overusing arrow functions where `this` context is needed (like object methods).
  • Not using a transpiler (Babel) if you need to support very old browsers.

Summary

  • ES6+ makes JS more powerful and readable.
  • Destructuring and Spread are daily tools.
  • Template literals simplify string work.
  • Modern syntax reduces boilerplate.

Exercise

Rewrite a simple function using arrow function syntax and use a template literal.

const greet = (name) => `Hello, ${name}!`;

console.log(greet("World"));

Exercise Tips

  • Try destructuring in the function parameters: const greet = ({ name }) => ...
  • Add default parameters: const greet = (name = 'Guest') => ...
  • Use template literals for multi-line strings.
  • Experiment with tagged template literals for advanced string processing.

Code Editor

Output