Learning Goals

• Structure data with object literals.
• Access properties with dot notation and bracket notation.
• Understand methods and this.
• Work with arrays of objects.
• Use destructuring and the spread operator.
• Understand the concept of JSON.

1. Object Literals

// Creating an object
const person = {
  name: "John Doe",     // property (key: value)
  age: 25,
  city: "New York",
  isStudent: false,
};

2. Accessing Properties

Dot Notation

console.log(person.name); // "John Doe"
console.log(person.age);  // 25

// Adding and updating properties
person.email = "[email protected]"; // add a new property
person.age = 26;                   // update an existing property

// Deleting a property
delete person.isStudent;

Bracket Notation

// Useful when the property name is dynamic
const key = "name";
console.log(person[key]); // "John Doe"

// Property names containing spaces
const obj = { "first name": "John" };
console.log(obj["first name"]); // "John"

3. Methods and this

A function defined inside an object is called a method.

const person = {
  name: "John Doe",
  age: 25,

  // Defining a method
  greet: function() {
    return `Hello, I'm ${this.name}!`; // this = the current object
  },

  // Shorthand method syntax (ES6+)
  getInfo() {
    return `${this.name} (age ${this.age})`;
  },
};

console.log(person.greet());   // "Hello, I'm John Doe!"
console.log(person.getInfo()); // "John Doe (age 25)"

Note: Arrow functions do not have their own this, so use regular functions for methods.

4. Arrays of Objects

This is the pattern you will use most often in real projects.

const students = [
  { id: 1, name: "Chris Kim", grade: "A", score: 95 },
  { id: 2, name: "Emily Lee", grade: "B", score: 82 },
  { id: 3, name: "Michael Park", grade: "A", score: 91 },
];

// Finding a specific student
const student = students.find(s => s.id === 2);
console.log(student.name); // "Emily Lee"

// Extracting only students with an A grade
const aStudents = students.filter(s => s.grade === "A");

// Calculating the average score (using reduce)
const avg = students.reduce((sum, s) => sum + s.score, 0) / students.length;
console.log(avg); // 89.33...

5. Destructuring

Destructuring makes it easy to extract an object's properties into variables.

const person = { name: "John Doe", age: 25, city: "New York" };

// The old way
const name1 = person.name;
const age1 = person.age;

// Destructuring
const { name, age, city } = person;
console.log(name, age, city); // "John Doe" 25 "New York"

// Renaming variables
const { name: userName, age: userAge } = person;
console.log(userName); // "John Doe"

// Setting default values
const { email = "none" } = person;
console.log(email); // "none" (default when the property is missing)

// Using destructuring in function parameters
function greet({ name, age }) {
  return `${name} is ${age} years old.`;
}
greet(person); // "John Doe is 25 years old."

6. Spread Operator

const original = { name: "John Doe", age: 25 };

// Copying an object (shallow copy)
const copy = { ...original };
copy.age = 30;
console.log(original.age); // 25 (the original is unaffected)

// Merging objects (later values win)
const extra = { city: "New York", age: 30 };
const merged = { ...original, ...extra };
// { name: "John Doe", age: 30, city: "New York" }

// Adding and updating properties
const updated = { ...original, email: "[email protected]", age: 26 };

7. JSON (JavaScript Object Notation)

JSON is the format used to exchange data as strings.

const person = { name: "John Doe", age: 25 };

// Object → JSON string (serialization)
const json = JSON.stringify(person);
console.log(json);        // '{"name":"John Doe","age":25}'
console.log(typeof json); // "string"

// JSON string → object (deserialization)
const parsed = JSON.parse(json);
console.log(parsed.name); // "John Doe"

// Pretty-printing (2-space indentation)
console.log(JSON.stringify(person, null, 2));

Practice Files

• View Example
• Check Assignment
• Assignment Solution