JavaScript – Objects Overview

In JavaScript, objects are a fundamental data type that allow you to store and organize data in a structured way. They are often described as collections of key-value pairs, where each key is a unique identifier for a value. Objects are used extensively in JavaScript, and understanding how they work is crucial for effective programming.

Here’s an overview of JavaScript objects:

1. Key-Value Pairs: Objects consist of key-value pairs, where each key is a string (or a Symbol in some cases) that acts as a label for a corresponding value. These values can be of any data type, including other objects, functions, numbers, strings, and more.

2. Creating Objects: You can create an object in JavaScript using two main methods: object literals and constructors. Object literals are the simplest way to create objects, where you define the keys and values within curly braces, like this:

   let person = {
       name: "John",
       age: 30,
       isEmployed: true
   };Code language: JavaScript (javascript)

3. Accessing Properties: You can access the values stored in an object using either dot notation or square brackets. For example:

   let name = person.name; // Using dot notation
   let age = person["age"]; // Using square bracketsCode language: JavaScript (javascript)

4. Adding and Modifying Properties: You can add new key-value pairs to an object or modify existing ones by simply assigning a new value to a key.

   person.gender = "Male"; // Adding a new property
   person.age = 31; // Modifying an existing propertyCode language: JavaScript (javascript)

5. Removing Properties: You can delete a property from an object using the delete keyword:

delete person.isEmployed; // Removing a propertyCode language: JavaScript (javascript)

6. Methods: Objects can also contain functions as values. These functions are called methods and can be invoked using the object they belong to:

   let car = {
       brand: "Toyota",
       start: function() {
           console.log("Engine started");
       }
   };

   car.start(); // Invoking the methodCode language: JavaScript (javascript)

7. Iterating Over Properties: You can loop through an object’s properties using for...in loops:

   for (let key in person) {
       console.log(key + ": " + person[key]);
   }Code language: JavaScript (javascript)

8. Object Prototypes: In JavaScript, objects can inherit properties and methods from other objects through a mechanism called prototypes. This forms the basis of object-oriented programming in JavaScript.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Book List</title>
</head>
<body>
    <h1>My Book List</h1>
    
    <div id="book-list">
        <!-- This div will be populated with book information using JavaScript -->
    </div>

    <script>
        // Define an array of book objects
        const books = [
            {
                title: "The Great Gatsby",
                author: "F. Scott Fitzgerald",
                genre: "Classic",
                year: 1925
            },
            {
                title: "To Kill a Mockingbird",
                author: "Harper Lee",
                genre: "Fiction",
                year: 1960
            },
            {
                title: "1984",
                author: "George Orwell",
                genre: "Dystopian",
                year: 1949
            }
        ];

        // Function to display the list of books on the web page
        function displayBooks() {
            const bookListDiv = document.getElementById("book-list");

            // Loop through the array of books and create HTML elements for each book
            for (let i = 0; i < books.length; i++) {
                const book = books[i];
                const bookElement = document.createElement("div");
                bookElement.innerHTML = `<h2>${book.title}</h2>
                                         <p><strong>Author:</strong> ${book.author}</p>
                                         <p><strong>Genre:</strong> ${book.genre}</p>
                                         <p><strong>Year:</strong> ${book.year}</p>`;
                bookListDiv.appendChild(bookElement);
            }
        }

        // Call the function to display the list of books when the page loads
        displayBooks();
    </script>
</body>
</html>
Code language: HTML, XML (xml)

Output :

In this example, we have an HTML page with a <div> element with the id “book-list” where we’ll display our list of books. Inside the <script> tag, we define an array of book objects, each containing properties like title, author, genre, and year. We then create a function called displayBooks() that dynamically generates HTML elements for each book in the array and appends them to the “book-list” <div>. Finally, we call displayBooks() to populate the book list when the page loads.

This is a simple example of how JavaScript objects can be used to manage and display data in an HTML document.

Objects play a central role in JavaScript, and they are used for everything from representing real-world entities to organizing data and functionality in your code. Understanding how to work with objects effectively is a key skill for any JavaScript developer.