Lesson 10 of 18 · 0 of 2 exercises solved

Destructuring, Spread & Rest

You will learn how to pull values out of and objects with , and how to copy and combine them with . These make everyday code shorter and clearer.

// Array destructuring
const [a, b, c] = [1, 2, 3]
console.log(a, b, c)  // 1 2 3

// Skip elements with commas
const [first, , third] = [1, 2, 3]
console.log(first, third)  // 1 3

// Default values
const [x = 10, y = 20] = [5]
console.log(x, y)  // 5 20

// Swap without temp variable
let p = 1, q = 2;
[p, q] = [q, p]
console.log(p, q)  // 2 1

// Rest elements
const [head, ...tail] = [1, 2, 3, 4, 5]
console.log(head)  // 1
console.log(tail)  // [2, 3, 4, 5]

// Object destructuring
const user = { name: "Alice", age: 30, city: "Paris" }
const { name, age } = user
console.log(name, age)  // Alice 30

// Rename while destructuring
const { name: userName, city: location = "Unknown" } = user
console.log(userName, location)  // Alice Paris

// Nested destructuring
const config = {
  server: { host: "localhost", port: 8080 },
  db: { name: "myapp", user: "admin" }
}
const { server: { host, port }, db: { name: dbName } } = config
console.log(host, port, dbName)  // localhost 8080 myapp
JavaScript sandboxCtrl+Enter runs
// Spread operator (...)
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const combined = [...arr1, ...arr2]         // [1, 2, 3, 4, 5, 6]
const copy     = [...arr1]                  // shallow copy
const inserted = [0, ...arr1, 4]           // [0, 1, 2, 3, 4]

// Spread with objects
const base = { color: "blue", size: 10 }
const updated = { ...base, size: 20, weight: 5 }  // override size
console.log(updated)  // { color: 'blue', size: 20, weight: 5 }

// Merge objects (last wins on conflict)
const merged = { ...base, ...{ color: "red", opacity: 0.5 } }

// Rest parameters in functions
function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0)
}
console.log(sum(1, 2, 3, 4, 5))  // 15

// Destructuring in function parameters
function displayUser({ name, age, role = "user" }) {
  console.log(`${name} (${age}) — ${role}`)
}
displayUser({ name: "Bob", age: 25 })         // Bob (25) — user
displayUser({ name: "Alice", age: 30, role: "admin" })  // Alice (30) — admin

// Destructuring in loops
const users = [
  { id: 1, name: "Alice", score: 95 },
  { id: 2, name: "Bob",   score: 87 },
]
for (const { name, score } of users) {
  console.log(`${name}: ${score}`)
}
JavaScript sandboxCtrl+Enter runs

Practice

Destructure config in a single statement: pull out host and port (defaulting port to 8080), and collect everything else into rest.

Exercise

Object destructuring with defaults

3 checks
const config = { host: 'app.local', debug: true, retries: 3 }

// const { ... } = config

console.log(host, port, rest)
JavaScript sandboxCtrl+Enter runs
Output
Press Run to try your code, then Check answer to grade it.

Three small tasks with spread and rest: swap a and b with array destructuring, build merged by spreading defaults then overrides, and write sum(...nums) that adds any number of .

Exercise

Spread and rest

4 checks
let a = 1, b = 2
// swap a and b

const defaults = { theme: 'light', lang: 'en' }
const overrides = { theme: 'dark' }
const merged = {}

function sum() {
  return 0
}

console.log(a, b, merged, sum(1, 2, 3, 4))
JavaScript sandboxCtrl+Enter runs
Output
Press Run to try your code, then Check answer to grade it.

Check yourself

Quick check

In function f(...args) and in g(...list), what does the ... do?

Finished reading?2 exercises still open. You can come back to them later.

Tip: use the ← and → keys to move between lessons.