Objects: Collections of Key-Value Pairs
Why This Matters: Objects are the backbone of JavaScript, allowing you to group related data and functionality, essential for modeling real-world entities and building complex applications.
While primitive data types (string, number, boolean, null, undefined, symbol, bigint) represent single, simple values, objects are more complex. They are fundamental to JavaScript and represent collections of data and more complex entities.
In JavaScript, almost everything is an object or behaves like one, except for the primitive types. Arrays, functions, and even Date are all types of objects.
What is an Object?
An object is a collection of key-value pairs.
- A key (also called a "property name") is typically a string (or a Symbol, but mostly strings).
- A value can be any valid JavaScript data type, including other objects, arrays, functions, or primitives.
This structure allows you to group related data and functionality together.
Object Literal Syntax
The most common way to create an object is using the object literal syntax, which uses curly braces {}.
Practice: Creating Your First Object
In the editor below, declare a variable named person and assign it an object literal. Give it properties like name (string), age (number), isStudent (boolean), city (string), and hobbies (an array of strings). Then, log the entire person object to the console.
Accessing Object Properties
You can access the values of an object's properties using two main methods:
- Dot Notation (
.): This is the most common and preferred method when the property name is a valid JavaScript identifier (e.g., no spaces, starts with a letter, etc.) and you know the name beforehand. - Bracket Notation (
[]): This is necessary when:- The property name contains spaces or special characters.
- The property name is stored in a variable.
- You need to dynamically access properties (e.g., in a loop).
Practice: Accessing Properties
Below, you'll find a car and a student object. Use dot notation and bracket notation to access and log specific properties as instructed in the comments.
Modifying and Adding Properties
Objects are mutable, meaning you can change their properties, add new ones, or delete existing ones after the object has been created.
Modifying Properties
Simply assign a new value to an existing property using either dot or bracket notation.
Adding New Properties
Assign a value to a new property name.
Practice: Modifying and Adding Properties
Start with the book and computer objects below. Modify an existing property for the book, and add new properties to the computer object. Log the objects after each change to see the updates.
Exercise: Building and Manipulating a Product Object
This exercise will combine everything you've learned. Follow the instructions in the editor to create, access, modify, and add properties to a product object.