JavaScript Objects Tutorial

In JavaScript, objects are one of the most essential data types used to store collections of data and more complex entities. If you understand how JavaScript objects work, you’ll unlock the full power of the language.

🔹 What is an Object?

An object in JavaScript is a non-primitive data type used to store keyed collections of various data and functionality. Think of it as a container with labeled slots, each storing a value.

javascriptCopyEditlet person = {
  name: "Alice",
  age: 30,
  isStudent: false
};

Here, person is an object with three properties: name, age, and isStudent.

---

🔹 Object Syntax

Objects are defined using curly braces {}. Each property is a key-value pair, where keys are strings (or symbols), and values can be any data type.

javascriptCopyEditlet car = {
  brand: "Toyota",
  model: "Camry",
  year: 2022
};

• Keys: "brand", "model", "year"
• Values: "Toyota", "Camry", 2022

---

🔹 Accessing Object Properties

You can access object properties in two ways:

1. Dot Notation: javascriptCopyEditconsole.log(car.brand); // Toyota
2. Bracket Notation (useful with dynamic keys or special characters): javascriptCopyEditconsole.log(car["model"]); // Camry

---

🔹 Modifying and Adding Properties

Objects in JavaScript are mutable, meaning you can change or add properties after creation:

javascriptCopyEditcar.year = 2023;        // Modify
car.color = "blue";     // Add

---

🔹 Deleting Properties

You can remove a property using the delete keyword:

javascriptCopyEditdelete car.model;

---

🔹 Types of Objects

JavaScript objects can be grouped into different types or categories based on their creation and purpose:

1. Plain Objects (Object Literals)

Most commonly used type:

javascriptCopyEditlet book = {
  title: "JS Basics",
  author: "John Doe"
};

2. Arrays

Technically objects with numeric keys:

javascriptCopyEditlet fruits = ["apple", "banana", "cherry"];
console.log(typeof fruits); // "object"

3. Functions

Functions are also objects in JavaScript and can have properties:

javascriptCopyEditfunction greet() {
  return "Hello";
}
greet.language = "English";

4. Date Objects

Used to work with dates and times:

javascriptCopyEditlet today = new Date();

5. Built-in Objects

JavaScript has many built-in objects like Math, JSON, RegExp, etc.

javascriptCopyEditconsole.log(Math.random()); // Random number

6. Custom Constructor Functions

Objects created using functions:

javascriptCopyEditfunction Animal(type) {
  this.type = type;
}
let dog = new Animal("Dog");

7. Classes (ES6+)

A modern way to create object templates:

javascriptCopyEditclass Person {
  constructor(name) {
    this.name = name;
  }
}
let user = new Person("Eva");

---

🔹 Looping Through Objects

You can loop over object properties using for...in:

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

---

🔹 Object Methods

Objects can also store functions (called methods):

javascriptCopyEditlet calculator = {
  add: function (a, b) {
    return a + b;
  }
};

console.log(calculator.add(2, 3)); // 5

From ES6 onwards, you can use shorthand:

javascriptCopyEditlet calculator = {
  add(a, b) {
    return a + b;
  }
};

---

📝 Conclusion

JavaScript objects are versatile and powerful. They form the foundation for most JavaScript applications, especially in web development. Understanding different types of objects—literals, arrays, functions, classes, and more—helps you write more efficient and maintainable code.