Non-Primitive Data Type: object: The mutable, complex structure
In JavaScript, an object is a non-primitive data type that represents a collection of key-value pairs. Unlike primitive types, objects are mutable, meaning their properties can be changed after creation, and they are used to store more complex data structures.
Example 1: Creating an Object Literal
// A simple object representing a user
const user = {
firstName: "John",
lastName: "Doe",
age: 30
};
Explanation
This code creates an object named user using object literal syntax. It contains three properties: firstName, lastName, and age, each with a corresponding value.
Example 2: Accessing Object Properties
// Accessing properties of the user object
const user = {
firstName: "Jane",
lastName: "Doe"
};
console.log(user.firstName); // Outputs: Jane
console.log(user['lastName']); // Outputs: Doe
Explanation
This demonstrates two ways to access object properties: dot notation (user.firstName) and bracket notation (user['lastName']). Dot notation is more common, but bracket notation is useful for dynamic property access.
Example 3: Modifying Object Properties
// Modifying an existing property and adding a new one
const car = {
make: "Honda",
model: "Civic"
};
car.model = "Accord"; // Changing the value of the model property
car.year = 2023; // Adding a new year property
Explanation
This example shows the mutability of objects. We change the model property from "Civic" to "Accord" and add a new year property, demonstrating how objects can be updated after they are created.
Example 4: Objects with Methods
// An object with a method (a function as a property)
const person = {
name: "Alice",
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Outputs: Hello, my name is Alice
Explanation
Objects can have functions as properties, which are called methods. The greet method in this person object uses the this keyword to access the name property of the object itself.
Example 5: Nested Objects
// An object containing another object
const student = {
name: "Bob",
grades: {
math: 95,
science: 88
}
};
Explanation
This code illustrates a nested object, where the grades property itself is another object. This allows for creating more complex and organized data structures.
Example 6: Using the new Keyword
// Creating an object using the Object constructor
const book = new Object();
book.title = "The Great Gatsby";
book.author = "F. Scott Fitzgerald";
Explanation
While less common than the literal syntax, you can also create an object using the new Object() constructor. Properties are then added to the newly created empty object.
Example 7: Object Destructuring
// Extracting values from an object into variables
const settings = {
theme: "dark",
fontSize: 16
};
const { theme, fontSize } = settings;
console.log(theme); // Outputs: dark
Explanation
Object destructuring is a modern JavaScript feature that provides a concise way to extract properties from an object and assign them to variables with the same name.