Day 7: Understanding Objects in JavaScript 🏆

Introduction

Welcome to Day 7 of your JavaScript journey! 🌟 Yesterday, we explored arrays. Today, we'll dive into objects, another fundamental data structure in JavaScript. Objects allow you to store collections of key-value pairs, making it easier to organize and manipulate complex data. Let's get started! 🚀

please subscribe to my YouTube channel to support my channel and get more web development tutorials.

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 (or symbol) that identifies the property, and the value can be any data type.

Example:

let person = {
  name: "Alice",
  age: 25,
  isStudent: true
};
console.log(person.name); // Output: Alice 👩‍🎓

Creating Objects 🌱

You can create objects in multiple ways:

1. Using Object Literals

let car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

2. Using the Object Constructor

let car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2021;

Accessing Object Properties 🔍

You can access properties in an object using dot notation or bracket notation:

Dot Notation

let book = {
  title: "JavaScript for Beginners",
  author: "John Doe"
};
console.log(book.title); // Output: JavaScript for Beginners 📘

Bracket Notation

let book = {
  title: "JavaScript for Beginners",
  author: "John Doe"
};
console.log(book["author"]); // Output: John Doe ✍️

Adding and Modifying Properties ✏️

You can add new properties or modify existing ones using dot or bracket notation:

Example:

let person = {
  name: "Alice",
  age: 25
};
person.isStudent = true; // Adding a new property
person.age = 26; // Modifying an existing property
console.log(person); // Output: { name: "Alice", age: 26, isStudent: true } 🎓

Deleting Properties 🗑️

You can delete properties from an object using the delete operator:

Example:

let person = {
  name: "Alice",
  age: 25,
  isStudent: true
};
delete person.isStudent;
console.log(person); // Output: { name: "Alice", age: 25 } 🚫

Methods 📏

Methods are functions that are properties of an object. They allow objects to perform actions.

Example:

let 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(5, 3)); // Output: 2 ➖

this Keyword 🔑

The this keyword refers to the current object in a method or function.

Example:

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};
person.greet(); // Output: Hello, Alice! 🙋

Practical Examples 🧩

Example 1: Create an object representing a book

let book = {
  title: "JavaScript: The Good Parts",
  author: "Douglas Crockford",
  pages: 176,
  printSummary: function() {
    console.log(this.title + " by " + this.author + " has " + this.pages + " pages.");
  }
};
book.printSummary(); // Output: JavaScript: The Good Parts by Douglas Crockford has 176 pages. 📖

Example 2: Create a method to calculate the age of a car

let car = {
  make: "Toyota",
  model: "Camry",
  year: 2015,
  getAge: function(currentYear) {
    return currentYear - this.year;
  }
};
console.log("Car age:", car.getAge(2024)); // Output: Car age: 9 🚗

Practice Activities 💪

1. Practice Code:

• Create objects using object literals and the Object constructor.
• Add, modify, and delete properties in objects.
• Write methods for objects and use the this keyword.

2. Mini Project:

• Create an object representing a student with properties for name, age, and grades. Add methods to calculate the average grade and print a summary.

Example:

let student = {
  name: "Bob",
  age: 20,
  grades: [90, 85, 88, 92],
  calculateAverage: function() {
    let sum = this.grades.reduce((a, b) => a + b, 0);
    return sum / this.grades.length;
  },
  printSummary: function() {
    console.log(this.name + " is " + this.age + " years old and has an average grade of " + this.calculateAverage() + ".");
  }
};
student.printSummary(); // Output: Bob is 20 years old and has an average grade of 88.75. 🎓

Summary 📋

Today, we explored objects in JavaScript. We learned how to create objects, access and manipulate their properties, and write methods. Understanding objects is crucial for organizing and managing complex data in your code.

Series Index

Stay tuned for Day 8, where we'll dive into more advanced topics in JavaScript! 🌟

Happy coding! If you have any questions or need further clarification, feel free to leave a comment below. Let's continue learning and growing together! 🚀

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe:

• Website: Dipak Ahirav
• Email: dipaksahirav@gmail.com
• YouTube: devDive with Dipak
• LinkedIn: Dipak Ahirav