Introduction
Information buildings in JavaScript are sometimes very composable. This implies which you could take a knowledge construction and rework it into a special information construction comparatively simple. That is useful when it’s essential to rework information right into a format that’s extra helpful on your utility.
On this article, we’ll be taking a look at methods to convert an array to an object with JavaScript.
Why Convert Arrays to Objects?
Objects in JavaScript present a structured strategy to retailer information with key-value pairs. This construction will be useful after we wish to entry information utilizing particular keys, moderately than counting on indices as we do with arrays. As an example, if we now have an inventory of customers with their respective properties, it is far more intuitive to entry a person’s age with person.age than with person[3].
Utilizing the Object.assign() Methodology
One of the vital apparent methods to transform an array to an object is through the use of the Object.assign() technique. This technique 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() technique took our array and reworked it into an object, the place the indices of the array turned the keys of the item.
Word: The Object.assign() technique doesn’t deep copy properties of the enter object. Which means in case your array comprises objects and also you modify these after utilizing Object.assign(), the adjustments will probably be mirrored within the new object as nicely.
Utilizing the Array.scale back() Methodology
One other technique for changing an array to an object is the Array.scale back() technique. This is applicable a perform in opposition to an accumulator and every component within the array (from left to proper) to scale back it to a single output worth.
This is how you need to use 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 price of the present merchandise.
The benefit of the Array.scale back() technique is that it offers 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
One of the vital elegant and trendy (i.e. ES6) methods to transform an array to an object in JavaScript is through the use of the unfold operator (...). Launched in ES6, the unfold operator lets us increase iterable parts like arrays into particular person parts.
This is how you need to use 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 could be a bit complicated, particularly for novice programmers. Fortunate for us, JavaScript gives us with some good instruments to deal with them. For instance we now have 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 component of every pair is the important thing and the second component 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:
{ title: 'John', age: 30, metropolis: 'New York' }
The Object.fromEntries() technique transforms an inventory of key-value pairs into an object, which is ideal for our use case. The information within the multidimensional array is now a lot simpler to entry.
Changing Arrays with Non-numeric Indices
Word: JavaScript arrays are technically objects, the place indices are properties that may be strings. Nonetheless, after we discuss arrays in a traditional sense, we normally consider them as lists with numeric indices.
So, how will we convert an array with non-numeric indices to an object? Effectively, in JavaScript, it is already an object! But when we wish to convert it right into a extra customary object format, we will use the Object.assign() technique.
Think about 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:
{ title: 'John', age: 30, metropolis: 'New York' }
In case you are curious, what does the array variable appear to be 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 really being objects, it will 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 alternative 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 methods to take care of multidimensional arrays and deal with arrays with non-numeric indices.
