Non primitive data types in JavaScript

An overview of non primitive data types in JavaScript.

Non primitive data types in JavaScript mean objects that can store and control data collections. Here is an overview of the popular non-primitive data types in JavaScript.

What are the data types?

Data types specify the kind of information a variable is holding so that the computer knows which computations can be done. Data types do not care exactly “what” the data is, but “how” it can be used.

There are 7 primitive data types in JavaScript

• string
• number
• BigInt
• boolean
• Symbol
• undefined
• null

There is only one non primitive data type in JavaScript

• object

Identifying JavaScript Data Types Examples

For any of the below values, you can use the type of operator to return the data type. Try it out yourself!

const bookTitle = “The Great Gatsby”;

console.log(typeof bookTitle) // string

Non primitive data types in JavaScript

Primitive data types in javascript with Examples

const automobileMake = ‘Honda’; // string

const temperatureInDegrees = 78; // number

const serialNumber = BigInt(83784639236484625) // bigint

const isRunning = true; // boolean

const typeOfSoda = Symbol(‘Pepsi’) // symbol

const computerBrand; // undefined

Let’s take a quick look at null.

const dogBreed = null; // object

The null data type will return as type object. Some places reference this as a bug built into JavaScript that cannot be fixed because it will break code that exists today. Other sources indicate that null is closely related to an object (similar to how NaN is related to number), so it was given the object type. Either way it is important to know that while this does return object, it is a Primitive data type.

Non primitive data types in JavaScript with Examples

const employee = {

  firstName: ‘John’,

  lastName: ‘Smith’,

  role: ‘developer’,

}; // object

const colors = [‘blue’, ‘green’, ‘purple’] // object

Let’s understand, What is  Non Primitive Data Types in JavaScript?

Stored on the Memory Heap

A non-primitive data type is assigned an address as a value, which then creates a pointer to that address location in the memory heap.

Mutable

Non-primitive data types are mutable, which means when they are modified, the original copy is modified. Modifying these will not create a copy at a different address. Any direct modifications will effect the same address in the heap.

const cup = {

  type: ‘plastic’,

  sizeInOunces: 12,

};

const mug = cup;

mug.type = ‘glass’;

console.log(cup) // { type: “glass”, sizeInOunces: 12 }

Huh?! So what happened? Why, when we updated type of the mug object, was cup effected? This example shows mutability! Let’s take a look behind the scenes…

1. cup is created in the call stack and is assigned an address.
2. The value of cup does not contain the object above, it contains another address pointing to a location in the memory heap.
3. The location in the memory heap contains the value of the cup object.
4. mug is assigned the value of cup. Since the value of cup contains an address pointing to a location in the memory heap, mug will also point to that same location in the memory heap.
5. Since these are both now pointing to the same location in the memory heap, any changes made to one will effect the other.

Dynamically Sized

Non-primitive data types can change in size. They can grow or shrink and hold multiple values.

const birds = [‘quail’, ‘parrot’];

birds.push(‘parakeet’);

console.log(birds) // [‘quail’, ‘parrot’, ‘parakeet’]

Complex Data Type

Non-primitive data types can be broken down into simpler data types.

Refer to the example under the section “Simple Data Type” of primitive values for an example of this.

Methods

Since non-primitive data types are objects, we can make use of JavaScripts built in methods to simplify our development. We can also create our own object methods by creating an object and assigning a function definition to a property.

Built-in method

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const reversedNumbers = numbers.reverse();

console.log(reversedNumbers); // [9, 8, 7, 6, 5, 4, 3, 2, 1]

Custom method

const dog = {

  name: ‘Jo’,

  breed: ‘poodle’,

  color: ‘white’,

  getInformation: function() {

    return ‘Name: ‘ + this.name + ‘, Breed: ‘ + this.breed + ‘, Color: ‘ + this.color;

  }

}

console.log(dog.getInformation()) // “Name: Jo, Breed: poodle, Color: white”

Let’s do a quick recap of non primitive data types in JavaScript

Primitive Data Types in javascript

• 7 total in JavaScript
• Stored on the call stack
• Immutable – will be made new in the call stack, never overwrites.
• Cannot grow or expand in size
• Cannot be broken down into a simpler data type
• Cannot use methods (but also remember… autoboxing!)

Non Primitive Data Types in Javascript

• 1 total in JavaScript
• Stored in the memory heap
• Mutable – will be modified in the memory heap and overwritten.
• Can grow or expand in size
• Can be broken down into a simpler data type
• Can use methods