DEV Community

Cover image for JavaScript Non-Primitive Data Types
Ashwani Singh
Ashwani Singh

Posted on

JavaScript Non-Primitive Data Types

Non-Primitive data types

Non-primitive data types in JavaScript are derived from the primitive data types and are also known as reference data types or derived data types. These data types are stored in the heap memory of the system, unlike primitive data types which are stored in the stack space of the system.

In computer science, an object is a value in memory which is possibly referenced by an identifier. In JavaScript, objects are the only mutable values. Functions are, in fact, also objects with the additional capability of being callable.

const arr = [1,3,4,5];
console.log(typeof arr); // object

const obj = {name:"nick" age: 30};
console.log(typeof obj) //object
Enter fullscreen mode Exit fullscreen mode

1. Array

  • JavaScript arrays are written with square brackets.
  • Array items are separated by commas.
  • An array is a special variable, which can hold more than one value.
  • The following code declares (creates) an array called cars, containing three items (car names):
const cars = ["Saab", "Volvo", "BMW"];
Enter fullscreen mode Exit fullscreen mode

Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

You can also create an array, and then provide the elements:

const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Enter fullscreen mode Exit fullscreen mode

Accessing Array Elements:

You access an array element by referring to the index number:

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Enter fullscreen mode Exit fullscreen mode

2. Objects

JavaScript objects are written with curly braces {}.
Objects are variables too. But objects can contain many values.
Object properties are written as name:value pairs, separated by commas.

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Enter fullscreen mode Exit fullscreen mode

The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.

Accessing Object Properties:

You can access object properties in two ways:

objectName.propertyName
Enter fullscreen mode Exit fullscreen mode

or

objectName["propertyName"]
Enter fullscreen mode Exit fullscreen mode

How is an array an 'object'?

As we know, arrays fall in the object category of JavaScript data types i.e they are stored by references and NOT by their actual values.

JavaScript simplifies the work of typeof by returning 'object' whenever the given expression is a reference to some data in memory.

An array is indeed a reference to an ordered bunch of data in memory and likewise translates to 'object' when inspected by the typeof operator.

3 Difference between Array and Object Data Types in JavaScript

In JavaScript, both arrays and objects are used to store and manipulate data, but they have some key differences. Let's explore these differences:

Arrays:

  1. An array is a collection of data stored in a sequence of memory locations.
  2. It can store various data types, including integers, floats, strings, and booleans .
  3. Array elements can be accessed using index numbers, starting from 0.
  4. Arrays are mutable, meaning you can add, remove, and modify elements in an array.
  5. Arrays have built-in methods and properties that allow for easy manipulation and iteration, such as push(), pop(), length, and forEach() .

Objects:

  1. An object is a mutable data structure used to represent a thing or entity.
  2. It stores data in key-value pairs, where the keys can be any string or symbol except for undefined .

Top comments (2)

Collapse
 
firecrow8 profile image
Stephen Firecrow Silvernight

I'm curious in your example of the two access types for objects, weather the performance penalty from re-evaluating the static-object-cache has much of an impact.

the properties object.property can be used with a static offset, whereas object['property'] or even var type = 'property'; object[type], cannot be optimized that way.

I've also come to love Array.isArray(arrOrNot) as a way to solve the fact that typeof will return 'object' for both.

Thanks for laying this out so cleanly, it was thought provoking.

Collapse
 
imashwani profile image
Ashwani Singh

When using the dot notation (object.property), a static offset can be used to directly access the property. This means that the property is known at the time of writing the code and can be optimized accordingly.

On the other hand, when using square brackets (object['property']) or a variable to access properties (object[type]), the property cannot be optimized in the same way. This is because the property is not known at the time of writing the code and may change dynamically