JS Objects
In this page:
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
const user = {
name: "Priya",
age: 28,
};
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
const user = {
name: "Rahul",
getSummary() {
return `Name: ${this.name}`;
},
};
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
const user = { name: "Sam" };
console.log(user.name);
const key = "name";
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
const user = {
name: "Alex",
greet() {
console.log(`Hi, I'm ${this.name}`);
},
};
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
const user = { name: "Nina", age: 25 };
const { name, age } = user;
console.log(name, age);- 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.
- 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.
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: