JavaScript Objects

by
Previous
Next

What Are JavaScript Objects?

JavaScript objects are collections of properties, where each property consists of a key-value pair. Objects allow you to store and organize data efficiently, making them one of the most important features in JavaScript.

Think of an object as a real-world entity. For example, a car can be an object with properties like color, brand and model.

Why Use Objects in JavaScript?

  1. Organized Data Storage: Store multiple values in a single entity.
  2. Dynamic Behavior: Add, update, or remove properties as needed.
  3. Key-Value Mapping: Access data using descriptive keys.
  4. Essential for Complex Data: Handle more intricate scenarios like APIs, user data and DOM elements.

Syntax for Creating JavaScript Objects

You can create objects using one of these two common methods:

1. Object Literal Syntax

let car = {
    brand: "Toyota",
    model: "Corolla",
    color: "Red"
};

2. Using the Object Constructor

let car = new Object();
car.brand = "Toyota";
car.model = "Corolla";
car.color = "Red";

Both methods achieve the same result, but object literals are simpler and more commonly used.

Accessing Object Properties

You can access an object’s properties in two ways:

  1. Dot Notation:
console.log(car.brand); // Output: Toyota
  1. Bracket Notation:
console.log(car["color"]); // Output: Red

Use dot notation for most cases. Use bracket notation when the property name contains spaces or special characters.

Adding, Updating and Deleting Properties

Adding or Updating Properties

car.year = 2020; // Adding a new property
car.color = "Blue"; // Updating an existing property
console.log(car); 
// Output: { brand: 'Toyota', model: 'Corolla', color: 'Blue', year: 2020 }

Deleting Properties

delete car.model;
console.log(car); 
// Output: { brand: 'Toyota', color: 'Blue', year: 2020 }

Objects and Methods

Methods are functions stored as properties in objects. They define behaviors related to the object.

Example:

let person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

console.log(person.fullName()); // Output: John Doe

In this example, the fullName method uses the this keyword to reference the object it belongs to.

Nested Objects

An object can contain other objects as properties. These are known as nested objects.

Example:

let student = {
    name: "Alice",
    subjects: {
        math: 95,
        science: 90
    }
};

console.log(student.subjects.math); // Output: 95

Looping Through Object Properties

Use the for…in loop to iterate over an object’s properties.

Example:

for (let key in car) {
    console.log(key + ": " + car[key]);
}
// Output: 
// brand: Toyota
// color: Blue
// year: 2020

Object.keys() and Object.values()

These methods return arrays of an object’s keys and values, respectively.

Example:

let keys = Object.keys(car);
console.log(keys); // Output: [ 'brand', 'color', 'year' ]

let values = Object.values(car);
console.log(values); // Output: [ 'Toyota', 'Blue', 2020 ]

Object Destructuring

Destructuring allows you to extract properties from an object into variables.

Example:

let { brand, color } = car;
console.log(brand); // Output: Toyota
console.log(color); // Output: Blue

Real-Life Example: User Profile

let userProfile = {
    username: "techGuru",
    email: "guru@example.com",
    isActive: true,
    login: function() {
        console.log(this.username + " has logged in.");
    }
};

console.log(userProfile.email); // Output: guru@example.com
userProfile.login(); // Output: techGuru has logged in.

This example showcases a typical use of objects to represent a user’s data and behavior.

Previous
Next

Leave a Comment