Tutorial

Understanding Objects in JavaScript

Updated on August 25, 2021
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:

  • The object literal, which uses curly brackets: {}
  • The object constructor, which uses the new keyword

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

First, the object literal.

// Initialize object literal with curly brackets
const objectLiteral = {};

The object literal initializes the object with curly brackets.

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

// Initialize object constructor with new Object
const objectConstructor = new Object();

The same data was created using the object constructor method that is initialized with new Object().

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.

We can create an example object, contained in the variable gimli, to describe a character.

// Initialize gimli object
const gimli = {
	name: "Gimli",
	race: "dwarf",
	weapon: "axe",
	greet: function() {
		return `Hi, my name is ${this.name}!`;
	},
};

Our new object is gimli, which has three properties. Each property consists of a name:value pair, also known as key:value pair. weapon is one of the property names, which is linked to the property value "axe", a string. It has one method, with a method name of greet and the method value consisting of the contents of the function.

Within greet, you may notice the this keyword. When using this inside of an object, it refers to the current object, in this case gimli.

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

gimli;
Output
{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

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.

An easy way to remember the difference between object properties and methods is to think of a property as a noun, and a method as a verb. name, race and weapon are all nouns associated with an object, and are properties. fight() or talk() are verbs that might be used as a method function definition.

Accessing Object Properties

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

  • Dot notation: .
  • Bracket notation: []

Let’s revisit our original example object, gimli.

const gimli = {
	name: "Gimli",
	race: "dwarf",
	weapon: "axe",
	greet: function() {
		return `Hi, my name is ${this.name}!`;
	},
};

If we want to retrieve the property value of weapon, we can do so with object dot notation by typing the variable name of the object, followed by a dot (.) and the property or method name.

// Retrieve the value of the weapon property
gimli.weapon;
Output
"axe"

gimli.weapon outputs the property value, which is "axe". We can also retrieve the same data with object bracket notation. Similar to how you might index and access a string, the syntax for bracket notation is two square brackets ([]) encasing the property name.

// Retrieve the value of the weapon property
gimli["weapon"];
Output
"axe"

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.

gimli.greet();
Output
"Hi, my name is Gimli!"

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.

// Add new age property to gimli
gimli.age = 139;
// Add new age property to gimli
gimli["age"] = 139;

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

gimli.age;
Output
139

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

// Add new fight method to gimli
gimli.fight = function() {
	return `Gimli attacks with an ${this.weapon}.`;
}

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

gimli.fight();
Output
"Gimli attacks with an axe."

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

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

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

gimli;
Output
{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

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.

In the below example, we will remove the weapon property from gimli using delete.

// Remove weapon from gimli
delete gimli.weapon;
Output
true

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.

gimli;
Output
{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

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.

Here is a simplified version of our main object example, gimli.

const gimli = {
	name: "Gimli",
	race: "dwarf",
	weapon: "battle axe",
};

We can use for...in to traverse through all the properties of gimli and print them to the console. Using bracket notation, we can retrieve the property value as a variable, in this case key.

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}
Output
Gimli dwarf battle axe

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.

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}
Output
NAME: Gimli RACE: dwarf WEAPON: battle axe

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.

// Initialize method on gimli object to return property keys
Object.keys(gimli);
Output
["name", "race", "weapon"]

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


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.

About the authors


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
10 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

you really have a nice way in Explaining things , keep it up . this is an awesome tut.

This is a nice primer, thanks!

Why can we not use ‘.’ notation for accessing elements in the for…in loop?

Excellent and well written. Thank you!

Really great article. One thing I’m struggling with is if I have two objs and I use the for … in loop to iterate through say obj2 to verify if any properties in obj2 aren’t in/but should be in obj1, how i would add the obj2 property to obj1. … in doing so, i want to add the obj2 key and value to obj1

eg. function extend(obj1, obj2) { for(var key in obj2) { if(!obj1[key]) { …

Simple and straightforward. Thanks.

hello,

how could you create another instance of gimli object in a arry form such as: gimli[0][“weapon”]…,gimli[1]["weapon]…?

thank you

Nice article, the language is very simple and everyone can understand it. Thanks!

Written very simple, but very powerful. Excellent write-up I would say. Urges me to continue reading.

This explains a lot ,but I don’t really understand the “$” in the code

gimli.fight = function() { return Gimli attacks with an ${this.weapon}.; }

I would appreciate if it could be explained or if I could be directed to where it is futher explained, Thanks

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel