In our previous guide, we covered how JavaScript arrays store lists of items ordered by positional index numbers. However, numbered positions are not always the best way to represent complex, real-world data. For example, if you wanted to store info about a specific laptop, mapping its brand name to index 0, its RAM capacity to index 1, and its price to index 2 is easy to forget and can lead to confusing logic.
To make data more readable, JavaScript provides a structure called an Object. An object is a standalone container that maps descriptive text labels to specific values. It uses Key-Value Pairs wrapped inside curly braces { }. Instead of relying on rigid numerical slots, you look up, modify, or update information using custom named labels, mirroring real-world attributes seamlessly.
To initialize a JavaScript object, combine a keyword like let or const with a descriptive variable name, open curly braces, use a colon : to pair each key to its value, and separate multiple pairs with commas.
// Creating an object tracking database profile attributes
let databaseServer = {
hostIP: "192.168.1.1",
activeConnections: 142,
isOnline: true,
firewallProfile: "Secure Mode"
};
// Printing out the entire object profile back to the engine console
console.log(databaseServer);Once you have data packed safely inside an object structure, retrieving it is remarkably straightforward. JavaScript developers primarily use a feature called Dot Notation.
To extract a specific value out of an object, write out the variable name of the object container, type a period ., and follow it immediately with the exact name of the key label you want to query.
let profileUser = { userName: "dev_architect", points: 890 };
// Fetching isolated elements using modern Dot Notation rules
console.log(profileUser.userName); // Outputs: dev_architect
console.log(profileUser.points); // Outputs: 890
// Alternative Bracket Notation lookup approach
console.log(profileUser["userName"]); // Outputs: dev_architectObjects are fully mutable, meaning you can easily update values or insert entirely new properties on the fly. You utilize dot notation for assignments as well. If JavaScript finds the key label you specified, it simply overwrites the old value. If it checks the object and cannot find that key name, it generates a fresh property slot automatically.
let mobileDevice = { brand: "Pixel", storageGB: 128 };
// 1. Overwriting an existing property asset data point
mobileDevice.storageGB = 256;
// 2. Appending a completely new key-value pair to the item
mobileDevice.has5G = true;
console.log(mobileDevice);
// Outputs: { brand: "Pixel", storageGB: 256, has5G: true }Managing keys across dynamic objects requires tracking your spellings carefully to avoid web browser rendering errors:
undefined. If you attempt to process or perform math computations on that undefined state, it triggers bugs across your site layout.
userEmail is viewed by your computer engine as completely separate from useremail, meaning case mismatches can break your database tracking paths.
Let's write some custom script logic! Open your code editor and complete this practical exercise:
Create an object variable named courseModule mapping three properties: title (a string), lessonCount (a number), and isCompleted (a Boolean value).
Write a line of code below using dot notation to update the lesson count to a higher number.
Finally, attach a brand-new key named difficulty set to a string value like "Beginner" and print out the complete object via console.log().