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.
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?
Section titled “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
Section titled “Types of JavaScript Objects”The four (4) main types of JavaScript objects are:
Important Stuff to Know about JavaScript Objects
Section titled “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
Section titled “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
Section titled “Example 1: Use the new keyword to create a properties object”console.log(new Object());
// The invocation above will return: {}
Example 2: Use the new
keyword to create an array object
Section titled “Example 2: Use the new keyword to create an array object”console.log(new Array());
// The invocation above will return: []
Example 3: Use the new
keyword to create a function object
Section titled “Example 3: Use the new keyword to create a function object”console.log(new Function());
// The invocation above will return: ƒ anonymous()
Example 4: Use the new
keyword to create a regular expression object
Section titled “Example 4: Use the new keyword to create a regular expression object”console.log(new RegExp());
// The invocation above will return: /(?:)/
Info 2: Object literal syntax vs. the new
keyword – What’s the difference?
Section titled “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.
Below are some examples.
Example 1: new
keyword vs. object literal
Section titled “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"}
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"}
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"}
Example 2: new
keyword vs. array literal
Section titled “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"];
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"];
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"];
Info 3: An object inherits its variable’s name
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
.