How to add object to object

How to Add Property to Object in JavaScript

Is it possible to add properties to this Object after its initial creation if the properties’ name is not determined until run time? The answer is yes, and you can add dynamic properties to an object after the object is created, and let’s see how we can do that.

Javascript adds a property to Object

To add a new property to a Javascript object, define the object name followed by the dot, the name of a new property, an equals sign and the value for the new property. It does not matter if you have to add the property, change the property’s value, or read a value of the property; you have the following choice of syntax.

Dot syntax

To add a new property in Javascript Object, use dot syntax. It will add a property to the existing Object.

Consider the following example JavaScript Object literal.

Output

You can see that using dot syntax, and we added a new property called college and logged the Object.

Square Bracket Notation to add a property in JavaScript Object

To add a property, use square bracket notation. The following demonstrates square bracket syntax.

See the following code.

Output

Square bracket syntax is also required when the property name is variable; for instance, if it is passed as the argument to a method, it is accessed in a for-in loop or is an expression to be evaluated, such as the following code.

Output

An expression with the object name, a dot, and a property name (obj.prop4) will evaluate the current value of that property. Our example first displays the value in the console log, then assigns the value to the variable val.

Square bracket syntax is required if a property name contains spaces or other special characters or includes the keyword reserved in JavaScript. Otherwise, JavaScript errors will be your result.

Modify a Property of a Javascript Object

To modify a JavaScript property, we will assign the new value to the existing property, reflecting it in the main Object.

Output

To change a value of the existing property of an object, specify the object name followed by a square bracket, the name of the property you wish to change, an equals sign, and the new value you want to assign. You can also use the dot syntax to attach the new values to the existing properties or change the values of existing properties.

Conclusion

You can add as many more properties as you like in Javascript by merely using the dot notation or square bracket syntax.

Understanding Objects in JavaScript

Introduction

An object in JavaScript is a data type that is composed of a collection of names or keys and values, represented in name:value pairs. The name:value pairs can consist of properties that may contain any data type — including strings, numbers, and Booleans — as well as methods, which are functions contained within an object.

Objects in JavaScript are standalone entities that can be likened to objects in real life. For example, a book might be an object which you would describe by the title, author, number of pages, and genre. Similarly, a car might be an object that you would describe by the color, make, model, and horsepower. JavaScript arrays are also a type of object.

Objects are an integral and foundational aspect of most JavaScript programs. For example, a user account object may contain such data as usernames, passwords, and e-mail addresses. Another common use case is a web shopping platform’s shopping cart that could consist of an array of many objects containing all the pertinent information for each item, such as name, price, and weight for shipping information. A to-do list is another common application that might consist of objects.

In this tutorial, we will review how to create an object, what object properties and methods are, and how to access, add, delete, modify, and loop through object properties.

Creating an Object

An object is a JavaScript data type, just as a number or a string is also a data type. As a data type, an object can be contained in a variable.

There are two ways to construct an object in JavaScript:

We can make an empty object example using both methods for demonstration purposes.

First, the object literal.

The object literal initializes the object with curly brackets.

In this next example, we’ll use the object constructor.

Both of these approaches will create an empty object. Using object literals is the more common and preferred method, as it has less potential for inconsistencies and unexpected results.

Sending gimli to the console will print out the entire object.

This output may render differently depending on what console you are using, but you should notice that all of the values passed to the object are shown in the output.

Next, we will review a JavaScript object’s properties and methods.

Properties and Methods

Objects can have properties and methods.

A property is the association between a name (key) and value within an object, and it can contain any datatype. A property generally refers to the characteristic of an object.

A method is a function that is the value of an object property, and therefore a task that an object can perform.

Accessing Object Properties

There are two ways to access an object’s properties.

Both dot notation and bracket notation are used regularly. Dot notation is faster and more readable, but has more limitations. Bracket notation allows access to property names stored in a variable, and must be used if an object’s property contains any sort of special character.

In order to retrieve an object method, you would call it much in the same way you would call a regular function, just attached to the object variable.

In the example above, we see that the string value for the object method greet() is returned.

We can now move on to modifying object properties through adding name:value pairs or modifying existing ones.

Adding and Modifying Object Properties

In order to add a new property to an object, you would assign a new value to a property with the assignment operator ( = ).

For example, we can add a numerical data type to the gimli object as the new age property. Both the dot and bracket notation can be used to add a new object property.

We can access that value just as above, with either the dot notation or the bracket notation.

A method can also be added to the object by using the same process.

Once we have created this new object method, we can call it as we did above.

Using the same method, an object’s property can be modified by assigning a new value to an existing property.

At this point, if we call the object, we will see all of our additions and modifications.

Through assignment operation, we can modify the properties and methods of a JavaScript object.

Removing Object Properties

In order to remove a property from an object, you will utilize the delete keyword. delete is an operator that removes a property from an object.

The delete operation evaluates as true if the property was successfully removed, or if it was used on a property that doesn’t exist.

We can test the output of gimli to see if it succeeded.

In the above output, the weapon name and its associated value are no longer available, showing that we have successfully deleted the property.

In the next section, we’ll go over ways to iterate through objects in JavaScript.

Looping Through Object Properties

JavaScript has a built-in type of for loop that is specifically meant for iterating over the properties of an object. This is known as the for. in loop.

We can also retrieve the property name itself using just the first variabe in the for. in loop. We have used a string method to convert the key values to upper case.

The for. in loop is not to be confused with the for. of loop, which is used exclusively on the Array object type. You can learn more about iterating through arrays in the “Understanding Arrays in JavaScript” tutorial.

Another useful enumeration method is the Object.keys() method, which will return an array of the object’s keys.

This method allows us to work with the keys or names of an object as an array, so you can leverage all of the methods available to JavaScript arrays.

Conclusion

Objects are an extremely useful and versatile feature of the JavaScript programming language. They are some of the main building blocks of writing code in JavaScript, and are a practical way to organize related data and functionality. To-do lists, shopping carts, user accounts, and locations on a webmap are all a few of the many examples of real-world JavaScript objects that you might encounter.

In this tutorial, we learned the difference between properties and methods, how to create objects, and how to add, remove, modify, and loop through object properties. To learn more about JavaScript objects, read about Working with Objects on the Mozilla Developer Network.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Tutorial Series: How To Code in JavaScript

JavaScript is a high-level, object-based, dynamic scripting language popular as a tool for making webpages interactive.