zaro

What is an object in JS?

Published in JavaScript Object Definition 3 mins read

In JavaScript, an object is a collection of properties.

Just as in many other programming languages, objects in JavaScript can be compared to objects in real life. Think of a real-world object like a car. It has properties like color, brand, and model. It also has actions it can perform, like starting, stopping, or accelerating. A JavaScript object is structured similarly, holding related data and functionality together.

Understanding Properties and Methods

The reference states that a property is an association between a name (or key) and a value. This name acts like an identifier for the specific piece of data or functionality stored within the object.

What is a Property?

A property holds data associated with the object. The value linked to a property key can be various data types, such as:

  • Strings (like "Ford", "blue")
  • Numbers (like 2022)
  • Booleans (like true/false)
  • Arrays
  • Even other objects

Let's consider our car example in JavaScript:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2023,
  color: "silver",
  isElectric: false
};

Here, make, model, year, color, and isElectric are the property names (or keys), and "Toyota", "Camry", 2023, "silver", and false are their corresponding values.

You access the value of a property using dot notation (object.propertyName) or bracket notation (object['propertyName']):

console.log(car.make); // Output: Toyota
console.log(car['year']); // Output: 2023

What is a Method?

According to the reference, a property's value can be a function, in which case the property is known as a method. Methods represent the actions or behaviors an object can perform.

Extending our car example with methods:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2023,
  color: "silver",
  isElectric: false,
  start: function() { // This is a method
    console.log("Engine started!");
  },
  drive: function(speed) { // This is also a method
    console.log(`Driving at ${speed} mph.`);
  }
};

In this object, start and drive are methods because their values are functions.

You call a method using dot notation followed by parentheses (object.methodName()):

car.start(); // Output: Engine started!
car.drive(60); // Output: Driving at 60 mph.

Properties vs. Methods

Here's a quick comparison based on the reference:

Feature Property Method
Value Any data type (string, number, boolean, array, object, etc.) A function
Represents Data or attributes of the object Behavior or actions of the object
Access object.propertyName or object['propertyName'] object.methodName()
Purpose Stores information Performs actions or calculations

Why Use Objects?

Objects are fundamental building blocks in JavaScript because they allow you to:

  • Organize related data and functions: Keep information and behaviors for a single entity grouped together.
  • Create modular code: Write code that is easier to manage, understand, and reuse.
  • Model real-world entities: Represent complex concepts in a structured way.

In essence, objects provide a structured way to store and manage data and functionality, making your JavaScript code more organized and powerful.