JS Objects

JavaScript Objects: A Beginner's Guide

An object is one of the most important concepts in JavaScript. It is a dynamic data structure that allows you to store related data as key-value pairs. You can think of an object like a real-world object—for example, a car has properties like color, model, and weight.

• Key-Value Pairs: Each piece of data has a "key" (a name) that uniquely identifies its "value".
• Flexible Values: The values can be primitive data types (like strings or numbers), other objects, or even functions (which are called methods when they live inside an object).
• Mutable and Dynamic: Objects can be changed after they are created. You can add, modify, or delete properties at any time.
• Encapsulation: Objects allow you to group related information and behavior together, making your code organized and much easier to manage.

1. Creating JavaScript Objects

There are two primary ways to create an object in JavaScript.

Method 1: Using Object Literal (Recommended)

The object literal syntax is the most common and simple way to create objects. It allows you to define and initialize an object using curly braces {}, setting properties as key-value pairs separated by commas.

let obj = {
    name: "Akash",
    age: 23,
    job: "Developer"
};
console.log(obj);

Method 2: Using the new Object() Constructor

This method uses JavaScript's built-in Object constructor to create an empty object first, and then properties are added one by one.

let obj = new Object();
obj.name = "Akash";
obj.age = 23;
obj.job = "Developer";

console.log(obj);

2. Basic Operations on JavaScript Objects

Let's look at the common actions you will perform on objects.

1. Accessing Object Properties

You can access an object’s properties using either dot notation (most common) or bracket notation (useful for dynamic keys).

let obj = { name: "Akash", age: 23 };

// Using Dot Notation
console.log(obj.name); // Outputs: Akash
// Using Bracket Notation (quotes are required)
console.log(obj["age"]); // Outputs: 23

2. Modifying Object Properties

Properties in an existing object can be easily updated by reassigning their values.

let obj = { name: "Akash", age: 22 };
obj.age = 23; // Updating the age

console.log(obj.age); // Outputs: 23

3. Adding New Properties

You can dynamically add completely new properties to an object at any time using dot or bracket notation.

let obj = { model: "Tesla" };
obj.color = "Red"; // Dynamically added

console.log(obj); // { model: 'Tesla', color: 'Red' }

4. Removing Properties

The delete operator is used to completely remove a property from an object.

let obj = { model: "Tesla", color: "Red" };
delete obj.color;

console.log(obj); // { model: 'Tesla' }

5. Checking if a Property Exists

You can check if a specific key exists inside an object using the in operator or the hasOwnProperty() method.

let obj = { model: "Tesla" };

console.log("color" in obj); // false
console.log(obj.hasOwnProperty("model")); // true

6. Iterating Through Object Properties

To loop through all the keys in an object, use the for...in loop.

let obj = { name: "Akash", age: 23 };

for (let key in obj) {
    console.log(key + ": " + obj[key]);
}

7. Merging Objects

You can combine multiple objects together using Object.assign() or the modern spread syntax (...).

let obj1 = { name: "Akash" };
let obj2 = { age: 23 };

let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { name: 'Akash', age: 23 }

8. Finding Object Length

Unlike arrays, objects do not have a built-in .length property. To find how many items are in an object, you first get its keys as an array using Object.keys(), and then find the length of that array.

let obj = { name: "Akash", age: 23 };
console.log(Object.keys(obj).length); // 2

3. Recognizing a JavaScript Object Safely

To verify if a value is actually an object, use typeof and ensure it's not null (since in JavaScript, typeof null ironically returns "object").

let obj = { name: "Akash" };

// Verify it's an object AND it is not null
console.log(typeof obj === "object" && obj !== null); // true

4. Best Practices and Common Mistakes

The literal {} vs new Object()

As we saw earlier, you can create objects in two ways. But why do developers prefer {}?

Reason to use {}: It provides simpler syntax, better performance, and fewer errors!

Map vs Object

Another important concept is the difference between a standard Object and a Map structure: