Primitive Types & Reference Types in JavaScript

primitive-reference-types-javascript.md

Primitive Types & Reference Types in JavaScript

An explanation of JavaScript's pass-by-value, which is unlike pass-by-reference from other languages.

Facts

• JavaScript has 2 kinds of variable types: primitive and reference.
• A fixed amount of memory is reserved after creation of every variable.
• When a variable is copied, it's in-memory value is copied.
• Passing a variable to a function via a call also creates a copy of that variable.

Primitive Types

The in-memory value of a primitive type is it's actual value (e.g. boolean true, number 42). A primitive type can be stored in the fixed amount of memory available.

• null
• undefined
• Boolean
• Number
• String

Primitive types are also known as: scalar types or simple types.

Reference Types

A reference type can contain other values. Since the contents of a reference type can not fit in the fixed amount of memory available for a variable, the in-memory value of a reference type is the reference itself (a memory address).

• Array
• Object
• Function

Reference types are also known as: complex types or container types.

Code Examples

Copying a primitive:

-> live on pytut

var a = 13         // assign `13` to `a`
var b = a          // copy the value of `a` to `b`
b = 37             // assign `37` to `b`
console.log(a)     // => 13

The original was not changed, we can only change the copy.

Copying a reference:

-> live on pytut

var a = { c: 13 }  // assign the reference of a new object to `a`
var b = a          // copy the reference of the object inside `a` to new variable `b`
b.c = 37           // modify the contents of the object `b` refers to
console.log(a)     // => { c: 37 }

The original was also changed, since the reference got copied.

Cloning a "flat" reference:

-> live on pytut

// not a nested object
var a = { c: 13 }               // assign the reference of a new object to `a`
var b = Object.assign({}, a);   // copy the reference of the object inside `a` to new variable `b`
b.c = 37                        // modify the contents of the object `b` refers to
console.log(a)                  // => { c: 13 }

The original was not changed, since we cloned the reference variable to another reference. Warning: This is a shallow copy. Only the first level properties would be copied but the lower levels would be referenced.

Cloning a "nested" reference:

-> live on pytut

var x = [0];
// a nested object
var a = { c: 13, d: x };        // assign the reference of a new object to `a`
var b = Object.assign({}, a);   // copy the reference of the object inside `a` to new variable `b`
b.c = 37                        // modify the contents of the object `b` refers to
b.d.push(1);                    // modify a nested reference type in b
console.log(a)                  // => { c: 13, d: [0, 1] }
console.log(x)                  // => [0, 1]