The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Introduction to Objects

Next ►
►

In JavaScript, objects are a fundamental part of the language and are used to store collections of data and more complex entities. This section will introduce you to the concept of objects, how to create them, and how to interact with them.

What is an Object?

An object is a collection of properties, where each property is defined as a key-value pair. The key is a string (also called a property name), and the value can be any data type, including other objects.

Key Concepts:

  • Properties: Attributes of the object, defined as key-value pairs.
  • Methods: Functions that are properties of an object.

Example:

// Creating an object
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    isEmployed: true,
    greet: function() {
        console.log("Hello, my name is " + this.firstName + " " + this.lastName);
    }
};

// Accessing object properties
console.log(person.firstName); // Output: John
console.log(person.age); // Output: 30

// Calling an object method
person.greet(); // Output: Hello, my name is John Doe

Creating Objects

There are several ways to create objects in JavaScript:

  1. Object Literal

The most common way to create an object is using an object literal, which is a comma-separated list of key-value pairs wrapped in curly braces {}.

let car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

  1. Using the new Object() Syntax

Another way to create an object is by using the new Object() syntax.

let car = new Object();
car.make = "Toyota";
car.model = "Corolla";
car.year = 2020;

  1. Using a Constructor Function

A constructor function is a special type of function used to create multiple objects with the same properties and methods.

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}

let car1 = new Car("Toyota", "Corolla", 2020);
let car2 = new Car("Honda", "Civic", 2019);

console.log(car1.make); // Output: Toyota
console.log(car2.model); // Output: Civic

Accessing and Modifying Object Properties

Dot Notation

You can access and modify properties using dot notation.

let person = {
    name: "Alice",
    age: 25
};

console.log(person.name); // Output: Alice
person.age = 26;
console.log(person.age); // Output: 26

Bracket Notation

You can also use bracket notation, which is useful when the property name is dynamic or not a valid identifier.

let person = {
    name: "Alice",
    age: 25
};

console.log(person["name"]); // Output: Alice
person["age"] = 26;
console.log(person["age"]); // Output: 26

let property = "name";
console.log(person[property]); // Output: Alice

Practical Exercise

Exercise 1: Create and Manipulate an Object

  1. Create an object named book with the following properties:

    • title (string)
    • author (string)
    • year (number)
    • isAvailable (boolean)

  2. Add a method named getSummary to the book object that returns a string summarizing the book details.

  3. Access and modify the properties of the book object.

Solution:

// Step 1: Create the object
let book = {
    title: "JavaScript: The Good Parts",
    author: "Douglas Crockford",
    year: 2008,
    isAvailable: true,
    
    // Step 2: Add a method
    getSummary: function() {
        return `${this.title} by ${this.author}, published in ${this.year}.`;
    }
};

// Step 3: Access and modify properties
console.log(book.title); // Output: JavaScript: The Good Parts
console.log(book.getSummary()); // Output: JavaScript: The Good Parts by Douglas Crockford, published in 2008.

book.isAvailable = false;
console.log(book.isAvailable); // Output: false

Conclusion

In this section, you learned about the basics of objects in JavaScript, including how to create objects using different methods, how to access and modify their properties, and how to add methods to objects. Understanding objects is crucial as they are a core part of JavaScript and are used extensively in both simple and complex applications. In the next section, we will dive deeper into object methods and the this keyword.

◄ Previous
◄
Next ►
►

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved