Skip to content

ES6 Features

This lesson explains ES6 Features in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript ES6+ Features Overview

JavaScript ES6+ features are modern language improvements introduced from ECMAScript 2015 and later versions. These features make JavaScript code cleaner, shorter, more readable, and easier to maintain in modern web applications.

ES6+ introduced important features such as let, const, arrow functions, template literals, destructuring, spread and rest syntax, classes, modules, promises, default parameters, optional chaining, nullish coalescing, and async/await. These features are widely used in React, Angular, Vue, Node.js, Next.js, and full-stack JavaScript development.

Feature Description Common Usage
let and const Modern variable declarations. Block-scoped variables.
Arrow Functions Shorter function syntax. Callbacks and array methods.
Destructuring Extracts values from arrays and objects. API data and React props.
Spread and Rest Expands or collects values. Copying arrays, merging objects.
Classes Cleaner object-oriented syntax. Models and reusable objects.
Modules Import and export code between files. Reusable application structure.
Promises and Async/Await Handle asynchronous operations. API calls and background tasks.

JavaScript ES6+ Features Example

const user = {
  name: "John",
  role: "Developer",
  active: true
};

const { name, role } = user;

const skills = ["HTML", "CSS"];

const updatedSkills = [...skills, "JavaScript"];

const greet = (person) => {
  return "Hello " + person;
};

console.log(name);
console.log(role);
console.log(updatedSkills);
console.log(greet("John"));

This example demonstrates several ES6+ features, including const, object destructuring, spread syntax, and arrow functions. These features are commonly used in modern JavaScript projects.

Top 10 JavaScript ES6+ Feature Examples

The following examples show the most popular ES6+ features used in modern JavaScript applications, frontend frameworks, backend APIs, and interviews.

# Feature Syntax
1 let and const const name = "John"; let count = 1;
2 Arrow Function const add = (a, b) => a + b;
3 Template Literal const message = "Hello " + name;
4 Object Destructuring const { name, role } = user;
5 Array Destructuring const [first, second] = colors;
6 Spread Syntax const copy = [...items];
7 Rest Parameters function total(...numbers) { return numbers.length; }
8 Default Parameters function greet(name = "Guest") { return name; }
9 Optional Chaining const city = user.address?.city;
10 Nullish Coalescing const value = count ?? 0;

Best Practices

  • Use const by default and let only when reassignment is needed.
  • Use arrow functions for short callbacks and array methods.
  • Use destructuring when reading multiple properties from objects or arrays.
  • Use spread syntax for immutable array and object updates.
  • Use optional chaining when accessing deeply nested values safely.
  • Use nullish coalescing when only null or undefined should trigger a fallback.
  • Use modules to organize reusable JavaScript code.
  • Use async/await for readable asynchronous code.

Common Mistakes

  • Using var instead of let or const.
  • Using arrow functions where a dynamic this value is required.
  • Expecting spread syntax to create a deep copy.
  • Overusing destructuring when it reduces readability.
  • Confusing rest syntax with spread syntax.
  • Using logical OR when nullish coalescing is more accurate.
  • Forgetting to handle errors in async/await code.

Key Takeaways

  • ES6+ features make JavaScript cleaner and easier to maintain.
  • let and const replace most uses of var.
  • Arrow functions simplify callbacks and short functions.
  • Destructuring and spread syntax are widely used in modern frameworks.
  • Optional chaining and nullish coalescing reduce defensive code.
  • Modules and async/await are essential for modern JavaScript applications.

Pro Tip

Master ES6+ features before learning advanced frameworks. React, Angular, Vue, Node.js, and Next.js heavily depend on destructuring, arrow functions, spread syntax, modules, promises, and async/await.

You now understand the most important JavaScript ES6+ features, including let, const, arrow functions, destructuring, spread and rest syntax, classes, modules, promises, optional chaining, nullish coalescing, and async/await. Continue to the next lesson to learn JavaScript Modules and how to organize code across multiple files.