Convert an Object to JavaScript Array

In JavaScript, an object can be converted into an array of key-value pairs using built-in methods and loops.

• Object.entries() directly returns key-value pairs as an array.
• Object.keys() with map() can create key-value pairs.
• for...in and other object methods provide alternative approaches.

Approach 1: Using Object.entries()

The simplest approach is to use the Object.entries() method, which directly returns an array containing the object's own enumerable key-value pairs.

let obj = {
    a: 1,
    b: 2,
    c: 3
};

// Convert object into an array of key-value pairs
let result = Object.entries(obj);

console.log(result);

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

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

The idea is to use Object.keys() to retrieve all the keys of the object. We then use map() to create an array containing each key and its corresponding value.

let obj = {
    a: 1,
    b: 2,
    c: 3
};

// Get all keys and create key-value pairs
let result = Object.keys(obj).map(key => [
    key,
    obj[key]
]);

console.log(result);

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

Approach 3: Using for...in Loop

The idea is to iterate over the object's properties using a for...in loop. For each own property, we add its key and value as an array to the result.

let obj = {
    a: 1,
    b: 2,
    c: 3
};

let result = [];

for (let key in obj) {

    // Check for own properties
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
        result.push([key, obj[key]]);
    }
}

console.log(result);

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

Approach 4: Using Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method returns an array containing all own property names of an object. We can use map() to combine each property name with its corresponding value.

let obj = {
    a: 1,
    b: 2,
    c: 3
};

// Get all own property names
let keys = Object.getOwnPropertyNames(obj);

// Create key-value pairs
let result = keys.map(key => [
    key,
    obj[key]
]);

console.log(result);

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

Note: Object.getOwnPropertyNames() can include non-enumerable properties, while Object.keys() returns only enumerable own properties.

Approach 5: Using Object.keys() and Object.values()

The idea is to retrieve the object's keys and values separately using Object.keys() and Object.values(). The map() method then combines the corresponding key and value at each index.

let obj = {
    a: 1,
    b: 2,
    c: 3
};

// Get keys and values separately
let keys = Object.keys(obj);
let values = Object.values(obj);

// Combine keys and values
let result = keys.map((key, index) => [
    key,
    values[index]
]);

console.log(result);

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

Note: Although this approach works, Object.entries() is more direct because it returns the key-value pairs in a single operation.