Object

The key-value store at the heart of JavaScript. Almost everything in JS is an object, but Object itself is the plain {} you use for data, config, and lookup tables.

When to use it

Structured data — grouping related values under named keys
Lookup tables — mapping strings to values (config, translations)
Destructuring — pulling properties into variables
Merging — combining multiple objects into one
Iterating keys/values — when you need to loop over properties

Anatomy


const obj = { name: 'Alice', age: 30 }
 
obj.name                 // 'Alice' — dot access
obj['age']               // 30 — bracket access (dynamic keys)
 
Object.keys(obj)         // ['name', 'age'] — array of keys
Object.values(obj)       // ['Alice', 30] — array of values
Object.entries(obj)      // [['name','Alice'], ['age',30]] — key-value pairs
 
Object.assign({}, obj)   // shallow copy
Object.freeze(obj)       // prevents all changes (shallow)
Object.isFrozen(obj)     // true after freeze
 
Object.fromEntries([['a',1],['b',2]]) // { a: 1, b: 2 } — entries → object
 
'name' in obj            // true — key existence check
obj.hasOwnProperty('name') // true — own property only (not inherited)
Object.hasOwn(obj, 'name') // true — modern replacement (ES2022)
 
delete obj.age           // removes the property

At a glance

Method / Syntax	What it does
`.key` / `['key']`	Access a property
`Object.keys()`	Array of own enumerable keys
`Object.values()`	Array of own enumerable values
`Object.entries()`	Array of `[key, value]` pairs
`Object.fromEntries()`	Convert entries back to an object
`Object.assign(target, ...sources)`	Shallow merge into target
`{ ...obj }`	Spread — shallow copy/merge
`Object.freeze()`	Prevent mutations (shallow)
`Object.hasOwn()`	Check own property (ES2022)
`'key' in obj`	Check if key exists (includes prototype)
`delete obj.key`	Remove a property

1. Simple — destructure and rename


const user = { name: 'Alice', age: 30, role: 'admin' }
 
const { name, role } = user   // pull out specific keys
name // 'Alice'
role // 'admin'
 
// rename during destructure
const { name: userName } = user
userName // 'Alice'
 
// default value if key is missing
const { theme = 'dark' } = user
theme // 'dark' — user has no theme property

2. Intermediate — merge and spread


const defaults = { theme: 'light', lang: 'en', debug: false }
const userPrefs = { theme: 'dark', debug: true }
 
// spread merges left to right — later values win
const config = { ...defaults, ...userPrefs }
// { theme: 'dark', lang: 'en', debug: true }
 
// computed property names — dynamic keys
const field = 'email'
const data = { [field]: 'alice@test.com' }
data.email // 'alice@test.com'

3. Advanced — transform with entries


const prices = { apple: 1.2, banana: 0.5, cherry: 2.0 }
 
// double every price using entries → map → fromEntries
const doubled = Object.fromEntries(
  Object.entries(prices).map(([fruit, price]) => [fruit, price * 2])
)
// { apple: 2.4, banana: 1, cherry: 4 }
 
// filter an object — keep only prices above 1
const expensive = Object.fromEntries(
  Object.entries(prices).filter(([, price]) => price > 1)
)
// { apple: 1.2, cherry: 2 }

Object.entries() + array methods + Object.fromEntries() is the standard pattern for transforming objects the way you’d .map() or .filter() an array.

Gotchas

Spread and assign are shallow


const original = { a: 1, nested: { b: 2 } }
const copy = { ...original }
 
copy.nested.b = 99
original.nested.b // 99 — both point to the same inner object
 
// deep copy with structuredClone (modern browsers + Node 17+)
const deep = structuredClone(original)

Object keys are always strings


const obj = {}
obj[1] = 'one'
obj['1'] = 'uno'
 
Object.keys(obj) // ['1'] — the number key was coerced to a string
obj[1]           // 'uno' — both 1 and '1' are the same key
 
// use Map if you need non-string keys

Object.fromEntries() — convert entries back to an object
Array — Object.entries() returns arrays you can chain with array methods
Set — unique values without keys