ES6 (ECMAScript 2015) brought a ton of features that make JavaScript cleaner, faster, and more fun. Instead of theory, let's dive straight into practical examples you can try in your console.

1. let & const

Block-scoped variables and constants.

const name = "Washiq";
let age = 30;

age = 31; // ✅ works
// name = "John"; // ❌ Error: Assignment to constant
console.log(name, age);

  

2. Arrow Functions

Shorter syntax and lexical this.

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

const numbers = [1,2,3];
const squares = numbers.map(n => n * n);
console.log(squares); // [1,4,9]

  

3. Template Literals

Easier string interpolation.

const user = {name: "Washiq", role: "Software Engineer"};
console.log(`Hello ${user.name}, you are a ${user.role}!`);

  

4. Default Parameters

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Washiq"); // Hello, Washiq!

  

5. Destructuring

Extract values from objects or arrays easily.

// Object
const person = {name:"Washiq", age:30};
const {name, age} = person;
console.log(name, age); // Washiq 30

// Array
const nums = [10,20,30];
const [first, second] = nums;
console.log(first, second); // 10 20

  

6. Spread & Rest Operators

// Spread
const arr1 = [1,2,3];
const arr2 = [...arr1, 4,5];
console.log(arr2); // [1,2,3,4,5]

// Rest
function sum(...numbers) {
  return numbers.reduce((a,b) => a+b, 0);
}
console.log(sum(1,2,3,4)); // 10

  

7. Object Shorthand & Property Names

const name = "Washiq", age = 30;
const user = {name, age}; // shorthand
console.log(user); // {name:"Washiq", age:30}

  

8. Classes

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age}`);
  }
}

const p = new Person("Washiq", 30);
p.greet();

  

9. Modules (Import & Export)

Organize code into modules (in Node.js or modern browsers).

// math.js
export const add = (a,b) => a+b;

// app.js
import { add } from './math.js';
console.log(add(5,10)); // 15

  

10. Promises & Async/Await

// Promise
const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve("Data loaded!"), 1000);
});
fetchData().then(console.log);

// Async/Await
async function load() {
  const data = await fetchData();
  console.log(data);
}
load();

  

11. Map, Set & Iterators

// Map
const map = new Map();
map.set('name', 'Washiq');
console.log(map.get('name'));

// Set
const set = new Set([1,2,2,3]);
console.log(set); // {1,2,3}

  

12. Optional Chaining & Nullish Coalescing

const user = {profile:{email:null}};

console.log(user?.profile?.email ?? "No email"); // No email

  

13. Array Methods (LINQ Style)

JavaScript ES6 array methods let you filter, map, reduce, and query arrays similar to LINQ in C#.

Filter (Where)

const numbers = [1,2,3,4,5,6];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2,4,6]

  

Map (Select)

const squares = numbers.map(n => n * n);
console.log(squares); // [1,4,9,16,25,36]

  

Reduce (Aggregate)

const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum); // 21

  

Find & Some (FirstOrDefault / Any)

console.log(numbers.find(n => n > 4)); // 5
console.log(numbers.some(n => n % 2 === 0)); // true

  

Every (All)

console.log(numbers.every(n => n > 0)); // true

  

These examples cover all the major ES6 features you’ll use every day. Play around with them, combine them, and make your JavaScript code cleaner, faster, and more modern.

Happy Coding with ES6! 🚀