3.1 updating of reference and primitive type

In JavaScript, variables fall into two big families: primitive types and reference types. Knowing the difference between them is fundamental for React, because state updates rely on creating new copies of objects and arrays rather than mutating the existing ones. Let's see what really happens behind the scenes when you copy a value.

Primitives are copied, objects are referenced

Numbers, strings, booleans and a few others are primitive. When you write const number2 = number;, JavaScript copies the actual value, so number and number2 become independent. Reassigning one does not affect the other.

Objects and arrays are reference types. The variable does not hold the object itself - it holds a pointer to where the object lives in memory. So const secondPerson = person; only copies the pointer: both names refer to the same underlying object. Mutating one mutates the other, which often surprises developers. 

const number = 1;
const number2 = number;       // real copy of the value
console.log(number2);          // 1

const person = { name: "Matthieu" };
const secondPerson = person;  // SAME object behind the scenes
person.name = "Max";
console.log(secondPerson.name);   // "Max", surprise!

const realCopy = { ...person, name: "Matthieu" };   // true new object

To produce an actual new object, use the spread operator to copy the properties into a brand-new container and add or override what you want. The same logic applies to arrays. In React this matters constantly: when you update state, you must return a new object/array, not a mutated version of the previous one, otherwise React cannot detect the change.

Summary

This lesson explains the fundamental distinction between primitive types (numbers, strings, booleans) and reference types (objects, arrays) in JavaScript. Primitive types are copied by value—each variable gets its own independent copy of the data. Reference types are copied by reference, meaning variables store pointers to the same object in memory, so changes to one variable automatically affect all others referencing that object. The lesson demonstrates this critical concept with examples and shows how to use the spread operator (...) to create true independent copies of objects and arrays, preventing unintended mutations across the application.

Key points

  • Primitive types (number, string, boolean) copy by VALUE when assigned to another variable
  • Reference types (objects, arrays) copy by REFERENCE—variables point to the same memory location
  • Modifying a property of a referenced object affects all variables pointing to that object
  • The spread operator (...) creates true independent copies of objects and arrays
  • Understanding this distinction is essential to avoid unexpected mutations and bugs in your application

FAQ

What is the key difference between primitive and reference types?

Primitive types (number, string, boolean) copy their actual value when assigned, so each variable is independent. Reference types (objects, arrays) copy only a pointer to the memory location, so all variables referencing the same object share changes.

Why does modifying an object's property affect other variables assigned to it?

Because all variables hold the same reference (pointer) to that object in memory. When you modify the object through one variable, the changes are visible through all variables pointing to it.

How do you create a true independent copy of an object?

Use the spread operator (...) to create a new object with the same properties, such as `newPerson = { ...person }`. This copies the object itself, not just the reference, making it truly independent.