« Previous Next »

JavaScript Objects

Objects in JavaScript are collections of key-value pairs. They can store multiple values as properties and methods. Here's a look at how to create and work with objects.

Creating an Object

You can create a JavaScript object using curly braces and defining key-value pairs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const car = {
            make: 'Toyota',
            model: 'Camry',
            year: 2020
        };
        console.log(car.make);  
        console.log(car['model']);  
    </Script>
</body>
</html>

Output: Toyota, Camry

Accessing and Modifying Object Properties

You can access object properties using dot notation or bracket notation, and you can also modify them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const person = {
            firstName: 'Shaista',
            lastName: 'Khan',
            age: 25
        };
        // Accessing properties
        console.log(person.firstName);  
        // Modifying properties
        person.age = 30;
        console.log(person.age);  
    </Script>
</body>
</html>

Output: Shaista, 30

Adding and Deleting Object Properties

New properties can be added or deleted from objects dynamically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const book = {
            title: 'JavaScript Basics',
            author: 'Jane Smith'
        };
        // Adding a new property
        book.year = 2021;
        console.log(book.year);  // Output: 2021
        // Deleting a property
        delete book.author;
        console.log(book.author);  // Output: undefined  
    </Script>
</body>
</html>

Output: 2021, undefined

Object Methods

Objects can have functions as properties, which are called methods. Methods allow objects to perform actions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const calculator = {
            add: function(a, b) {
                return a + b;
            },
            subtract: function(a, b) {
            return a - b;
            }
        };
        console.log(calculator.add(5, 3));  // Output: 8
        console.log(calculator.subtract(10, 6));  // Output: 4
    </Script>
</body>
</html>

Output: 8, 4

Looping through Object Properties

You can loop through object properties using the for...in loop.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const student = {
            name: 'Anam',
            age: 24,
            grade: 'A'
        };
        for (let key in student) {
            console.log(key + ': ' + student[key]);
        }
    </Script>
</body>
</html>

Output: name: Anam, age: 24, grade: A

Object Destructuring

Destructuring allows you to extract values from an object and assign them to variables.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const laptop = {
            brand: 'Dell',
            screenSize: 15,
            isTouchscreen: false
        };
        const { brand, screenSize } = laptop;
        console.log(brand);  // Output: Dell
        console.log(screenSize);  // Output: 15

    </Script>
</body>
</html>

Output: Dell, 15

Nested Objects

Objects can contain other objects as properties. This is known as a nested object.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        const company = {
            name: 'TechCorp',
            address: {
                street: '123 Main St',
                city: 'San Francisco',
                state: 'CA'
            }
        };
        console.log(company.address.city);//output:San Francisco
    </Script>
</body>
</html>

Output: San Francisco

« Previous Next »