Skip to main content

Non-primitive Data Type – What Is a JavaScript Object?

A non-primitive data is a JavaScript value that can contain multiple other values.

For instance, a traveling box is an item that can contain multiple items.

Illustration of a non-primitive data

Non-primitive data depicted with plush toys inside a box. Photo by Alexas on Pixabay

Similarly, non-primitive data is a JavaScript value that can encase multiple JavaScript values.

Object is the only non-primitive data that exist in JavaScript. But what exactly is a JavaScript object? Let's find out.

What Is an Object in JavaScript?​

An object is a non-primitive JavaScript component that you can use to bundle multiple items into a single one.

Objects allow you to store multiple items into a JavaScript variable—which can accept only a single element.

Types of JavaScript Objects​

The four (4) main types of JavaScript objects are:

Buy sketchbook for web design, app development, software engineering

Important Stuff to Know about JavaScript Objects​

Keep these three essential pieces of info in mind whenever you choose to use JavaScript objects.

Info 1: JavaScript's new keyword can create objects​

You can use the new keyword to create any JavaScript object.

Let's see some examples.

Example 1: Use the new keyword to create a properties object​

console.log(new Object());

// The invocation above will return: {}

Try it on StackBlitz

Example 2: Use the new keyword to create an array object​

console.log(new Array());

// The invocation above will return: []

Try it on StackBlitz

Example 3: Use the new keyword to create a function object​

console.log(new Function());

// The invocation above will return: ƒ anonymous()

Try it on StackBlitz

Example 4: Use the new keyword to create a regular expression object​

console.log(new RegExp());

// The invocation above will return: /(?:)/

Try it on StackBlitz

Rakuten Kobo US

Info 2: Object literal syntax vs. the new keyword – What's the difference?​

It is better to create objects using the literal syntax rather than the new keyword.

The literal syntax is better because of its simplicity, readability, and execution speed.

note
  • The literal version of new Object() is {}.
  • new Array()'s literal version is [].
  • The literal syntax of new Function() is function (){}.
  • new RegExp()'s literal equivalence is //.

Below are some examples.

Example 1: new keyword vs. object literal​

Here's how you can use the new keyword to create and add three items to a properties object:

// Initialize myBio with a properties object:
const myBio = new Object();

// Add three items to myBio object:
myBio.firstName = "Oluwatobi";
myBio.lastName = "Sofela";
myBio.website = "CodeSweetly.com";

// Check myBio's content:
console.log(myBio);

// The invocation above will return:
{firstName: "Oluwatobi", lastName: "Sofela", website: "CodeSweetly.com"}

Try it on StackBlitz

The snippet above first used the new Object() syntax to create a properties object. Then, it added three items to the newly created object.

Let's now see the object literal equivalence of the new Object() syntax:

// Initialize myBio with a properties object:
const myBio = {};

// Add three items to myBio object:
myBio.firstName = "Oluwatobi";
myBio.lastName = "Sofela";
myBio.website = "CodeSweetly.com";

// Check myBio's content:
console.log(myBio);

// The invocation above will return:
{firstName: "Oluwatobi", lastName: "Sofela", website: "CodeSweetly.com"}

Try it on StackBlitz

You can see that the object literal syntax above is simpler and easier to read than the new Object() alternative.

You can further simplify your code like this:

// Initialize myBio with a properties object containing three items:
const myBio = {
  firstName: "Oluwatobi",
  lastName: "Sofela",
  website: "CodeSweetly.com"
};

// Check myBio's content:
console.log(myBio);

// The invocation above will return:
{firstName: "Oluwatobi", lastName: "Sofela", website: "CodeSweetly.com"}

Try it on StackBlitz

Example 2: new keyword vs. array literal​

Here's how you can use the new keyword to create and add three items to an array object:

// Initialize myBio with an array object:
const myBio = new Array();

// Add three items to myBio array:
myBio[0] = "Oluwatobi";
myBio[1] = "Sofela";
myBio[2] = "CodeSweetly.com";

// Check myBio's content:
console.log(myBio);

// The invocation above will return:
["Oluwatobi", "Sofela", "CodeSweetly.com"];

Try it on StackBlitz

The snippet above used the new Array() syntax to create an array object. It then added three items to the newly created array.

Let's now see the array literal equivalence of the new Array() syntax:

// Initialize myBio with an array object:
const myBio = [];

// Add three items to myBio array:
myBio[0] = "Oluwatobi";
myBio[1] = "Sofela";
myBio[2] = "CodeSweetly.com";

// Check myBio's content:
console.log(myBio);

// The invocation above will return:
["Oluwatobi", "Sofela", "CodeSweetly.com"];

Try it on StackBlitz

You can see that the array literal syntax above is simpler and easier to read than the new Array() alternative.

You can further simplify your code like so:

// Initialize myBio with an array object containing three items:
const myBio = ["Oluwatobi", "Sofela", "CodeSweetly.com"];

// Check myBio's content:
console.log(myBio);

// The invocation above will return:
["Oluwatobi", "Sofela", "CodeSweetly.com"];

Try it on StackBlitz

Info 3: An object inherits its variable's name​

Whenever you store an object in a variable, the object, by convention, inherits the variable's name.

Let's consider the following examples:

Example 1: A properties object inherits its variable's name​

const myBio = { website: "CodeSweetly.com" };

In the snippet above, const myBio is a variable, while { website: "CodeSweetly.com" } is a properties object.

However, it is okay to say { website: "CodeSweetly.com" }'s name is "myBio object" because we put it inside the variable named myBio.

Example 2: An array object inherits its variable's name​

const myBio = ["CodeSweetly.com"];

In the snippet above, const myBio is a variable, while ["CodeSweetly.com"] is an array object.

However, it is okay to say ["CodeSweetly.com"]'s name is "myBio array" because we kept it inside the variable named myBio.

Example 3: A function object inherits its variable's name​

const myBio = function () {
  console.log("CodeSweetly.com");
};

In the snippet above, const myBio is a variable, while function () { console.log("CodeSweetly.com") } is a function object.

However, it is okay to say function () { console.log("CodeSweetly.com") }'s name is "myBio function" because we stored it inside the variable named myBio.

Example 4: A regular expression object inherits its variable's name​

const myBio = /CodeSweetly.com/;

In the snippet above, const myBio is a variable, while /CodeSweetly.com/ is a regular expression object.

However, it is okay to say /CodeSweetly.com/'s name is "myBio regular expression" because we assigned it to the variable named myBio.

Overview​

Non-primitive elements are objects that you can use to bundle up multiple data into a single item.

Functions, regular expressions, arrays, and properties objects are the four types of non-primitive elements in JavaScript.