JS Object Definitions 🎯

Welcome to the JavaScript (JS) Object Definitions tutorial! In this lesson, we'll learn how to create, manipulate, and understand JavaScript objects. We'll start from the basics and gradually move towards more complex examples.

What is a JavaScript Object? 📝

An object in JavaScript is a collection of related data and functions (methods) that operate on that data. It's a way to organize data in a more structured and manageable manner.

Objects in JavaScript are similar to real-world objects. For example, a car is an object with properties like color, model, and speed, and methods like accelerate and brake.

Creating a JavaScript Object 💡

You can create an object in JavaScript using three methods:

Object Literal
Constructor Function
Classes (ES6)

Let's start with the most common method - Object Literal.

Object Literal Example 💡

javascript

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020,
  color: "Blue",
  // Methods
  accelerate: function() {
    this.speed += 10;
    console.log(`Car is now going ${this.speed} km/h.`);
  },
  brake: function() {
    this.speed -= 5;
    console.log(`Car is now going ${this.speed} km/h.`);
  }
};

📝 Note: In the above example, this refers to the current object.

Now, let's see how to create the same object using a Constructor Function:

Constructor Function Example 💡

javascript

function Car(brand, model, year, color) {
  this.brand = brand;
  this.model = model;
  this.year = year;
  this.color = color;

  this.accelerate = function() {
    this.speed += 10;
    console.log(`Car is now going ${this.speed} km/h.`);
  };

  this.brake = function() {
    this.speed -= 5;
    console.log(`Car is now going ${this.speed} km/h.`);
  };
}

let myCar = new Car("Toyota", "Corolla", 2020, "Blue");

📝 Note: Using a constructor function, you can create multiple objects of the same type (Car in this case).

Accessing and Modifying Object Properties 💡

You can access an object's properties using dot notation (object.property) or bracket notation (object['property']). To modify an object's property, simply assign a new value to it.

Accessing and Modifying Object Properties Examples 💡

javascript

console.log(myCar.brand); // Output: "Toyota"
myCar.color = "Red";
console.log(myCar.color); // Output: "Red"

Object Methods 💡

You can call an object's method by invoking it like a function.

Object Methods Examples 💡

javascript

myCar.accelerate(); // Output: "Car is now going 10 km/h."
myCar.brake(); // Output: "Car is now going 5 km/h."

Quiz 🎯

Conclusion 🎯

In this tutorial, we've learned about JavaScript objects, how to create them using Object Literals and Constructor Functions, and how to access, modify, and call their properties and methods.

Stay tuned for more lessons on JavaScript where we'll dive deeper into the world of objects and other exciting topics!

Happy coding! 💡💡💡