JavaScript Tutorial

The language for programming web pages.

JS Objects

JavaScript Objects

In JavaScript, objects are king. Almost everything is an object. Objects are variables that can contain many values. Object values are written as name:value pairs (key:value).

Object Methods:

Object.keys(obj) — returns array of keys
Object.values(obj) — returns array of values
Object.entries(obj) — returns array of [key,value] pairs
Spread operator: { ...obj }
Destructuring: const { name } = obj

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial; padding:20px;">
  <h2>JS Objects Demo</h2>
  <div id="out" style="background:#1e1e1e; color:#abb2bf; padding:15px; border-radius:8px; font-family:monospace; line-height:2;"></div>
  <button onclick="runDemo()" style="margin-top:10px; padding:10px 20px; background:#f7df1e; color:#1a1a2e; border:none; border-radius:5px; cursor:pointer; font-weight:bold;">▶ Run</button>
  <script>
    function runDemo() {
      // Create object
      const student = {
        name: "Ali Khan",
        age: 22,
        course: "JavaScript",
        grades: [85, 90, 95],
        greet() { return `Hi, I am ${this.name}!`; }
      };

// Access properties
      const dotAccess    = student.name;
      const bracketAccess = student["course"];

// Destructuring
      const { name, age } = student;

// Spread
      const updated = { ...student, age: 23 };

// Object methods
      const keys   = Object.keys(student).join(", ");
      const values = Object.values(student).slice(0,3).join(", ");

document.getElementById("out").innerHTML = `
        Object: { name, age, course, grades, greet() }<br>
        Dot notation:     student.name = "${dotAccess}"<br>
        Bracket notation: student["course"] = "${bracketAccess}"<br>
        Destructuring:    name="${name}", age=${age}<br>
        Spread (age:23):  updated.age = ${updated.age}<br>
        Object.keys():    ${keys}<br>
        Object.values():  ${values}...<br>
        Method call:      ${student.greet()}
      `;
    }
  </script>
</body>
</html>

Result

Topics