JS Objects
Think of a passport, it doesn't store just one piece of information, it groups your name, birth date, photo, and passport number all together under one document, each labeled clearly.
A JavaScript object works the same way, it groups related pieces of data, called properties, and related actions, called methods, together under one single value, instead of scattering them across separate, disconnected variables.
Objects are everywhere in real JavaScript, representing a tutorial, a user, or a whole configuration for a site like cookiescursor.com, all as one organized unit.
In this page:
Syntax
const objectName = {
property: value,
method() {
// body
}
};
objectName.property;
objectName["property"];Object Literals
An object literal is created with curly braces {}, containing key-value pairs where each key names a property and its value can be any type, including numbers, strings, arrays, or even other objects.
Note:
Group naturally related data into a single object rather than several separate variables, it keeps related information together and easier to pass around.
Warning:
Object property names with spaces or special characters must be written as strings, like 'display name': Amara, inside the literal.
Example: Object Literals
// Declare the constant `user`; its value is built below
// Declare the constant `user`; its value is built below
const user = {
name: "Priya",
age: 28,
};
// Print `user` to the console
// Print `user` to the console
console.log(user);Properties and Methods
A property is a value stored on an object, while a method is a function stored as a property, giving the object its own behavior in addition to its data.
Note:
Name methods with clear action verbs, like getSummary or markComplete, so it's obvious they perform an action rather than just holding data.
Warning:
Forgetting the parentheses when calling a method, like tutorial.markComplete instead of tutorial.markComplete(), just references the function without ever running it.
Example: Properties and Methods
// Declare the constant `user`; its value is built below
// Declare the constant `user`; its value is built below
const user = {
name: "Rahul",
// Define the method `getSummary` with no parameters
// Define the method `getSummary` with no parameters
getSummary() {
// Return ``Name: ${this.name}`` from this function
// Return ``Name: ${this.name}`` from this function
return `Name: ${this.name}`;
},
};
// Print `user.getSummary()` to the console
// Print `user.getSummary()` to the console
console.log(user.getSummary());Accessing Properties
Properties can be accessed with dot notation, object.property, for simple fixed names, or bracket notation, object[property], which is required when the property name is stored in a variable or contains special characters.
Note:
Use dot notation by default, it's shorter and clearer, and switch to bracket notation only when the property name needs to be dynamic.
Warning:
Bracket notation with an undeclared variable, instead of a matching string key, silently looks up the wrong property or returns undefined.
Example: Accessing Properties
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Print `user.name` to the console
// Print `user.name` to the console
console.log(user.name);
// Declare the constant `key`, set to "name"
// Declare the constant `key`, set to "name"
const key = "name";
// Print `user[key]` to the console
// Print `user[key]` to the console
console.log(user[key]);The this Keyword
Inside a regular method, this refers to the object the method was called on, letting a method access that same object's other properties without needing to name the object explicitly.
Note:
A quick way to think about this inside a method, it usually refers to whatever is written directly before the dot when the method is called.
Warning:
Arrow functions do not have their own this, using an arrow function as an object method can lead to this pointing somewhere unexpected.
Example: The this Keyword
// Declare the constant `user`; its value is built below
// Declare the constant `user`; its value is built below
const user = {
name: "Alex",
// Define the method `greet` with no parameters
// Define the method `greet` with no parameters
greet() {
// Print `Hi, I'm ${this.name}` to the console
// Print `Hi, I'm ${this.name}` to the console
console.log(`Hi, I'm ${this.name}`);
},
};
// Call `user.greet()`
// Call `user.greet()`
user.greet();Object Destructuring
Object destructuring pulls specific properties out of an object directly into their own standalone variables, using a concise syntax that avoids repeating the object's name for every property you need.
Note:
Destructuring is especially useful when a function returns an object and you only need a couple of its properties in the calling code.
Warning:
Destructured variable names must exactly match the object's property names unless you explicitly rename them during destructuring.
Example: Object Destructuring
// Declare the constant `user`, set to `{ name: "Nina", age: 25 }`
// Declare the constant `user`, set to `{ name: "Nina", age: 25 }`
const user = { name: "Nina", age: 25 };
// Destructure {name, age} out of `user`
// Destructure {name, age} out of `user`
const { name, age } = user;
// Print `name, age` to the console
// Print `name, age` to the console
console.log(name, age);Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Trying to access a property that doesn't exist and being surprised by undefined instead of an error, JavaScript doesn't throw for missing properties by default.
- Confusing dot notation and bracket notation, bracket notation is required when a property name is dynamic or contains special characters.
- Forgetting that inside a regular method, this refers to the object the method was called on, not the surrounding code.
Chapter Summary
- Object literals group related properties and methods together under curly braces {}.
- Properties can be accessed with dot notation or bracket notation, and this refers to the object a method belongs to.
- Destructuring lets you pull specific properties out of an object into their own standalone variables.
Browser Support
Object literals, methods, this, and object destructuring are all standard JavaScript features supported in every modern browser.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: