How to Convert an Object to an Array in TypeScript?

During a training program, someone asked about converting objects to arrays in Typescript. There are various methods to do this. In this tutorial, I will explain how to convert an object to an array in TypeScript with some examples.

Convert an Object to an Array in TypeScript

Recently, our team was building a web application for a company based in the USA. The application receives data from an API in the form of an object, where each property represents an employee’s name, and the corresponding value represents their salary. For example:

const salariesObj = {
  John: 5000,
  Emma: 6500,
  Michael: 7000,
  Sophia: 5500
};

Now, you need to display this data in a table or perform operations that require an array format. So, you need to convert the objects into an array in Typescript. Here is how to do this.

Read Find the Length of an Array in TypeScript

Method 1: Using Object.entries() and map()

One of the most concise and efficient ways to convert an object to an array in TypeScript is by utilizing the Object.entries() method in combination with map(). Here’s how you can achieve this:

const salariesObj = {
  John: 5000,
  Emma: 6500,
  Michael: 7000,
  Sophia: 5500
};

const salariesArr = Object.entries(salariesObj).map(([name, salary]) => ({
  name,
  salary
}));

console.log(salariesArr);

In this example, Object.entries() returns an array of a given object’s own enumerable string-keyed property [key, value] pairs. We then use map() to iterate over each entry and create a new object with the name and salary properties. The resulting salariesArr will be an array of objects, each containing the employee’s name and salary.

Output:

[
  { name: 'John', salary: 5000 },
  { name: 'Emma', salary: 6500 },
  { name: 'Michael', salary: 7000 },
  { name: 'Sophia', salary: 5500 }
]

Here is the exact output in the screenshot below:

Read Remove an Item from an Array in TypeScript

Method 2: Using Object.keys() and map()

Another approach to convert an object to an array in Typescript is by using Object.keys() in combination with map(). This method is slightly more verbose but provides more control over the resulting array. Here’s an example:

const salariesObj = {
  John: 5000,
  Emma: 6500,
  Michael: 7000,
  Sophia: 5500
};

const salariesArr = Object.keys(salariesObj).map(name => ({
  name,
  salary: salariesObj[name]
}));

console.log(salariesArr);

In this case, Object.keys() returns an array of the object’s own enumerable property names. We use map() to iterate over each name and create a new object with the name property and the corresponding salary value from the original object.

The output will be the same as the previous example:

[
  { name: 'John', salary: 5000 },
  { name: 'Emma', salary: 6500 },
  { name: 'Michael', salary: 7000 },
  { name: 'Sophia', salary: 5500 }
]

Read How to Get the Last Element of an Array in TypeScript?

Handle Complex Objects

In some cases, you may encounter more complex objects that contain nested properties or additional data. Let’s consider an example where each employee object has a name, salary, and department property:

const employeesObj = {
  John: {
    salary: 5000,
    department: 'IT'
  },
  Emma: {
    salary: 6500,
    department: 'HR'
  },
  Michael: {
    salary: 7000,
    department: 'Finance'
  },
  Sophia: {
    salary: 5500,
    department: 'Marketing'
  }
};

To convert this object to an array, you can use either of the previous methods and adjust the mapping function accordingly:

const employeesArr = Object.entries(employeesObj).map(([name, employee]) => ({
  name,
  ...employee
}));

console.log(employeesArr);

In this example, we use the spread operator (...) to spread the properties of each employee object into the resulting array element.

Output:

[
  { name: 'John', salary: 5000, department: 'IT' },
  { name: 'Emma', salary: 6500, department: 'HR' },
  { name: 'Michael', salary: 7000, department: 'Finance' },
  { name: 'Sophia', salary: 5500, department: 'Marketing' }
]

Here is the exact output in the screenshot below:

Read How to Get the First Element of an Array in TypeScript?

Typing the Array

When working with TypeScript, it’s important to properly type your arrays to ensure type safety and enable better code completion and error detection. You can define an interface or type for the array elements based on the structure of your object.

For example, let’s define an interface for the employee objects:

interface Employee {
  name: string;
  salary: number;
  department: string;
}

const employeesObj: Record<string, Employee> = {
  // ...
};

const employeesArr: Employee[] = Object.entries(employeesObj).map(([name, employee]) => ({
  name,
  ...employee
}));

By defining the Employee interface and specifying the types for employeesObj and employeesArr, you ensure that the resulting array adheres to the expected structure.

Performance Considerations

When dealing with large objects, performance can be a concern. The methods we discussed, such as Object.entries(), Object.keys(), and map(), have a time complexity of O(n), where n is the number of properties in the object.

Suppose performance is critical, and you need to convert objects to arrays frequently. In that case, you can consider alternative approaches like using a for…in loop or a custom function that directly pushes the object properties into an array.

Conclusion

In this tutorial, I explained how to convert an object to an array in Typescript using different methods with examples.

Here, I have shown two main methods: using Object.entries() with map() and using Object.keys() with map(). We also discussed how to handle complex objects and properly type the resulting arrays.