Learn About Objects in JavaScript With Real Examples

JavaScript objects provide a great way of defining objects with several different properties and even methods. In this tutorial, you will learn all about the properties of objects in JavaScript. You will get familiar with the options of writing them as well as the best practices.

Moreover, we will explain how you can loop through JavaScript object properties using a for/in loop. You will also find out how you can add property to object JavaScript code already has, and how you can delete object properties.

Objects in JavaScript: Main Tips

• Properties are values that are associated with a particular JavaScript object.
• They are the most important part of any object in JavaScript.
• Most properties are dynamic, so you can modify or remove them as you wish.

Object Properties

Properties are the values associated with a JavaScript object: basically, every JavaScript object is an unordered collection of properties. They are usually dynamic: you can change, add, and delete them. However, some of them are read-only.

Here are a few ways to access the properties of a JavaScript object:

user.firstName + " is " + user.age + " years old.";

user["firstname"] + " is " + user["age"] + " years old.";

Using Loops

The for/in statement can loop through the properties of an object. See the code snippet below to understand the required syntax:

for (variable in object) {
   code to be executed
}

The block of code in the for/in loop is going to be executed once for every property:

var user = {
  firstName: "Joe",
  lastName: "Johnson",
  age: 32
};     
for (x in user) {
  txt += user[x];
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Adding and Deleting Properties

To add property to object JavaScript code holds is rather simple. You can do so simply by adding a new name: value pair.

Let's assume that in the example below the object is already declared and we're applying new properties to it:

user.nationality = "Irish";

Note: keep in mind that JavaScript naming rules still apply and you must avoid using reserved words for new property or method names.

For deleting certain properties, you can simply use JavaScript delete keyword:

var user = {
  firstName: "Joe",
  lastName: "Johnson",
  age: 32,
  eyeColor: "green"
};
delete user.age; // or delete user["age"];

This keyword is used to delete both the property and its value. After being deleted, the property does not exist anymore, so it cannot be used (unless it is added back). If used, it will return undefined.

This operator is designed for use on object properties, not variables or functions. You should avoid using delete operator on pre-defined JavaScript properties as well, as such usage could crash your application.

Property Attributes and Prototypes

Each property has a name and a value. JavaScript object property values may be changed, but not their names. In addition to that, a property must be writable to change its value.

Value is one of the attributes of a property. There are also other attributes, though: enumerable, configurable, and writable. Using these attributes, you can define how the property can be accessed (whether you can write/read it or not). ECMAScript 5, however, has methods for changing any property attribute.

Keep in mind that objects in JavaScript inherit the properties of their prototype. You cannot delete any inherited properties using the JavaScript delete keyword, but if you decide to remove property from object JavaScript identifies as a prototype, each object that inherited properties from it will be affected.

Objects in JavaScript: Summary

• The most important part of objects in JavaScript are which are set in name: value pairs.
• Properties are values associated with a specified object.
• Some properties are read-only, but most can be modified.