How to convert an object to an array in JavaScript

Converting an object to an array can be useful in various situations, such as using array methods like sort(), filter(), map(), reduce() on their keys or values.

There are several ways to convert an object to an array in JavaScript, depending on what kind of array you want to get. Here are some common methods:

1. Using Object.keys(obj), which returns an array of strings representing the keys of the object.

const person = { firstName: 'John', lastName: 'Doe' };
const propertyNames = Object.keys(person);
console.log(propertyNames); // ['firstName', 'lastName']

2. Using Object.values(obj), which returns an array of the values of the object.

const person = { firstName: 'John', lastName: 'Doe' };
const propertyValues = Object.values(person);
console.log(propertyValues); // ['John', 'Doe']

3. Using Object.entries(obj), which returns an array of arrays, each containing a key and a value of the object.

const person = { firstName: 'John', lastName: 'Doe' };
const entries = Object.entries(person);
console.log(entries); // [['firstName', 'John'], ['lastName', 'Doe']]

4. Using Object.getOwnPropertyNames() or Object.getOwnPropertySymbols(), which returns an array of the object’s own property names or symbols, including non-enumerable ones.

var obj = {
  name: "Alice",
  age: 25,
  occupation: "programmer",
  [Symbol("id")]: 123
};

// Get all property names, including non-enumerable ones
var names = Object.getOwnPropertyNames(obj);
console.log(names); // [ 'name', 'age', 'occupation' ]

// Get all property symbols
var symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // [ Symbol(id) ]

5. Using Reflect.ownKeys(), which returns an array of the object’s own property keys, including both string and symbol keys.

var obj = {
  name: "Alice",
  age: 25,
  occupation: "programmer",
  [Symbol("id")]: 123
};

// Get all property keys, including symbols
var keys = Reflect.ownKeys(obj);
console.log(keys); // [ 'name', 'age', 'occupation', Symbol(id) ]

Using for…in or Object.keys

The difference between for...in and Object.keys is that for...in iterates over all enumerable string properties of an object, including inherited ones, while Object.keys returns an array of only the object’s own enumerable string properties.

Here is a simple object that inherits some properties from another object:

var animal = {
  type: "mammal",
  legs: 4
};

var dog = Object.create(animal);
dog.name = "Spot";
dog.bark = function() {
  console.log("Woof!");
};

If you use for...in to iterate over the dog object, you will get the following output:

for (var prop in dog) {
  console.log(prop);
}

// name
// bark
// type
// legs

As you can see, for…in loops over both the own and inherited properties of the dog object, including the type and legs properties that come from the animal object.

If you use Object.keys to get the keys of the dog object, you will get the following output:

var keys = Object.keys(dog);
console.log(keys);

// Output:
// ["name", "bark"]

As you can see, Object.keys only returns an array of the own properties of the dog object, excluding the inherited ones.

If you only want to iterate over the own properties of the object, and not the inherited ones, you can use the hasOwnProperty() method to check if the property belongs to the object itself.

for (var prop in dog) {
  if (dog.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

// name
// bark

This will print the same as the previous example, but if the person object inherits some properties from another object, they will be skipped.

Using Object.keys or Reflect.ownKeys

Both methods operate on own properties only, and not inherited ones.

The difference between Object.keys and Reflect.ownKeys is that Object.keys returns an array of only the object’s own enumerable string properties, while Reflect.ownKeys returns an array of all the object’s own property keys, including both string and symbol keys, regardless of their enumerability. .

For example, if you have an object like this:

var obj = {
  name: "Alice",
  age: 25,
  [Symbol("id")]: 123
};

Object.keys(obj) will return ["name", "age"], while Reflect.ownKeys(obj) will return ["name", "age", Symbol(id)].

Another difference is that Object.keys returns an empty array if the argument is not an object and not null or undefined (e.g. Object.keys(1)), whereas Reflect.ownKeys throws a TypeError in that case.