Javascript Object Properties
Objects are collections of key-value pairs, where the key is a string (or symbol in ES6+) and the value can be of any data type.
As an example:
const person = {
name: "John",
age: 30,
};
Accessing JavaScript Properties
You can access object properties using dot notation or bracket notation.
As an example:
const person = {
name: "John",
age: 30,
};
console.log(person.name);
console.log(person.age);
In the example:
- We use dot notation to access the
name and age properties of the person object.
console.log(person["name"]);
console.log(person["age"]);
In the example:
- We use bracket notation to access the
name and age properties of the person object. - Note that when using bracket notation, the property name must be enclosed in quotes (single or double).
You can also use a variable as the property name when using bracket notation:
const propertyName = "name";
console.log(person[propertyName]);
In the example:
- We use the
propertyName variable to access the name property of the person object.
If you try to access a property that does not exist using dot notation, you will get undefined:
console.log(person.address);
Note that in both cases, trying to access a property that does not exist will not throw an error. If you want to check if a property exists in an object before trying to access it, you can use the in operator
For example:
console.log("name" in person);
console.log("address" in person);
In the example:
- We use the
in operator to check if the person object has a name property (which it does), and if it has an address property (which it does not).
The for...in loop is used to iterate over the properties of an object. Here's an example:
const person = {
name: "John",
age: 30,
occupation: "engineer",
};
for (const property in person) {
console.log(`${property}: ${person[property]}`);
}
In the example:
- We use a
for...in loop to iterate over the properties of the person object. - The loop iterates over each property of the object and assigns the property name to the
property variable. - We then use bracket notation to access the value of each property using the
property variable.
The output of the above code will be:
name: John;
age: 30;
occupation: engineer;
Note that the order of iteration is not guaranteed, so the properties may not be logged in the order in which they were defined in the object.
You can also use the hasOwnProperty() method to check if a property belongs to the object itself or to its prototype chain.
As an example:
const person = {
name: "John",
age: 30,
occupation: "engineer",
};
for (const property in person) {
if (person.hasOwnProperty(property)) {
console.log(`${property}: ${person[property]}`);
}
}
In the example:
- We add an
if statement inside the loop to check if the property belongs to the person object itself (as opposed to its prototype chain). - The
hasOwnProperty() method returns true if the property belongs to the object itself and false if it belongs to the prototype chain. - By adding this check, we ensure that only the properties of the
person object itself are logged.
The output of the above code will be the same as before:
name: John;
age: 30;
occupation: engineer;
Adding New Properties
You can add new properties to an object using either dot notation or bracket notation.
As an example:
const person = {
name: "John",
age: 30,
};
person.occupation = "engineer";
console.log(person);
In the example:
- We add a new
occupation property to the person object using dot notation. - We simply specify the new property name and assign it a value.
const person = {
name: "John",
age: 30,
};
person["occupation"] = "engineer";
console.log(person);
In the example:
- We add a new
occupation property to the person object using bracket notation. - We enclose the new property name in quotes and use bracket notation to assign it a value.
You can also use a variable as the property name when using bracket notation:
const propertyName = "occupation";
person[propertyName] = "engineer";
console.log(person);
In the example:
- We use the
propertyName variable to add a new occupation property to the person object using bracket notation.
If you try to add a property that already exists, its value will be overwritten:
person.age = 40;
console.log(person);
In the example:
- We change the value of the
age property of the person object from 30 to 40.
You can also add multiple properties to an object at once using the Object.assign() method. Here's an example:
const person = {
name: "John",
age: 30,
};
const additionalInfo = {
occupation: "engineer",
address: "123 Main St",
};
Object.assign(person, additionalInfo);
console.log(person);
In the example:
- We use the
Object.assign() method to add the properties from the additionalInfo object to the person object. - The first argument to
Object.assign() is the target object (in this case, person), and the subsequent arguments are the source objects (in this case, additionalInfo). - The method copies the properties from the source objects to the target object, overwriting any existing properties with the same name.
Deleting Properties
You can delete properties from an object using the delete keyword.
As an example:
const person = {
name: "John",
age: 30,
occupation: "engineer",
};
delete person.age;
console.log(person);
In the example:
- We use the
delete keyword to delete the age property from the person object. - When we log the
person object to the console, we can see that the age property is no longer present.
Note that if you try to access a property that has been deleted, you will get undefined:
You can also use a variable as the property name when deleting a property:
const propertyName = "occupation";
delete person[propertyName];
console.log(person);
In the example:
- We use the
propertyName variable to delete the occupation property from the person object.
If you try to delete a property that does not exist, nothing happens and no error is thrown:
delete person.address;
console.log(person);
In the example:
- We try to delete the
address property from the person object, but since this property does not exist, nothing happens.
Nested Objects
You can create nested objects, which are objects that have properties that are also objects.
As an example:
const person = {
name: "John",
age: 30,
address: {
street: "123 Main St",
city: "Anytown",
state: "CA",
},
};
console.log(person.address.street);
In this example:
The person object has a property called address, which is itself an object with properties street, city, and state.
- We access the street property of the address object using dot notation and log it to the console.
You can also create nested objects using bracket notation:
const person = {
name: "John",
age: 30,
"address info": {
street: "123 Main St",
city: "Anytown",
state: "CA",
},
};
console.log(person["address info"]["street"]);
In the example:
- The
person object has a property called 'address info', which is itself an object with properties street, city, and state. - We access the street property of the
'address info' object using bracket notation and log it to the console.
You can also use a combination of dot notation and bracket notation to access nested properties:
console.log(person["address"]["state"]);
console.log(person.address["city"]);
In the example:
- We access the
state and city properties of the address object using a combination of dot notation and bracket notation.
You can add new properties to nested objects using the same techniques described earlier:
person.address.zipCode = "12345";
console.log(person);
In the example:
- We add a new
zipCode property to the address object of the person object using dot notation.
You can create nested arrays and objects, which are arrays or objects that contain other arrays or objects.
As an example:
const person = {
name: "John",
age: 30,
addresses: [
{street: "123 Main St", city: "Anytown", state: "CA"},
{street: "456 Oak St", city: "Otherville", state: "NY"},
],
};
console.log(person.addresses[0].street);
console.log(person.addresses[1].city);
In the example:
- The
person object has a property called addresses, which is an array containing two objects with properties street, city, and state. - We access the
street property of the first address object using bracket notation and log it to the console. - We also access the
city property of the second address object using bracket notation and log it to the console.
You can add new elements to nested arrays using the push method:
person.addresses.push({
street: "789 Elm St",
city: "Another Town",
state: "TX",
});
console.log(person.addresses);
In the example:
- We use the
push method to add a new address object to the end of the addresses array of the person object.
You can also delete elements from nested arrays using the splice method:
person.addresses.splice(1, 1);
console.log(person.addresses);