HOWTO · JavaScript
How to Create a List of Objects in JavaScript
This article discusses and demonstrates how to create a list of objects in JavaScript and their properties and methods.
On this page
A JavaScript list of objects is an array whose elements are object literals. Each object can hold its own properties and methods. The example starts with two employee records, then reads and changes fields and calls a method.
Create a List of Objects in JavaScript
Use square brackets for the array and braces for each object. Separate array elements with commas; inside each object, write property names followed by colons and values. Properties can contain strings, numbers, arrays, or functions. A function stored on an object is commonly called a method. JavaScript supports object literals directly; a class is not required for this pattern.
Run this example:
const employees = [
{
id: 541,
name: "Ava Chen",
department: "Engineering",
greeting() {
return `Hello, ${this.name}`;
}
},
{
id: 542,
name: "Noah Patel",
department: "Design",
greeting() {
return `Hello, ${this.name}`;
}
}
];
const field = "name";
console.log(employees[0].name);
console.log(employees[0][field]);
employees[0].role = "Editor";
employees[1].name = "Noah P.";
delete employees[1].department;
console.log(employees[0].role);
console.log(employees[1].department);
console.log(employees[0].greeting());
Ava Chen
Ava Chen
Editor
undefined
Hello, Ava Chen
The array index selects an object, starting at index 0. The example reads the first employee’s name, adds a role property to that object, changes the second employee’s name, and removes that employee’s department property. Its output shows both forms of property access, the added role, undefined after deletion, and the greeting returned by the method.
Access and Update Object Properties
Use dot notation when the property name is known as part of the code, as in employee.name. Use bracket notation when the name is stored in a variable: if field contains "name", then employee[field] reads the name property. Brackets also allow property names that are not valid identifier names, such as employee["start-date"].
Assignment updates an existing property or adds one when that name is not already present. For example, employee.role = "Editor" adds or replaces role. The delete operator removes a property from an object; reading that removed property later returns undefined. It does not remove the object from the array. To remove an array element, use an array operation such as splice instead.
When processing every object, iterate over the array with for...of or an array method such as map. For instance, for (const employee of employees) { console.log(employee.name); } reads the name from each record. Choose map when you need a new array of transformed values; use for...of for straightforward actions such as printing or updating each object.
Define and Call Object Methods
A method is a function that is stored as an object property. In the example, each employee has a greeting method, and employees[0].greeting() calls it. Parentheses matter: employees[0].greeting refers to the function, while adding () invokes it.
Inside a method called as employee.greeting(), this refers to the object before the dot, so this.name reads that employee’s name. This is useful when the same method shape works with different records. If a method is detached and called without its object, its this behavior differs; keep the call attached to the object or use an arrow function only when lexical this is intended. The method syntax shown here keeps each record self-contained and easy to adapt.