Home » JavaScript

Properties of Objects in JavaScript

JavaScript | Objects Properties: In this tutorial, we are going to learn about the properties of objects in JavaScript.
Submitted by Siddhant Verma, on December 02, 2019

When everything in JavaScript is an object, it becomes essentially important to understand what these objects contain. The values associated with these objects are called as their properties and the object container does not order or sort them whatsoever. In this article, we'll see how to access an object's properties, read them, update them and delete them.

Consider the following object,

let squirtle= {
	'type': 'Water', 
	HP: 100, 
	isEvolved: false, 
	location: 'Pokeland', 
	saySquirtle: alert('Squirtle Squirtle')
}

console.log(squirtle);

Output

{type: "Water", HP: 100, isEvolved: false, location: "Pokeland", saySquirtle: undefined}
HP: 100
isEvolved: false
location: "Pokeland"
saySquirtle: undefined
type: "Water"
__proto__: Object

If you look at this object, you can see that it has 4 properties and 1 method. Let's look at how we can access these properties,

console.log(squirtle.type);
console.log(squirtle.HP);
console.log(squirtle.isEvolved);

Output

Water
100
False

Accessing properties

The first method of accessing properties is using the dot notation. You simply state the name of the property after a dot using the object name. We can also access the properties by referencing them as an index,

console.log(squirtle["type"]);
console.log(squirtle["HP"]);
console.log(squirtle["isEvolved"]);

Output

Water
100
False

Add new properties or change the values

We can also access the properties by looping through the object using the for-in loop. We can also update our objects to add new properties or change the values for existing properties.

squirtle.HP = 45;
console.log(squirtle);

Output

{type: "Water", HP: 45, isEvolved: false, location: "Pokeland", saySquirtle: undefined}

Let's add another property to our squirtle,

squirtle.defense = 66;
console.log(squirtle);

Output

{type: "Water", HP: 100, isEvolved: false, location: "Pokeland", saySquirtle: undefined, …}
HP: 100
defense: 66
isEvolved: false
location: "Pokeland"
saySquirtle: undefined
type: "Water"
__proto__: Object

Delete properties

We can use the delete keyword to delete both the value of the property as well as the property itself so that the property no longer attaches to that object.

delete squirtle.defense;
console.log(squirtle);
console.log(squirtle.defense);

Output

{type: "Water", HP: 100, isEvolved: false, location: "Pokeland", saySquirtle: undefined}
HP: 100isEvolved: falselocation: "Pokeland"saySquirtle: undefinedtype: "Water"__proto__: Object}
Undefined

We successfully deleted the defense property and if we try to call it we get undefined. Always remember to not use delete keyword on predefined JavaScript objects otherwise it will lead to bugs and errors.

JavaScript Tutorial »

---