Objects are one of the most important data types in the world of coding. They allow you to store lots of different related data into one place. To get full use out of these handy data types though, there are a few tricks you need to learn like accessing the key/value pairs and also manipulating the key/value pairs.
There are two main ways to access object properties, these are dot notation and bracket notation. Objects collect data in key/value pairs (properties). These properties do not have indexes like arrays, think of the key as the position of the value in an object. Whether you use dot or bracket notation depends on the key you are trying to access. As Dillion Megida wrote on freeCodeCamp’s website, “Dot Notation only allows static keys while Bracket Notation accepts dynamic keys. Static key here means that the key is typed directly, while Dynamic key here means that the key is evaluated from an expression.”
Like Dillion said, if the key is static, we can use dot notation. For example:
let obj = {
firstName: 'Eric',
lastName: 'Stern'
}
console.log(obj.firstName);
//'Eric' will be logged to the console
We can also do the same using bracket notation.
let obj = {
firstName: 'Eric',
lastName: 'Stern'
}
console.log(obj['firstName']);
//'Eric' will be logged to the console
When using bracket notation you have to remember that keys are strings, so you need to use quotes.
But what if you don’t know the name of the property you are trying to access? As Alex Devero wrote in his blog, “All these ways assume you know the name of the property you want to access. If you don’t know it, nothing is lost. You can use loops to iterate over the object to get all properties, including the one you want.” One of the loops he is referring to are for…in loops, which loops through the properties of an object. There are also now some newer methods such as the Object.keys() method. “Before ES6, the only way to loop through an object was through using the for...in loop. The Object.keys() method was introduced in ES6 to make it easier to loop over objects. It takes the object that you want to loop over as an argument and returns an array containing all properties names (or keys). After which you can use any of the array looping methods, such as forEach(), to iterate through the array and retrieve the value of each property.” (https://flexiple.com/javascript/loop-through-object-javascript/)
obj1 = {
item1: 'apple',
item2: 'chicken',
item3: 'chips'
}
console.log(Object.keys(obj1));
//['item1', 'item2', 'item3'] will be logged
Not only can you access object keys and values using dot notation or bracket notation, you can also manipulate them.
Say we wanted to add new properties to the object of my name above. We could use dot notation or bracket notation.
let obj = {
firstName: 'Eric',
lastName: 'Stern'
}
obj.age = 34;
obj['pet'] = 'Roux';
console.log(obj);
/* obj now logs:
{
firstName: 'Eric',
lastName: 'Stern',
age: 34,
pet: 'Roux'
}
*/
You can remove properties from objects using the keyword delete.
delete obj['pet'];
console.log(obj);
/* obj now logs:
{
firstName: 'Eric',
lastName: 'Stern',
age: 34
}
*/
In conclusion, objects are extremely useful when coding, but they are even more useful when you understand how to access and manipulate the data contained in the object.
Top comments (0)