Introduction
Knowledge constructions in JavaScript are sometimes very composable. This implies you could take an information construction and rework it into a unique knowledge construction comparatively straightforward. That is useful when it’s good to rework knowledge right into a format that’s extra helpful on your utility.
On this article, we’ll be taking a look at the best way to convert an array to an object with JavaScript.
Why Convert Arrays to Objects?
Objects in JavaScript present a structured method to retailer knowledge with key-value pairs. This construction could be useful after we wish to entry knowledge utilizing particular keys, somewhat than counting on indices as we do with arrays. As an example, if we’ve got a listing of customers with their respective properties, it is way more intuitive to entry a consumer’s age with consumer.age than with consumer[3].
Utilizing the Object.assign() Methodology
Some of the apparent methods to transform an array to an object is by utilizing the Object.assign() methodology. This methodology copies all enumerable personal properties from a number of supply objects to a goal object and returns the goal object.
This is a easy instance:
let array = ['apple', 'banana', 'cherry'];
let object = Object.assign({}, array);
console.log(object);
The output will probably be:
{ '0': 'apple', '1': 'banana', '2': 'cherry' }
As you’ll be able to see, the Object.assign() methodology took our array and remodeled it into an object, the place the indices of the array turned the keys of the item.
Notice: The Object.assign() methodology doesn’t deep copy properties of the enter object. Because of this in case your array comprises objects and also you modify these after utilizing Object.assign(), the modifications will probably be mirrored within the new object as nicely.
Utilizing the Array.scale back() Methodology
One other methodology for changing an array to an object is the Array.scale back() methodology. This is applicable a operate towards an accumulator and every factor within the array (from left to proper) to scale back it to a single output worth.
This is how you should utilize it:
let array = ['apple', 'banana', 'cherry'];
let object = array.scale back((obj, merchandise, index) => {
obj[index] = merchandise;
return obj;
}, {});
console.log(object);
The output would be the similar because the earlier instance:
{ '0': 'apple', '1': 'banana', '2': 'cherry' }
On this instance, we’re utilizing Array.scale back() to create a brand new object (obj), and for every merchandise within the array, we’re including a brand new property to obj with a key of the present index and a worth of the present merchandise.
The benefit of the Array.scale back() methodology is that it provides us extra flexibility. We are able to simply modify the code to make use of the array gadgets as keys and the indices as values, or to remodel the info in different methods.
Utilizing the Unfold Operator
Some of the elegant and fashionable (i.e. ES6) methods to transform an array to an object in JavaScript is by utilizing the unfold operator (...). Launched in ES6, the unfold operator lets us broaden iterable parts like arrays into particular person parts.
This is how you should utilize the unfold operator to transform an array to an object:
const array = ['apple', 'banana', 'cherry'];
const object = { ...array };
console.log(object);
The output of the above code will probably be:
{ '0': 'apple', '1': 'banana', '2': 'cherry' }
As you’ll be able to see, the array indices develop into the keys of the item, and the array parts develop into the corresponding values.
Changing Multidimensional Arrays
Coping with multidimensional arrays generally is a bit complicated, particularly for novice programmers. Fortunate for us, JavaScript supplies us with some good instruments to deal with them. As an example we’ve got a 2D array the place every sub-array comprises a pair of values. We are able to convert this to an object the place the primary factor of every pair is the important thing and the second factor is the worth:
const array = [['name', 'John'], ['age', 30], ['city', 'New York']];
const object = Object.fromEntries(array);
console.log(object);
The output will then be:
{ identify: 'John', age: 30, metropolis: 'New York' }
The Object.fromEntries() methodology transforms a listing of key-value pairs into an object, which is ideal for our use case. The info within the multidimensional array is now a lot simpler to entry.
Changing Arrays with Non-numeric Indices
Notice: JavaScript arrays are technically objects, the place indices are properties that may be strings. Nevertheless, after we discuss arrays in a traditional sense, we normally consider them as lists with numeric indices.
So, how can we convert an array with non-numeric indices to an object? Nicely, in JavaScript, it is already an object! But when we wish to convert it right into a extra customary object format, we are able to use the Object.assign() methodology.
Contemplate the next:
const array = [];
array['name'] = 'John';
array['age'] = 30;
array['city'] = 'New York';
const object = Object.assign({}, array);
console.log(object);
The output will probably be:
{ identify: 'John', age: 30, metropolis: 'New York' }
In case you are curious, what does the array variable appear like after assigning values to non-numeric indices? This may be fairly unintuitive, however as soon as you’ll be able to wrap your head round arrays truly being objects, it may possibly make extra sense.
const array = [];
array['name'] = 'John';
array['age'] = 30;
array['city'] = 'New York';
console.log(object);
[ name: 'John', age: 30, city: 'New York' ]
Conclusion
On this Byte, we have seen the other ways to transform an array to an object in JavaScript, together with utilizing Object.assign(), Array.scale back(), and the unfold operator. We additionally confirmed the best way to cope with multidimensional arrays and deal with arrays with non-numeric indices.
