JavaScript Objects
Objects let you group related values and behavior together under named keys, forming the backbone of almost every JavaScript program.
What is an object?
An object is a collection of key-value pairs. Where a variable holds a single value, an object holds many labelled values at once, which makes it ideal for modelling a real-world thing such as a user, a product, or a car. Each entry in the collection is called a property, and the label you use to reach a property is its key.
The most common way to create an object is the object literal: a pair of curly braces containing comma-separated key-value pairs. Keys are strings (quotes are optional when the key is a valid identifier), and values can be any type at all, including numbers, strings, arrays, functions, and even other objects.
Creating an object literal
<!DOCTYPE html>
<html>
<body>
<h2>Creating an object literal</h2>
<script>
const car = {
brand: "Toyota",
model: "Corolla",
year: 2022,
isElectric: false
};
console.log(car.brand); // "Toyota"
console.log(car.year); // 2022
</script>
</body>
</html>Reading and changing properties
You can access a property in two ways. Dot notation (object.key) is the shortest and reads naturally. Bracket notation (object["key"]) is required when the key is stored in a variable or contains characters that are not valid in an identifier, such as spaces or hyphens. Assigning to a property that does not yet exist simply creates it.
Dot vs bracket notation
<!DOCTYPE html>
<html>
<body>
<h2>Dot vs bracket notation</h2>
<script>
const person = { firstName: "Ada" };
// Read and update with dot notation
person.firstName = "Grace";
// Bracket notation is needed for dynamic keys
const key = "firstName";
console.log(person[key]); // "Grace"
// Add a brand new property
person.role = "Engineer";
console.log(person); // { firstName: "Grace", role: "Engineer" }
</script>
</body>
</html>Methods: functions inside objects
When a property's value is a function, it is called a method. Methods let an object act on its own data. Inside a method, the keyword this refers to the object the method was called on, so you can read and update the object's other properties.
A method using this
<!DOCTYPE html>
<html>
<body>
<h2>A method using this</h2>
<script>
const account = {
owner: "Sam",
balance: 100,
deposit(amount) {
this.balance += amount;
return this.balance;
}
};
console.log(account.deposit(50)); // 150
console.log(account.balance); // 150
</script>
</body>
</html>- Objects store data as key-value pairs called properties.
- Use dot notation for fixed keys and bracket notation for dynamic or unusual keys.
- A function stored as a property is a method, and this refers to the owning object.
- Assigning to a missing key creates it; there is no separate 'add' step.
Exercise: JavaScript Objects
How do you access an object property whose name is stored in a variable?
