Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 3 · 2 / 7Destructuring and spread
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Destructuring and spread
01 / 09Overview

Destructuring and spread

You'll learn to pull values out of objects and arrays with destructuring, and to copy them with spread (...).

Why it mattersReact uses both everywhere: const { name } = props, const [count, setCount] = useState(0), and { ...user, name } to update state.
about 75 min·needs: Objects, Arrays, Arrow functions
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Destructuring assignmentjavascript.info · 25 min · English
MMamun's noteRead "Array destructuring", "Default values" and "Object destructuring". Skim "Smart function parameters"; React props use that idea. Skip nested destructuring for now.
Article
Rest parameters and spread syntax: spreadjavascript.info · 10 min · English
MMamun's noteStart at "Spread syntax" and read through "Copy an array/object". You can skip the parts about rest parameters and arguments.
VideoOptional
JS destructuring in 100 secondsYouTube · Fireship · 3 min · English
MMamun's noteA fast overview. Watch 0:00–2:08. The "advanced tricks" part after that is for later.
VideoOptional
Modern JavaScript in Bangla #19: destructuringYouTube · Learn with Sumit · 17 min · Bangla
MMamun's noteIn Bangla. Sumit unpacks arrays and objects step by step. His
03 / 09

Explanation

You have an object, like a student's result, and you need three of its values. Writing result.name, result.marks and result.grade again and again is long. You can unpack them in one line. This is called destructuring.

Think of opening a parcel and placing each item on the table with its own label.

const result = { name: "Nusrat", marks: 82, grade: "A" };
const { name, marks } = result;
console.log(name, marks); // Nusrat 82

With { } on the left, JavaScript looks for keys with the same names and makes a variable for each. For arrays you use [ ], and the values are taken by position, not by name:

const [first, second] = ["Tamim", "Liton"];
// first is "Tamim", second is "Liton"

The three dots ... are called spread. They spread out every item of an array, or every key of an object, into a new one. That is how you make a copy with one thing changed:

const player = { name: "Shakib", runs: 45 };
const updated = { ...player, runs: 50 };
// player.runs is still 45, updated.runs is 50

Read { ...player, runs: 50 } as: copy everything from player, then set runs to 50. Order matters: a key written after the spread wins. For arrays, [...marks, 90] is a new array with 90 added at the end.

People often spell a key differently when destructuring: const { nam } = result gives undefined, with no error. The name on the left must match the key exactly. Another common mistake is changing the original (player.runs = 50) when the code needed a copy. In React, that bug makes the screen not update.

When you read code, look at the left side of =. { } or [ ] there means destructuring. ... on the right side, inside { } or [ ], means a new copy is being made.

Words to recognise
destructuringspread...copyobjectarray
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const result = { name: "Nusrat", marks: 82, grade: "A" };
2
const { name, marks } = result;
Mentor note · line 3
{ } on the left of = means object destructuring. It makes name and marks from the keys with the same names. grade is left alone.
4console.log(name, marks); // Nusrat 82
5
const [opener, keeper] = ["Tamim", "Liton", "Mushfiq"];
7
const updated = { ...result, marks: 90 };
console.log(result.marks, updated.marks); // 82 90
10
function showStudent({ name, grade }) {
12 return name + " got " + grade;
13}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const player = { name: "Shakib", runs: 45 };
2const updated = { ...player, runs: 50 };
3console.log(player.runs, updated.runs);
What does this print?
DrillFind the bug2 / 2
addRuns should return a new player with more runs, and leave the original player unchanged. Right now it changes the original. Fix it so all checks pass.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3After const { city } = { name: "Rafi", city: "Sylhet" };, what is city?
  2. 2 / 3After const [a, b] = [10, 20, 30];, what is b?
  3. 3 / 3const bigger = [...marks, 90]; What happens to marks?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Destructuring and spread?

09 / 09

Done

You can now
Read a destructuring line and say which variables it makes, and read { ...obj, key: value } as a changed copy.
Next: Modules and npm Back to Phase 3
On this page
  1. 01Destructuring and spread
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Destructuring and spread
01 / 09Overview

Destructuring and spread

You'll learn to pull values out of objects and arrays with destructuring, and to copy them with spread (...).

Why it mattersReact uses both everywhere: const { name } = props, const [count, setCount] = useState(0), and { ...user, name } to update state.
about 75 min·needs: Objects, Arrays, Arrow functions
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Destructuring assignmentjavascript.info · 25 min · English
MMamun's noteRead "Array destructuring", "Default values" and "Object destructuring". Skim "Smart function parameters"; React props use that idea. Skip nested destructuring for now.
Article
Rest parameters and spread syntax: spreadjavascript.info · 10 min · English
MMamun's noteStart at "Spread syntax" and read through "Copy an array/object". You can skip the parts about rest parameters and arguments.
VideoOptional
JS destructuring in 100 secondsYouTube · Fireship · 3 min · English
MMamun's noteA fast overview. Watch 0:00–2:08. The "advanced tricks" part after that is for later.
VideoOptional
Modern JavaScript in Bangla #19: destructuringYouTube · Learn with Sumit · 17 min · Bangla
MMamun's noteIn Bangla. Sumit unpacks arrays and objects step by step. His
03 / 09

Explanation

You have an object, like a student's result, and you need three of its values. Writing result.name, result.marks and result.grade again and again is long. You can unpack them in one line. This is called destructuring.

Think of opening a parcel and placing each item on the table with its own label.

const result = { name: "Nusrat", marks: 82, grade: "A" };
const { name, marks } = result;
console.log(name, marks); // Nusrat 82

With { } on the left, JavaScript looks for keys with the same names and makes a variable for each. For arrays you use [ ], and the values are taken by position, not by name:

const [first, second] = ["Tamim", "Liton"];
// first is "Tamim", second is "Liton"

The three dots ... are called spread. They spread out every item of an array, or every key of an object, into a new one. That is how you make a copy with one thing changed:

const player = { name: "Shakib", runs: 45 };
const updated = { ...player, runs: 50 };
// player.runs is still 45, updated.runs is 50

Read { ...player, runs: 50 } as: copy everything from player, then set runs to 50. Order matters: a key written after the spread wins. For arrays, [...marks, 90] is a new array with 90 added at the end.

People often spell a key differently when destructuring: const { nam } = result gives undefined, with no error. The name on the left must match the key exactly. Another common mistake is changing the original (player.runs = 50) when the code needed a copy. In React, that bug makes the screen not update.

When you read code, look at the left side of =. { } or [ ] there means destructuring. ... on the right side, inside { } or [ ], means a new copy is being made.

Words to recognise
destructuringspread...copyobjectarray
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const result = { name: "Nusrat", marks: 82, grade: "A" };
2
const { name, marks } = result;
Mentor note · line 3
{ } on the left of = means object destructuring. It makes name and marks from the keys with the same names. grade is left alone.
4console.log(name, marks); // Nusrat 82
5
const [opener, keeper] = ["Tamim", "Liton", "Mushfiq"];
7
const updated = { ...result, marks: 90 };
console.log(result.marks, updated.marks); // 82 90
10
function showStudent({ name, grade }) {
12 return name + " got " + grade;
13}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const player = { name: "Shakib", runs: 45 };
2const updated = { ...player, runs: 50 };
3console.log(player.runs, updated.runs);
What does this print?
DrillFind the bug2 / 2
addRuns should return a new player with more runs, and leave the original player unchanged. Right now it changes the original. Fix it so all checks pass.
1
2
3
4
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3After const { city } = { name: "Rafi", city: "Sylhet" };, what is city?
  2. 2 / 3After const [a, b] = [10, 20, 30];, what is b?
  3. 3 / 3const bigger = [...marks, 90]; What happens to marks?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Destructuring and spread?

09 / 09

Done

You can now
Read a destructuring line and say which variables it makes, and read { ...obj, key: value } as a changed copy.
Next: Modules and npm Back to Phase 3
On this page
  1. 01Destructuring and spread
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You have an object, like a student's result, and you need three of its values. Writing result.name, result.marks and result.grade again and again is long. You can unpack them in one line. This is called destructuring.

Think of opening a parcel and placing each item on the table with its own label.

const result = { name: "Nusrat", marks: 82, grade: "A" };
const { name, marks } = result;
console.log(name, marks); // Nusrat 82

With { } on the left, JavaScript looks for keys with the same names and makes a variable for each. For arrays you use [ ], and the values are taken by position, not by name:

const [first, second] = ["Tamim", "Liton"];
// first is "Tamim", second is "Liton"

The three dots ... are called spread. They spread out every item of an array, or every key of an object, into a new one. That is how you make a copy with one thing changed:

const player = { name: "Shakib", runs: 45 };
const updated = { ...player, runs: 50 };
// player.runs is still 45, updated.runs is 50

Read { ...player, runs: 50 } as: copy everything from player, then set runs to 50. Order matters: a key written after the spread wins. For arrays, [...marks, 90] is a new array with 90 added at the end.

People often spell a key differently when destructuring: const { nam } = result gives undefined, with no error. The name on the left must match the key exactly. Another common mistake is changing the original (player.runs = 50) when the code needed a copy. In React, that bug makes the screen not update.

When you read code, look at the left side of =. { } or [ ] there means destructuring. ... on the right side, inside { } or [ ], means a new copy is being made.

Words to recognise
destructuringspread...copyobjectarray

You have an object, like a student's result, and you need three of its values. Writing result.name, result.marks and result.grade again and again is long. You can unpack them in one line. This is called destructuring.

Think of opening a parcel and placing each item on the table with its own label.

const result = { name: "Nusrat", marks: 82, grade: "A" };
const { name, marks } = result;
console.log(name, marks); // Nusrat 82

With { } on the left, JavaScript looks for keys with the same names and makes a variable for each. For arrays you use [ ], and the values are taken by position, not by name:

const [first, second] = ["Tamim", "Liton"];
// first is "Tamim", second is "Liton"

The three dots ... are called spread. They spread out every item of an array, or every key of an object, into a new one. That is how you make a copy with one thing changed:

const player = { name: "Shakib", runs: 45 };
const updated = { ...player, runs: 50 };
// player.runs is still 45, updated.runs is 50

Read { ...player, runs: 50 } as: copy everything from player, then set runs to 50. Order matters: a key written after the spread wins. For arrays, [...marks, 90] is a new array with 90 added at the end.

People often spell a key differently when destructuring: const { nam } = result gives undefined, with no error. The name on the left must match the key exactly. Another common mistake is changing the original (player.runs = 50) when the code needed a copy. In React, that bug makes the screen not update.

When you read code, look at the left side of =. { } or [ ] there means destructuring. ... on the right side, inside { } or [ ], means a new copy is being made.

Words to recognise
destructuringspread...copyobjectarray