Unpack arrays and objects; copy and merge.
✍️ 3 exercises + code challenge in this lessonUnpack values into variables in one line:
const [first, second] = list;const { name, age } = person; with defaults { city = "Lahore" } and renaming { name: fullName }...)[...a, ...b], { ...defaults, ...options }function sum(...numbers)Mastering JavaScript Destructuring & Spread helps you write clean and reliable JavaScript code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<pre id="out"></pre>
<script>
const log = (...a) => document.getElementById("out").textContent += a.join(" ") + "\n";
const [gold, silver, ...others] = ["Ali", "Sara", "Usman", "Ayesha"];
log("Gold:", gold, "| Silver:", silver, "| Others:", others);
const user = { name: "Hina", age: 23 };
const { name, age, city = "Karachi" } = user;
log(name, age, city);
const defaults = { theme: "light", lang: "en" };
const settings = { ...defaults, theme: "dark" };
log(JSON.stringify(settings));
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
log("sum:", sum(1, 2, 3, 4));
</script>Check what you learned in “JavaScript Destructuring & Spread”.
Unpack name and age from the object.
const { , } = person;
What does [...a, ...b] do?
Use array destructuring to take the first two items of list into first and second, then log them separated by a space.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services