jsschools
JavaScript Objects

Group Related Values With Names

JavaScript Objects

An object is a collection of named values. It's how JavaScript models everything from users to events to API responses.

5 min read Level 1/5 #objects#properties#dot-notation
What you'll learn
  • Create objects with literal syntax
  • Read properties with dot and bracket notation
  • Mutate, add, and delete properties

An object is a collection of named values. Each name is called a key (or property), and each name maps to a value.

Object literal script.js 
const user = {
  name: "Ada",
  age: 36,
  isAdmin: true,
};

console.log(user);
▶ Preview: console

Objects model things: a user, a song, a button, an HTTP response. Anything with multiple named pieces of data.

Reading Properties

Two ways:

Dot and bracket notation script.js 
const user = { name: "Ada", age: 36 };

console.log(user.name);     // "Ada"
console.log(user["name"]);  // "Ada"

console.log(user.age);      // 36
console.log(user["age"]);   // 36
▶ Preview: console
  • Dot notation (user.name) — concise, works for any identifier-shaped key.
  • Bracket notation (user["name"]) — required when the key has spaces, hyphens, or comes from a variable.
When you need brackets script.js 
const user = {
  "first name": "Ada",   // key with a space
};

// console.log(user.first name); // SyntaxError
console.log(user["first name"]); // "Ada"

const key = "age";
const u = { age: 36 };
console.log(u[key]);  // 36   ← compute the key
▶ Preview: console

Missing Properties Return undefined

Asking for a key that doesn’t exist doesn’t crash — you just get undefined.

Missing key script.js 
const user = { name: "Ada" };

console.log(user.email);    // undefined
console.log(user["email"]); // undefined
▶ Preview: console

Adding and Updating Properties

Assignment adds a property if it doesn’t exist, or updates it if it does. (Yes — works through a const. const makes the binding constant.)

Add and update script.js 
const user = { name: "Ada" };

user.age = 36;            // add a new property
user.name = "Ada Lovelace"; // update an existing one

console.log(user);  // { name: 'Ada Lovelace', age: 36 }
▶ Preview: console

Deleting a Property

delete script.js 
const user = { name: "Ada", age: 36, email: "a@b.c" };

delete user.email;

console.log(user); // { name: 'Ada', age: 36 }
console.log(user.email); // undefined
▶ Preview: console

delete is rarely needed — setting a property to undefined or null is usually more predictable. We don’t really delete from objects; we build new ones.

Checking Whether a Property Exists

Property existence checks script.js 
const user = { name: "Ada", age: undefined };

console.log("name" in user);             // true
console.log("email" in user);            // false
console.log("age" in user);              // true  ← key exists, value undefined
console.log(user.age === undefined);     // also true — different question

console.log(Object.hasOwn(user, "name")); // true  (modern, recommended)
▶ Preview: console

Object.hasOwn(obj, key) is the modern way to ask “does this object have this OWN property?” — it ignores inherited ones.

Nested Objects

Values can be other objects, building up a tree.

Nested objects script.js 
const user = {
  name: "Ada",
  address: {
    city: "London",
    country: "UK",
  },
};

console.log(user.address.city);  // "London"
▶ Preview: console

For “maybe missing” nested chains, use optional chaining (?.) from the Control Flow chapter.

Try It Yourself

Exercise

Build a user object

Difficulty 1/5~3 min
Build a constant `user` that is an object with three properties: `name = "Ada"`, `age = 36`, and a method `greet()` that returns the string `"Hello, Ada"`. Log `user.greet()`.
solution.js
// declare user here
console.log(user.greet());
4tests will run
💡 Show hint
Use method shorthand for `greet` and refer to `this.name` inside it.
✅ Show solution
const user = {
  name: "Ada",
  age: 36,
  greet() {
    return `Hello, ${this.name}`;
  },
};
console.log(user.greet());

Up Next

Next: more on property shorthand, computed keys, and shorthand syntax.

JavaScript Object Properties →