Quick Tip: How JavaScript References Work

Understanding JavaScript References

In JavaScript, references play a crucial role, especially when dealing with objects and arrays. Here’s a quick overview of how references work in JavaScript:

Primitives vs. Objects

JavaScript has two main categories of data types: primitives and objects.

  • Primitives: Include types like `string`, `number`, `boolean`, `null`, `undefined`, and `symbol`. Primitives are immutable and are copied by value.
let a = 10;
let b = a;
b = 20;
console.log(a); // 10
console.log(b); // 20
  • Objects: Include objects, arrays, functions, and anything that is not a primitive. Objects are mutable and are copied by reference.
let obj1 = { key: 'value' };
let obj2 = obj1;
obj2.key = 'new value';
console.log(obj1.key); // 'new value'
console.log(obj2.key); // 'new value'

References and Mutability

  • By Value: When you assign a primitive value to a variable, the value is stored directly in the variable. If you assign that variable to another variable, the value is copied.
let x = 'hello';
let y = x;
y = 'world';
console.log(x); // 'hello'
console.log(y); // 'world'
  • By Reference: When you assign an object to a variable, the variable stores a reference to the object’s location in memory. If you assign that variable to another variable, both variables refer to the same object.
let array1 = [1, 2, 3];
let array2 = array1;
array2.push(4);
console.log(array1); // [1, 2, 3, 4]
console.log(array2); // [1, 2, 3, 4]

Changing References

When you reassign an object variable, it changes the reference and no longer points to the original object.

let objA = { key: 'initial' };
let objB = objA;
objB = { key: 'new' };
console.log(objA.key); // 'initial'
console.log(objB.key); // 'new'

Copying Objects

To create a new copy of an object rather than a reference, you can use methods like `Object.assign()` or the spread operator `....`

let original = { key: 'value' };
let copy = { ...original };
copy.key = 'new value';
console.log(original.key); // 'value'
console.log(copy.key); // 'new value'

Deep Copying

For nested objects, shallow copies (like `Object.assign()` and `...`) are insufficient. Deep copying is needed.

let nested = { inner: { key: 'value' } };
let shallowCopy = { ...nested };
shallowCopy.inner.key = 'new value';
console.log(nested.inner.key); // 'new value'

let deepCopy = JSON.parse(JSON.stringify(nested));
deepCopy.inner.key = 'another value';
console.log(nested.inner.key); // 'new value'
console.log(deepCopy.inner.key); // 'another value'

Summary

  • Primitives are copied by value.
  • Objects (including arrays and functions) are copied by reference.
  • Use shallow copying techniques (`Object.assign()`, spread operator) for single-level objects.
  • Use deep copying techniques (`JSON.parse(JSON.stringify())`, libraries like Lodash) for nested objects.

Understanding these concepts helps prevent unexpected behavior in your JavaScript code and aids in managing data efficiently.

Sijon

Sijon