An object and its reference13 / 19

Changing an object or replacing a reference?

How changing a property differs from assigning a variable, and what const prevents.

In the previous lesson, we examined two variables that refer to one object. Now we will compare two actions: changing an object property and assigning a different value to a variable.

const player = { hp: 100 };
let target = player;
target.hp = 50;
target = null;
// player.hp is 50; the object is still reachable
  1. const player = { hp: 100 } creates an object and stores a reference to it in player.
  2. let target = player assigns to target the same object value. Both variables now hold references to one object. This is not a reference from target to the variable player: each variable provides access to the object independently.
  3. target.hp = 50 accesses the object through the reference held by target and writes a new value to its hp property. The shared object changes, so both target.hp and player.hp now equal 50.
  4. target = null replaces only the value of target. It now holds null instead of a reference. The value of player and the object itself stay the same; the object remains accessible through player.
Changed the propertytarget.hp = 50
player
Player object{ hp: 50 }
target

The property changed. Both references remain.

Changed the variabletarget = null
player
The same object{ hp: 50 }
target
null

target no longer points to the object. player still does.

Two consecutive states of one program. The object in the second state is the same; only the value of target has changed.

Executing line by line

Interactive diagram. #1 is an illustrative object label, not a memory address.

  1. const player = { hp: 100 }; Next
  2. let target = player;
  3. target.hp = 50;
  4. target = null;

Variables

playerLine not executed yet
targetLine not executed yet

Heap

The example object has not been created yet
player.hp
—
target.hp
—

No lines have run yet. We will start by creating an object.

Executed 0 of 4
Key takeaway
  1. A variable with an object value accesses the object through a reference. Assigning this value to another variable copies the reference, not the object.
  2. Changing a property changes the shared object. Assigning a different value to one variable replaces only its own reference, leaving the other references and the object unchanged.
  3. const prevents replacing the variable's value; it does not make the object itself immutable.

Check the primary source ↗

ECMA-262 · Object Type↗An object consists of properties; reading or changing a property operates on the object itself.ECMA-262 · Let and Const Declarations↗Declaring variables with let and const and assigning their initial values.ECMA-262 · SetMutableBinding↗Assignment changes a particular variable's value; attempting to replace a const value throws a TypeError.ECMA-262 · GetValue / PutValue↗Reading values, and the distinction between writing an object property and assigning a variable.V8 · Pointer Compression↗The internal representation of object references: pointers and compressed offsets rather than numeric addresses exposed to JavaScript.V8 · Moving objects and updating pointers↗When V8's garbage collector moves objects, it updates the references pointing to them.