Java Script
Back Next

JavaScript Objects


In JavaScript, an object is a collection of key-value pairs. Think of an object as a real-world object: it has properties (attributes) and methods (actions it can perform). Objects allow you to store complex data and organize it logically.


1️⃣ Creating an Object

You can create an object using curly braces {}:

let person = {
  name: "Alice",
  age: 25,
  city: "Paris"
};

console.log(person);
  • name, age, cityproperties (keys)
  • "Alice", 25, "Paris"values
  • Each key-value pair is separated by a comma


2️⃣ Accessing Object Properties

You can access values using either dot notation or bracket notation:

// Dot notation
console.log(person.name); // Alice

// Bracket notation
console.log(person["age"]); // 25
  • Dot notation → easy and common
  • Bracket notation → useful if the property name is stored in a variable
let key = "city";
console.log(person[key]); // Paris


3️⃣ Modifying Object Properties

You can update, add, or delete properties:

// Update existing property
person.age = 26;

// Add new property
person.country = "France";

// Delete property
delete person.city;

console.log(person);
// { name: "Alice", age: 26, country: "France" }


4️⃣ Objects with Methods

Objects can have functions as properties, called methods:

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // Hello, my name is Alice
  • this refers to the current object
  • Methods allow objects to perform actions


5️⃣ Looping Through Object Properties

You can use a for...in loop to iterate over keys:

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

// Output:
// name: Alice
// age: 25
// greet: function() { ... }


Compilation of Entire Code

Explanation:

  • person object stores properties and a method
  • Buttons demonstrate viewing, updating, adding, and calling methods
  • for...in loop displays all keys and values dynamically


Example Code:
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Objects Example</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    p { font-size: 18px; color: darkblue; }
  </style>
</head>
<body>

  <h1>JavaScript Objects Demo</h1>

  <p id="demo">Click buttons to see object operations</p>

  <button onclick="showPerson()">Show Person Info</button>
  <button onclick="updateAge()">Update Age</button>
  <button onclick="addCountry()">Add Country</button>
  <button onclick="callGreet()">Call Greet Method</button>

  <script>
    let person = {
      name: "Alice",
      age: 25,
      city: "Paris",
      greet: function() {
        return "Hello, my name is " + this.name;
      }
    };

    function showPerson() {
      let message = "";
      for (let key in person) {
        message += key + ": " + person[key] + "<br>";
      }
      document.getElementById("demo").innerHTML = message;
    }

    function updateAge() {
      person.age = 26;
      document.getElementById("demo").innerHTML = "Age updated to: " + person.age;
    }

    function addCountry() {
      person.country = "France";
      document.getElementById("demo").innerHTML = "Country added: " + person.country;
    }

    function callGreet() {
      document.getElementById("demo").innerHTML = person.greet();
    }
  </script>

</body>
</html>
Java Script
Introduction Application of JavaScript Defining JavaScript Client-Side JavaScript JavaScript Syntax JavaScript Varaibles JavaScript Operators JavaScript Statements JavaScript Arrays Sorting JavaScript Array JavaScript Functions JavaScript Objects JavaScript Switch Case & While Loops JavaScript For & For-In Loops JavaScript Cookies JavaScript Form Validation JavaScript Error and Exception Handling JavaScript Animation
All Courses
Bootstrap Content Writing CSS Cyber Security Data Analysis Deep Learning Email Marketing Excel HTML Java Script Machine Learning MySQLi PHP Power Bi Python for Analysis SEO SMM SQL