JavaScriptObjects

Objects

An object is JavaScript's most fundamental data structure: an unordered collection of keys mapped to values. Functions, arrays, regexes and dates are all objects under the hood. If you understand the literal syntax and how property access really works, you have the foundation for almost every other topic in the language.

The literal syntax

The most common way to build an object is with curly-brace literal syntax. Each entry is a key: value pair, separated by commas.

JS
const user = {
  name: "Ada",
  age: 36,
  email: "ada@example.com",
  isAdmin: true,
};

console.log(user);
{ name: 'Ada', age: 36, email: 'ada@example.com', isAdmin: true }

The trailing comma after the last entry is legal and recommended — it produces cleaner diffs when you add a new property.

Accessing properties: dot vs bracket

There are two ways to read a property. Dot notation is shorter and works when the key is a valid identifier known at write time. Bracket notation evaluates an expression and works for any string or symbol key.

JS
const user = { name: "Ada", "favourite-colour": "indigo" };

console.log(user.name);                 // dot — fine
console.log(user["name"]);              // bracket — equivalent
console.log(user["favourite-colour"]);  // dot would be a syntax error here

const field = "name";
console.log(user[field]);               // dynamic key — bracket only

Reading a missing property returns undefined — it does not throw. Writing to a missing property simply creates it.

Property shorthand

When the variable name matches the key name, you can omit the colon. This shows up everywhere in modern code, especially when returning data from functions.

JS
const name = "Ada";
const age = 36;

// Long form
const a = { name: name, age: age };

// Shorthand — same object
const b = { name, age };

console.log(a, b);
Method shorthand

Functions stored as properties can also use a shorter form, dropping the colon and the function keyword.

JS
const calculator = {
  // Long form
  addLong: function (a, b) {
    return a + b;
  },

  // Method shorthand — equivalent
  add(a, b) {
    return a + b;
  },
};

console.log(calculator.add(2, 3));   // 5
Shorthand is not the same as an arrow
Method shorthand still gives the function its own `this`. Writing `add: (a, b) => a + b` instead would *break* methods that use `this` — arrow functions inherit `this` from the surrounding scope.
Computed property names

Wrap a key in square brackets inside the literal to compute it from an expression. This is invaluable for building objects dynamically.

JS
const field = "email";
const id = 42;

const record = {
  [field]: "ada@example.com",
  [`user_${id}`]: true,
  ["is" + "Admin"]: false,
};

console.log(record);
{ email: 'ada@example.com', user_42: true, isAdmin: false }
What can be a key?

Object keys are always strings or symbols. Anything else you write — numbers, booleans, even objects — is coerced to a string first.

  • Strings — the normal case.

  • Symbols — unique, non-enumerable keys often used for metadata (covered separately).

  • Numbers like 1 and 2 become the strings "1" and "2".

  • Objects used as keys are coerced via toString() — usually to "[object Object]". Use a Map if you need real object keys.

JS
const o = {};
o[1] = "one";
o[true] = "yes";
o[{}] = "first";
o[{ id: 9 }] = "second";   // overwrites — both keys are "[object Object]"

console.log(Object.keys(o));
[ '1', 'true', '[object Object]' ]
Deleting and checking properties

JS
const user = { name: "Ada", age: 36 };

// Check existence
console.log("name" in user);              // true — own or inherited
console.log(Object.hasOwn(user, "age"));  // true — own only

// Remove a property
delete user.age;
console.log(user);                        // { name: 'Ada' }

delete is rarely needed in everyday code — most patterns prefer building a new object without the property using spread (covered in Object Spread & Rest).

Objects are references

A variable holding an object stores a reference, not a copy. Two variables can point at the same object — mutating through one is visible through the other.

JS
const a = { count: 0 };
const b = a;        // same reference
b.count = 5;
console.log(a.count);   // 5 — same object

const c = { count: 0 };
const d = { ...c }; // shallow copy
d.count = 9;
console.log(c.count);   // 0 — independent
What objects are not
Plain objects are unordered conceptually, but engines preserve insertion order for string keys (with integer-like keys ordered numerically first). They are *not* hash maps with arbitrary keys — for that, reach for `Map`.
One thing to remember
A JavaScript object is a bag of string-or-symbol keys mapped to values. Everything else — shorthand, computed names, methods — is just sugar over that idea.