Objects in JavaScript

There’s no way to learn JavaScript without getting the hang of objects. In JS, they are dominant and widely used. The thing is, all JS values can be referred to as objects – numbers, strings, arrays, booleans, arrays, functions, regular expressions, maths, etc.

The only instance when the value is not an object is when it’s a primitive value – a boolean, number, or string that’s not marked with the new keyword. Null and undefined are primitive values as well – thus, they are not JS objects.

Seeing how broad the concept of an object is, you might assume it is difficult to handle. The thing is, handling JS objects is relatively straightforward and follows common sense. In this guide on objects in JavaScript, we’ll discuss different ways to create an object, modify, and manipulate it.

Creating an Object: All Possible Ways

Depending on the project you are working on, your level of tech proficiency, or personal preferences, you can use different ways to create objects in JavaScript. Let’s go over them one by one.

  • Using the constructor. Object() is the simplest way to define a JavaScript object. Right now, it is rarely used among developers and is not considered an industry standard. 
  • Using Object.create(). By calling the method, you will create a new object by passing the parameters of a prototype object over to it. 
  • Using {}. This approach is similar to the previous one since you are extending a prototype as an argument – in this case, a null. 
  • Using the function constructor. This method may seem a little complicated for beginning developers since you have to know how to operate the keyword ‘this’ and know how to bind object and function prototypes. 
  • Using classes in JavaScript. You can declare a ‘MyObject’ class and define its properties.

Object Properties in JavaScript

A property of an object is its name or a value of any type attached to it. A looser definition of object properties is that they are the characteristics of a given object. There are two major ways to attach a property to a JavaScript object.

Bracketed notation

To retrieve the property value of the object using bracketed dotation, write the name of the object followed by brackets and the name of the property inside.

For example:

Object["property"];

Dotted notation

The dotted notation is another way to accomplish the same outcome but the look of code is slightly different. To retrieve the value of the property using dotted notation, type in the name of the object followed by a dot and the name of the property with no spaces in between.

For example:

object.property;

Both approaches are popular among software developers and come with respective pros and cons. On the one hand, a dotted notation is more readable and faster to type. On the other, bracketed notation allows accessing variables that contain special characters.

Changing object properties

The most common way to modify properties in javaScript is by assigning new values to existing properties. For instance, to modify a property in the ‘object.property’ example, assign a different value to an existing property:

Object.property = "new assigned value";

Deleting object properties

To delete an object property, developers use the ‘delete’ keyword. Here’s how the line of code will look:

delete object.property;

If the deletion was successful or the property doesn’t exist, the operation will return as true.

JavaScript Object Methods

Methods are another concept that’s strongly attached to objects in JavaScript. A method is a value assigned to the property, not the object itself. Simply put, you can think of an object as an action an object can perform.

Another way to distinguish methods and properties is by thinking of the former as verbs and the latter – as adjectives.

JavaScript object methods are static- they are applied directly to the constructor and refer to instances as parameters. Let’s go over the built-in methods the language offers and examine their functions.

Object.create()

Object.create() (you’ve seen this one before) is a method developers use to create new objects and extend their properties to an existing prototype. It increases the readability of the code since there’s no need to assign multiple properties to the object – you can attach them to the prototype instead.

Object.keys()

This method helps collet the keywords of an object into a single array. You can also use it to find out how long an object is.

Object.values()

The method handles values to the way ject.key() interacts with keys. You can use it to return the object’s data as an array.

Object.entries()

Object.entries returns key/value pairs of an object. It collects all such pairs as a nested array. The method allows developers to work with other methods – such as forEach(). Keep in mind that Object.entries() will not display the properties of the prototype – only those the actual object possesses.

Object.assign()

The method helps copy object values to different objects. The method also enables merging objects together. The method is used by developers for shallow cloning.

Object.freeze()

This method helps preserve the current state of properties and values, inhibiting any modifications. A developer will not be able to assign or remove object properties. Object.isFrozen() is a complementary method used in conjunction with Object.freeze() to check if an object is frozen or not.

Object.seal()

The method also prevents new properties from creation. However, it allows developers to modify existing properties and values. Be sure to refresh the console before you run the method, not to get an error message.

Object.getPrototypeof()

Developers use the method to retrieve a hidden [[Prototype]] of an object. Object.getPrototypeof() also enables developers to create arrays that have access to their prototypes. The method comes in handy if you want to get more data on a given object.

Conclusion

Objects are fundamental to JavaScript and are one of the most versatile and beautiful features the language offers software developers. You can see that objects are relatively easy to create and manipulate.

However, you should still put in a lot of time to practice different methods of creating and editing them since these skills will come in handy during any development task.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top