JavaScript · Lesson 13 / 32 · English

JavaScript Objects

Understand the idea. Change the code. Build confidence with one focused experiment.

Detailed notesRunnable JavaScriptPractice + answer

01 / Understand

Start with the idea

Objects group related properties. Reading a property, updating it, and sharing a reference are separate ideas: two bindings can refer to the same object.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

Step-by-step lesson notes

Objects in JavaScript

An object is a collection of key-value pairs (properties). Objects are the fundamental building blocks of JavaScript — almost everything is an object.

Creating Objects

JavaScript reference fragmentCODE

// Object literal (most common)
const person = {
  name: "Alice",
  age: 30,
  isAdmin: false,
  greet() {                    // shorthand method
    return `Hi, I'm ${this.name}`;
  }
};

// Accessing properties
console.log(person.name);          // dot notation
console.log(person["age"]);        // bracket notation
console.log(person.greet());       // "Hi, I'm Alice"

// Adding and deleting properties
person.email = "alice@example.com";
delete person.isAdmin;

Destructuring

JavaScript reference fragmentCODE

const { name, age, email = "unknown" } = person;
console.log(name);  // "Alice"
console.log(age);   // 30
console.log(email); // "alice@example.com"

// Rename while destructuring
const { name: fullName } = person;
console.log(fullName); // "Alice"

Spread and Object.assign

JavaScript reference fragmentCODE

const defaults = { theme: "light", lang: "en", fontSize: 14 };
const userPrefs = { theme: "dark", fontSize: 16 };

// Spread operator — merge objects (later keys win)
const settings = { ...defaults, ...userPrefs };
console.log(settings);
// { theme: 'dark', lang: 'en', fontSize: 16 }

// Shallow clone
const clone = { ...person };

Useful Object Methods

JavaScript reference fragmentCODE

const car = { make: "Toyota", model: "Camry", year: 2023 };

Object.keys(car);    // ["make", "model", "year"]
Object.values(car);  // ["Toyota", "Camry", 2023]
Object.entries(car); // [["make","Toyota"],["model","Camry"],["year",2023]]

// Iterate over entries
for (const [key, value] of Object.entries(car)) {
  console.log(`${key}: ${value}`);
}

// Freeze — prevent modifications
const config = Object.freeze({ apiUrl: "https://api.example.com" });
// config.apiUrl = "other"; // silently fails in non-strict mode

03 / Read & predict

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const learner = { name: "Kavi", completed: 2 };
const sameLearner = learner;
sameLearner.completed += 1;
console.log(learner.name);
console.log(learner.completed);

Predict first. Reveal the expected result.

Kavi
3

04 / Experiment

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

05 / Your turn

Put the idea to work

Practice challenge

Create a shallow copy with {…learner}, then change the copy's completed value.

Reveal the answer and reasoning

The original completed remains 3 because the top-level object is copied. Nested objects would still be shared.

One mistake to avoid: const does not freeze an object. Avoid assuming that assigning an object creates a new independent copy.

Your learning checkpoint

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.