JavaScript Fundamentals

ES6+ Features

Beginner Lesson 10 of 10

ES6+ Features

Modern JavaScript (ES6 and beyond) introduced powerful new features.

Destructuring

Arrays

const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

// Swap variables
let a = 1, b = 2;
[a, b] = [b, a];

Objects

const { name, age, city = "Unknown" } = person;

// Rename variables
const { name: userName, age: userAge } = person;

// Nested destructuring
const { address: { street, zip } } = person;

Spread & Rest

// Spread arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Spread objects
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

Template Literals

const name = "World";
const greeting = `Hello, ${name}!`;

// Multi-line strings
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    `${acc}${str}<mark>${values[i] || ""}</mark>`, "");
}

Modules

// Named exports (math.js)
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// Default export (greeting.js)
export default function greet(name) {
  return `Hello, ${name}!`;
}

// Importing
import greet from "./greeting.js";
import { PI, add } from "./math.js";
import * as math from "./math.js";

Optional Chaining & Nullish Coalescing

// Optional chaining
const city = user?.address?.city;
const result = obj?.method?.();

// Nullish coalescing
const value = null ?? "default"; // "default"
const zero = 0 ?? "default";     // 0 (not "default"!)

Other Features

// Object shorthand
const name = "John";
const person = { name, greet() { return `Hi, ${this.name}`; } };

// Computed property names
const key = "dynamic";
const obj = { [key]: "value" };

// Array methods
[1, 2, 3].includes(2);           // true
[1, 2, 3].find(x => x > 1);      // 2
[1, 2, 3].findIndex(x => x > 1); // 1
Object.entries({ a: 1 });        // [["a", 1]]

Congratulations!

You’ve completed the JavaScript tutorial series! Continue with: