Objects / Dictionaries
📚 What are Objects in JavaScript? A JavaScript object groups related data and functions together using key-value pairs. Keys (properties) are names; values can be anything: strings, numbers, arrays, even other objects or functions (called methods). Objects model real-world things naturally.
Appy Says…
Objects are how JavaScript models the real world. A user is an object with a name, email, and score. A product is an object with a title, price, and image. Master objects and you can represent anything in your app.
What is an Object?
A JavaScript object is a collection of key-value pairs called properties. Keys are strings (or symbols); values can be any type — including other objects or functions (called methods).
- •Create:
const user = { name: 'Appy', age: 14, score: 95 }; - •Access:
user.name(dot) oruser['name'](bracket — needed for dynamic keys) - •Add:
user.email = 'appy@app.com'; - •Delete:
delete user.score; - •Check key exists:
'name' in user→true - •Methods:
{ greet() { return 'Hi, ' + this.name; } } - •Loop keys:
for (const key in obj)orObject.keys(obj)
Think of it like a Roblox character data card
Every Roblox character has stats: health, speed, level, username. That's an object — a labelled collection of data. You access stats by name (character.health), update them (character.health -= 10), and add new ones at any time.
How It Works
- •1. Object literals use
{}:const obj = { key: value } - •2. Access with dot notation:
obj.key; or bracket:obj['key'] - •3. Bracket notation is needed for dynamic keys:
obj[variable] - •4. Objects are passed by reference — assigning copies the reference, not the data
- •5. Shallow copy:
const copy = { ...obj } - •6.
Object.keys(obj)returns array of keys;Object.values(obj)returns array of values;Object.entries(obj)returns[key, value]pairs
Real-World Examples
- •User profile:
{ id: 1, username: 'appy', followers: 1200, verified: true } - •A tweet:
{ text: '...', likes: 42, author: { name: 'Appy' } } - •Config settings:
{ theme: 'dark', language: 'en', notifications: true } - •API responses almost always return JSON, which maps directly to JavaScript objects
- •React component props are an object:
{ title: 'Home', onClick: handleClick }
Key Facts
- •Arrays are objects —
typeof []returns'object' - •Destructuring:
const { name, age } = userextracts properties into variables - •Shorthand: if variable and key share a name —
{ name }instead of{ name: name } - •
JSON.stringify(obj)converts an object to a JSON string;JSON.parse(str)goes back
Watch Out!
Objects are passed by reference. If you do const b = a where a is an object, changing b.name also changes a.name — they point to the same object. Use const b = { ...a } for a shallow copy.
Remember
Objects model real-world entities as key-value pairs. Use dot notation for known keys, bracket notation for dynamic keys. Spread { ...obj } to copy.
What You Learned
- •Objects store key-value pairs; access with dot or bracket notation
- •Objects are passed by reference — copy with
{ ...obj } - •Unlocks: modelling users, products, API responses, config, and every structured data shape
Key Facts
- →Arrays are objects —
typeof []returns'object' - →Destructuring:
const { name, age } = userextracts properties into variables - →Shorthand: if variable and key share a name —
{ name }instead of{ name: name } - →
JSON.stringify(obj)converts an object to a JSON string;JSON.parse(str)goes back
Real-World Examples
Remember
Objects model real-world entities as key-value pairs. Use dot notation for known keys, bracket notation for dynamic keys. Spread { ...obj } to copy.
Quick Quiz
How do you access person's name in person = { name: 'A' }?