Skip to content 
Objects are the second major form of built-in data structure in JavaScript. As explained previously, Arrays were for lists and objects are for describing things with named attributes. Think of an object as an entity in the real world that has several characteristics. A car has a color, a model, a year and mileage. A User has a name, email address, age, and login status. In coding, we group the relevant pieces of information about something into a single object. Each attribute gets a name (also referred to as a property or key) and you can retrieve that value using the name.
Without JavaScript objects, you would have scattered related data across many different variables – userName, userEmail, userAge and had to pass each one around separately. With JavaScript objects you can keep everything in one place at once, and therefore have much more intuitive code that is easier to understand and manage. Below we go through the five main JavaScript objects concepts that you will use repeatedly.
1. Creating and accessing javascript object properties
Creating a JavaScript object is easy. You start with curly braces {} and define properties as key: value pairs separated by commas. Usually keys are strings (unless they are valid identifiers), and values can be any data type strings, numbers, boolean, arrays, even other objects.
There are two ways to access property values. The first is dot notation (object.property). Dot notation is generally cleaner and faster when you already know the property name. The second is bracket notation (object[“property”]). Bracket notation is better suited for cases where the property name is dynamically generated (for instance when you are looping through a JavaScript object) or contains spaces or hyphens. Bracket notation is required for dynamic property names and dot notation does not support either variables or special characters.
Once you’ve created a JavaScript object you can add new properties using the assignment operator (=) or delete properties using the delete operator. These capabilities make JavaScript objects very dynamic.
2. Object methods: adding behavior to JavaScript objects
Properties don’t have to be static, they can also be functions. Functions defined inside a JavaScript object are called methods. Methods enable objects to have behavior in addition to having state.
Example: A user object may have a greet() method that returns a greeting string that includes their personal name property. Inside a method, you refer to the current object with the word ‘this’. ‘this’ gives the method access to the object’s other properties.
Methods are what bring JavaScript objects to life. They wrap up both the data and the possible actions on that data. Rather than defining a separate function that accepts a user object as an argument, you call the method right on the object itself.
Defining methods is easy. You can define them as function expressions inside the object literal or using the newer (and shorter) method syntax introduced in ES6: greet(){return `Hello, ${this.name}`;} . Both methods work well, but the newer syntax is more modern and efficient.
3. Iterating over a JavaScript object’s properties
Unlike arrays, JavaScript objects are not inherently iterable. Therefore, you cannot use for…of to iterate over a regular object. That said, there are still ways to iterate through the properties of a JavaScript object. One way is to use for…in and iterate over all enumerable properties of the object including any inherited from its prototype chain. To prevent iterating over inherited properties, you can include an hasOwnProperty() check within the loop.
Another way is to convert the object into an array of keys, values, or entries. The three methods that help achieve this conversion are Object.keys(), Object.values(), and Object.entries(). Each of these methods returns an array that you can then use to iterate over with forEach or for…of. Object.keys() returns an array of property names, Object.values() returns an array of property values, and Object.entries() returns an array of [key,value] pairs.
This ability to easily convert objects into arrays is particularly valuable when you want to manipulate or filter some aspect of the object’s data. Because they return arrays, you can follow up array manipulation (like map() and filter()) to process the data neatly.
4. Object Destructuring: Extracting Data Directly from JavaScript Objects
There are many who consider one of the most exciting new features of modern JavaScript to be destructuring. Destructuring allows you to extract multiple property values from a single JavaScript object and assign them to variables in a single line of code.
Rather than writing const name = user.name; const age = user.age; const email = user.email;, you write const {name, age, email} = user;. Unless you choose otherwise, variable names should mirror property names exactly.
If variable names don’t mirror property names perfectly, you can assign aliases using the following syntax: const {name: username} = user;.
In function parameters, destructuring is equally valuable. Instead of passing a big object into a function and then accessing each property individually, you can deconstruct directly in the parameter list. By doing so, you clearly specify what parameters your function expects, and reduce redundant code.
Destructuring also supports providing defaults for missing properties. Using the colon syntax : you can provide a default value for a property: const {name = “Anonymous”, age = 0} = user;.
Finally, destructuring allows for nested extraction of properties from objects inside objects. While this capability is powerful and flexible, it should be avoided whenever possible due to readability issues associated with excessive nesting.
5. The Spread Operator with JavaScript Objects
Although not limited to arrays alone, when applied to objects, the spread operator (…) effectively duplicates all properties from one object into another. This is how you get shallow copies of objects (i.e., only top-level properties copied) and merge objects without modifying the source object.
To create a shallow copy of an object, you can use: const copy = {…original}; . The new object has all the same properties and values as the original object. Note that while all top-level properties are copied over, nested objects retain their references — meaning that any changes made to either the original or copied version will affect both.
To merge two objects together (assuming no duplicate property names), you can use: const merged = {…obj1,…obj2};. If there are overlapping property names (e.g., obj1 and obj2 both contain an “age” property), later versions will replace earlier ones. This is great for providing default values for objects and then allowing users to modify those values.
When creating new versions of an object from existing ones but with certain properties modified, you can apply similar logic using the spread operator combined with direct property modification: const updatedUser = {…user, age:user.age+1}; creates a completely independent new version of an object with all the exact same properties (except that “age” was bumped).
Using this technique frequently in applications written using React or other functional programming paradigms is quite common.
Wrapping Up
The five concepts reviewed here creating/accessing properties, object methods, iterating over objects, destructuring and spreading will serve as a good base upon which to build your knowledge of working with JavaScript objects.
Create simple JavaScript objects representing things in the world around us (a book, product, person) and add some properties and methods. Access various parts of your JavaScript objects with dot and bracket notation. Loop through your JavaScript objects using Object.entries(). Deconstruct your data directly into variables using destructuring. Finally use the spread operator to create shallow copies/merges of your JavaScript objects.
As you continue practicing these ideas, as you create more sophisticated models and systems, JavaScript objects will begin to feel more natural. They surround almost every part of JavaScript development from configuration JSONs and APIs back down to individual DOM nodes.
JavaScript Essentials Cheat Sheet for Mastering JavaScript Objects
Below is a cheat sheet checklist to assist in your continued practice with JavaScript objects:
- Create JavaScript objects using curly brackets: const person = { name:”Alice”, age: 30};
- Access known property names with dot notation: person.name is typically cleaner and faster.
- Access unknown/dynamic/special character property names with bracket notation: person[“favorite-color”], person[propertyName];
- Define object methods using ES6 short-hand: greet(){ return`Hi, I am ${this.name};`}
- Use Object.keys()/Object.values()/Object.entries() to iterate over your objects safely: These methods return arrays that you can iterate over.
- Extract multiple values into variables using destructuring: const {name ,age} = person;
- Copy/merge entire objects using spread operators: const copy = {…original}, const merged = {…obj1,…obj2}
- Keep in mind that because JavaScript compares objects via reference rather than value i.e., two separate objects with identical attributes do NOT equate as equals.
For further reading on each topic mentioned above, see Mozilla Developer Network’s (MDN) extensive documentation on Objects, which provides example rich descriptions intended specifically for newcomers.
Also check out the sections on Objects from JavaScript.Info – it offers straightforward yet informative tutorials on getting started with JavaScript objects.
By mastering basic JavaScript object patterns such as grouping related data under a single object, your overall organization and management of data improve dramatically. Rather than breaking up logically related items into numerous discrete variables, now grouped into structured containers, you are able to keep your code more logical and manageable, ultimately producing better quality software.
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS
[INSERT_ELEMENTOR id=”122″]
