In JavaScript, Objects are the fundamental building blocks of the language. Almost everything in JavaScript—from arrays to functions—is an object at its core. An object is a standalone entity with properties (data) and methods (actions), represented as a collection of key-value pairs.

1. Anatomy of an Object

An object is a standalone entity with properties and type. It is essentially a map or a dictionary composed of Key-Value pairs.

  • Keys (Properties): Must be either a String or a Symbol.
  • Values: Can be any data type, including strings, numbers, booleans, other objects, or functions.
JavaScript
const user = {
  name: "Julian",          // String property
  age: 28,                 // Number property
  "is active": true,       // Multi-word key (requires quotes)
  greet: function() {      // Method
    console.log("Hello!");
  }
};

2. Creating Objects

There are several ways to define an object, depending on your architectural needs.

A. Object Literal (Most Common)

The simplest way to create an object is using curly braces {}. This is ideal for grouping related data.

JavaScript
const user = {
  name: "Leo",
  age: 30,
  isPremium: true,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

B. The new Object() Constructor

A more formal approach, though rarely used in modern development compared to literals.

JavaScript
const laptop = new Object();
laptop.brand = "Apple";
laptop.chip = "M3";

C. Factory Functions and Constructors

When you need to create multiple objects with the same structure, you use functions.

JavaScript
function Player(name, level) {
  this.name = name;
  this.level = level;
}
const p1 = new Player("Nova", 10);

D. ES6 Classes

Modern “syntactic sugar” over constructor functions, providing a cleaner syntax for object-oriented programming.

JavaScript
class Vehicle {
  constructor(type) {
    this.type = type;
  }
}
const car = new Vehicle("Sedan");

3. Accessing and Modifying Properties

You can interact with object data using two primary syntaxes:

  • Dot Notation (obj.key): The standard, most readable way.
  • Bracket Notation (obj[“key”]): Essential when the key is a variable or contains special characters/spaces.
JavaScript
const car = { brand: "Tesla", "fuel type": "Electric" };

// Accessing
console.log(car.brand);            // Tesla
console.log(car["fuel type"]);     // Electric

// Modifying or Adding
car.color = "Red";
delete car.brand; // Removes the property

4. Objects and Memory (Reference vs. Value)

Unlike primitive types (numbers, strings), objects are reference types. When you assign an object to a new variable, you aren’t copying the data; you are copying the memory address (the reference).

JavaScript

const a = { val: 10 };
const b = a; // b points to the same memory location as a
b.val = 20;

console.log(a.val); // 20 (a was affected by changes to b)

5. Advanced Object Features

A. Shorthand Properties and Methods

If your variable name matches your property name, you can omit the value. Similarly, you can define methods without the function keyword.

JavaScript

const fuel = "electric";
const car = {
  fuel, // Shorthand for fuel: fuel
  drive() { /* ... */ }
};

B. Object Destructuring

This allows you to “unpack” properties into distinct variables, which is highly used in modern frameworks like React for handling props.

JavaScript
const { name, age } = user;

6. The this Keyword in Objects

Inside a method, the this keyword refers to the “owner” of the method—the object itself. This allows methods to access and modify other properties within the same object.

JavaScript
const counter = {
  count: 0,
  increment() {
    this.count++; // 'this' refers to the counter object
  }
};

Categorized in:

Javascript,