Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 7 / 12Objects
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Objects
01 / 08Overview

Objects

You'll learn to read objects, and to see when two names point to the same object.

Why it mattersAlmost all app data is objects, like a user, a post or a habit, and many bugs come from changing one by accident.
about 75 min·needs: Arrays
02 / 08

Watch & read

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

Article
Objectsjavascript.info · 15 min · English
MMamun's noteRead "Literals and properties" and "Square brackets". You can skip the rest of the page for now.
Video
Reference vs value in JavaScriptYouTube · Web Dev Simplified · 14 min · English
MMamun's noteWatch from 1:15. The visual example (1:15–7:43) draws "two names, one object" step by step. The code example after it repeats the idea in code.
ArticleOptional
Object references and copyingjavascript.info · 10 min · English
MMamun's noteRead "Comparison by reference" and the start of "Cloning and merging". Skip "Nested cloning".
VideoOptional
JavaScript Bangla tutorial #13: objectYouTube · Learn with Sumit · 18 min · Bangla
MMamun's noteIn Bangla. Sumit explains what an object is, with keys, values and methods. Good for the first half of this topic.
03 / 08

See it step by step

Two names, one object, and then a real copy.

a
#1name: "Rafi"year: 2
student.js
1const a = { name: "Rafi", year: 2 };
2const b = a;
3b.year = 3;
4console.log(a.year);
5const c = { ...a };
6c.year = 4;
7console.log(a.year);
a is a name for a new object. The #1 tag marks that object.
Step 1 / 7
04 / 08

Explanation

An object groups values under names, called keys: { name: "Rafi", year: 2 }. You read a value with a dot, like user.name, and change it the same way: user.year = 3.

Here is the surprising part. When you write const b = a, you do not get a second object. You get a second name for the same object. Change it through b, and a sees the change too, because there is only one object.

To get a real copy, spread it into a new object: const c = { ...a }. Now c is its own object, and changing it leaves a alone. React relies on this: you make a new object instead of changing the old one.

Words to recognise
objectkeyvalueproperty.referencecopy...
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is user.name if const user = { name: "Nusrat", year: 3 }?
  2. 2 / 3After const b = a; b.x = 5;, what is a.x?
  3. 3 / 3Which line makes a separate copy of a?
06 / 08

Explain it back

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

How confident are you with Objects?

08 / 08

Done

You can now
Read and change values inside an object, and tell a copy from a shared reference.
Next: Arrays and map Back to Phase 2
On this page
  1. 01Objects
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & 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 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Objects
01 / 08Overview

Objects

You'll learn to read objects, and to see when two names point to the same object.

Why it mattersAlmost all app data is objects, like a user, a post or a habit, and many bugs come from changing one by accident.
about 75 min·needs: Arrays
02 / 08

Watch & read

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

Article
Objectsjavascript.info · 15 min · English
MMamun's noteRead "Literals and properties" and "Square brackets". You can skip the rest of the page for now.
Video
Reference vs value in JavaScriptYouTube · Web Dev Simplified · 14 min · English
MMamun's noteWatch from 1:15. The visual example (1:15–7:43) draws "two names, one object" step by step. The code example after it repeats the idea in code.
ArticleOptional
Object references and copyingjavascript.info · 10 min · English
MMamun's noteRead "Comparison by reference" and the start of "Cloning and merging". Skip "Nested cloning".
VideoOptional
JavaScript Bangla tutorial #13: objectYouTube · Learn with Sumit · 18 min · Bangla
MMamun's noteIn Bangla. Sumit explains what an object is, with keys, values and methods. Good for the first half of this topic.
03 / 08

See it step by step

Two names, one object, and then a real copy.

a
#1name: "Rafi"year: 2
student.js
1const a = { name: "Rafi", year: 2 };
2const b = a;
3b.year = 3;
4console.log(a.year);
5const c = { ...a };
6c.year = 4;
7console.log(a.year);
a is a name for a new object. The #1 tag marks that object.
Step 1 / 7
04 / 08

Explanation

An object groups values under names, called keys: { name: "Rafi", year: 2 }. You read a value with a dot, like user.name, and change it the same way: user.year = 3.

Here is the surprising part. When you write const b = a, you do not get a second object. You get a second name for the same object. Change it through b, and a sees the change too, because there is only one object.

To get a real copy, spread it into a new object: const c = { ...a }. Now c is its own object, and changing it leaves a alone. React relies on this: you make a new object instead of changing the old one.

Words to recognise
objectkeyvalueproperty.referencecopy...
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is user.name if const user = { name: "Nusrat", year: 3 }?
  2. 2 / 3After const b = a; b.x = 5;, what is a.x?
  3. 3 / 3Which line makes a separate copy of a?
06 / 08

Explain it back

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

How confident are you with Objects?

08 / 08

Done

You can now
Read and change values inside an object, and tell a copy from a shared reference.
Next: Arrays and map Back to Phase 2
On this page
  1. 01Objects
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

An object groups values under names, called keys: { name: "Rafi", year: 2 }. You read a value with a dot, like user.name, and change it the same way: user.year = 3.

Here is the surprising part. When you write const b = a, you do not get a second object. You get a second name for the same object. Change it through b, and a sees the change too, because there is only one object.

To get a real copy, spread it into a new object: const c = { ...a }. Now c is its own object, and changing it leaves a alone. React relies on this: you make a new object instead of changing the old one.

Words to recognise
objectkeyvalueproperty.referencecopy...

An object groups values under names, called keys: { name: "Rafi", year: 2 }. You read a value with a dot, like user.name, and change it the same way: user.year = 3.

Here is the surprising part. When you write const b = a, you do not get a second object. You get a second name for the same object. Change it through b, and a sees the change too, because there is only one object.

To get a real copy, spread it into a new object: const c = { ...a }. Now c is its own object, and changing it leaves a alone. React relies on this: you make a new object instead of changing the old one.

Words to recognise
objectkeyvalueproperty.referencecopy...