Primitive vs Reference/Object Types in Javascript

Introduction

In my previous post I explained about data types in javascript which briefly introduces you to two categories of data types i.e primitive and reference/object data types. In this post I will try to explain more on differences between primitive and reference data types.

Primitive Types

  • The variables that are assigned primitive type data such as number, string etc holds the actual value but not the address (like reference types).
  • The primitive values are typically stored in stack memory.
  • Variables holding primitive values when assigned to a new variable,  a new copy of that value is assigned.
  • Also see data types in javascript for various primitive data types available in javascript.

Example 1:

var name = "techbuk";
var newName = name;  // a new copy is created and assigned
// --- see memory state 1 in the image below
console.log(name);      // prints "techbuk"
console.log(newName);   // prints "techbuk"

newName = "blah";       // name is unchanged
// --- see memory state 2 in the image below

console.log(name);      // prints "techbuk"
console.log(newName);   // prints "blah"
primitive type – memory state
  • Primitive values follow call by value a.k.a pass by value which means when a primitive value is passed as an argument to a function, the receiver function creates a new variable with the same value passed and hence any changes to that value inside the function won’t affect the actual variable (outside the function)

Example 2:

var name = "John";

function appendLastName(name) {  // a local copy of name is created
    name = name + " Doe";
    console.log(name);  // prints "John Doe"
}

console.log(name);      // prints "John"
appendLastName(name);   // passing value
console.log(name);      // still prints "John"

Reference/Object Types

  • The variables that are assigned reference type data such as an object, array etc holds a reference(address) to the object but not the actual value (like primitives) .
  • The objects are typically stored in the heap memory which have references stored in variables on the stack.
  • Hence these variables can be considered as pointers to objects stored on the heap. When these variables are assigned to a new variable the new variables also start pointing to the same instance in the heap memory.
  • Also see data types in javascript for various reference date types available in javascript.

Example 3:

var nameObj = { name: "techbuk" };
var newNameObj;
// --- see memory state 1 in the image below

newNameObj = nameObj;  // assigns the same address that nameObj is pointing to
// --- see memory state 2 in the image below

newNameObj.name = "blah";
// --- see memory state 3 in the image below
console.log(nameObj.name);  //prints "blah"
console.log(newNameObj.name);  //prints "blah"

reference type – memory state

 

  • Reference types follow call by reference a.k.a pass by reference which means when a reference type is passed as an argument to a function, the receiver function creates a new variable with the same reference or address passed and hence any changes to that object inside the function will affect the actual variable (outside the function)

Example 4:

var nameObj = {name: "John"};

function appendLastName(obj) { // obj is reference to original nameObj
    obj.name = obj.name + " Doe";
}

console.log(nameObj.name);    // prints "John"
appendLastName(nameObj);      // passing reference
console.log(nameObj.name);    // prints "John Doe"

Example 5: ( A more complex scenario of a nested object)

var addrObj = {
    street:  "12 market street",
    city: "San Francisco",
    zip: "94101"
}
var userObj = {
     name: "techbuk",
     age: 20,
     address: addrObj  // object property is another object
};
// --- see the image below for memory representation
reference type – memory state

Conclusion

It is important for any javascript developer to understand in depth the difference between primitive and reference data types. To summarize the it in brief primitive types are stored and passed between functions as values where as reference types are stored and passed as references (addresses).