References, copies and equality

Values versus references

A primitive (number, string, boolean…) is stored as the value itself. An object or array is stored somewhere in memory, and the variable holds a reference: a pointer to where it lives. Assigning an object to another variable copies the reference, not the object.

const original = { qty: 1 };
const alias = original;     // same object, two names
alias.qty = 5;
console.log(original.qty);  // 5

=== compares identity for objects

console.log([1, 2] === [1, 2]);   // false: two different arrays
const a = { x: 1 };
const b = a;
console.log(a === b);             // true: the same object
console.log(JSON.stringify({ x: 1 }) === JSON.stringify({ x: 1 })); // true (compares content, key order matters)

Functions receive references too

Passing an object to a function passes the reference. If the function changes the object, the caller sees the change. This is called mutation, and unexpected mutation is one of the most common bugs in real projects.

function addFreeGift(cart) {
  cart.push('free keychain');   // mutates the caller's array
  return cart;
}
const myCart = ['shoes'];
addFreeGift(myCart);
console.log(myCart); // ['shoes', 'free keychain'] (changed!)

Shallow copies

Spread ([...arr], {...obj}), Object.assign({}, obj), arr.slice() and Array.from(arr) make a shallow copy: a new outer array or object, but nested objects inside are still shared references.

const order = { id: 1, address: { city: 'Pune' } };
const copy = { ...order };
copy.id = 2;                 // fine: id is a primitive in the new object
copy.address.city = 'Nashik'; // changes the SHARED nested object!
console.log(order.address.city); // 'Nashik'

Deep copies with structuredClone

A deep copy duplicates every level. structuredClone(value) is built into modern browsers and Node.js 17+. It handles nested objects, arrays, Dates, Maps and Sets, but not functions or class methods.

const deep = structuredClone(order);
deep.address.city = 'Thane';
console.log(order.address.city); // 'Nashik' (unchanged this time)

Object.freeze

Object.freeze(obj) stops changes to an object's own properties (in strict mode a change throws; otherwise it is ignored). The freeze is shallow: nested objects can still change. It is useful for constants such as configuration.

'use strict';
const CONFIG = Object.freeze({ gst: 18, limits: { cod: 50000 } });
// CONFIG.gst = 5;          // TypeError in strict mode
CONFIG.limits.cod = 1;      // allowed: freeze is shallow