Accessing and Modifying Properties: Dot Notation (obj.prop)
In JavaScript, objects are fundamental for storing collections of data as key-value pairs. Accessing and modifying these properties is a daily task for any developer. The two primary ways to interact with object properties are through Dot Notation and Bracket Notation. Understanding the nuances of each is crucial for writing clean, efficient, and dynamic code.
Dot Notation (obj.prop)
Dot notation is a concise and readable way to access the properties of an object. It's the most common approach when the property key is a valid JavaScript identifier. An identifier is a sequence of characters that can include letters, digits, underscores, and dollar signs, but cannot start with a digit or contain spaces.
Example 1: Basic Property Access
// Define a user object
const user = {
firstName: "John",
lastName: "Doe"
};
// Access the firstName property using dot notation
console.log(user.firstName); // Output: John
Explanation: This example demonstrates the simplest use of dot notation. We access the value of the firstName property by appending .firstName to the user object.
Example 2: Modifying a Property
// Define a product object
const product = {
name: "Laptop",
price: 1200
};
// Modify the price property using dot notation
product.price = 1500;
console.log(product.price); // Output: 1500
Explanation: Dot notation can also be used to change the value of an existing property. Here, we update the price of the product object from 1200 to 1500.
Example 3: Adding a New Property
// Define a book object
const book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald"
};
// Add a new 'year' property using dot notation
book.year = 1925;
console.log(book.year); // Output: 1925
Explanation: If you use dot notation to access a property that doesn't exist, JavaScript will create it for you. In this case, we add a year property to the book object.
Example 4: Accessing Nested Object Properties
// Define a developer object with a nested 'skills' object
const developer = {
name: "Jane Smith",
skills: {
language: "JavaScript",
framework: "React"
}
};
// Access the 'language' property of the nested 'skills' object
console.log(developer.skills.language); // Output: JavaScript
Explanation: You can chain dot notation to access properties of nested objects. Here, we first access the skills object and then its language property.
Example 5: Using Properties with Underscores and Dollar Signs
// Define a configuration object with special characters in property names
const config = {
_version: "1.0.0",
$id: "config-123"
};
// Accessing properties with underscore and dollar sign
console.log(config._version); // Output: 1.0.0
console.log(config.$id); // Output: config-123
Explanation: As long as the property name is a valid identifier (which includes _ and $), you can use dot notation.
Example 6: Modifying a Nested Property
// Define a car object with a nested 'engine' object
const car = {
make: "Toyota",
engine: {
type: "V6",
horsepower: 268
}
};
// Modify the horsepower of the nested engine object
car.engine.horsepower = 301;
console.log(car.engine.horsepower); // Output: 301
Explanation: Chained dot notation can also be used to modify properties within nested objects. We directly target and change the horsepower.
Example 7: Accessing a Method on an Object
// Define a calculator object with a method
const calculator = {
add: function(a, b) {
return a + b;
}
};
// Access and execute the 'add' method
console.log(calculator.add(5, 3)); // Output: 8
Explanation: Methods in objects are properties that are functions. You can access and invoke these methods using dot notation followed by parentheses.