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.
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:
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
Example 2: Use the new
keyword to create an array object
Example 3: Use the new
keyword to create a function object
Example 4: Use the new
keyword to create a regular expression object
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
Here’s how you can use the new
keyword to create and add three items to a properties object:
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:
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:
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:
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:
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:
Express Your Love for Coding!
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
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
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
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
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
.