How can I form an object with 2 array efficiently

Question

I have 2 arrays

const x = [0, 1, 2, 3, 4, 5]
const y = [6, 7, 8, 9, 10, 11]

I'm trying to combine the two array into an array of objects such that it becomes:

[{x: 0, y: 6}, {x: 1, y: 7}, {x: 2, y: 8}, {x: 3, y: 9}, {x: 4, y: 10}, {x: 5, y: 11}]

Currently what I did was to loop the length of one of the arrays then push the object to the new array.

let newArray = []
for(i = 0; i < x.length; i++) {
   newArray.push({x: x[i], y: y[i]})
}

Just wondering if there is a more efficient way to do this, thanks!

Does this answer your question? [Creating a JavaScript Object from two arrays](https://stackoverflow.com/questions/39127989/creating-a-javascript-object-from-two-arrays) — gorak, Mar 01 '21 at 14:07
Maybe use loadsh [`zipWith`](https://lodash.com/docs#zipWith) ? — Kunal Mukherjee, Mar 01 '21 at 14:08
From complexity perspective - no. `O(n)` is the best you can do, since you still need to iterate through the arrays. In terms of execution speed - not very likely. See [Which is faster?](https://ericlippert.com/2012/12/17/performance-rant/). The main problem is that there is no *generic* answer to this question, it depends on your use case, your data and more. But also, many times the difference doesn't actually matter. Shaving off, say, 1ms is not going to make your application extremely faster if this code is not a bottleneck. — VLAZ, Mar 01 '21 at 14:09

Sifat Haque · Answer 1 · 2021-03-01T14:14:25.073

1

You can use map to do the same thing.

const x = [0, 1, 2, 3, 4, 5]
const y = [6, 7, 8, 9, 10, 11]

const newArray = x.map((number, index) => ({x: number, y: y[index]}));

console.log(newArray)

And here is the same thing using 'reducer'

const x = [0, 1, 2, 3, 4, 5]
const y = [6, 7, 8, 9, 10, 11]


const newArray = x.reduce((arr, n, index) => {
  arr.push({x: n, y: y[index]});
  return arr;
}, [])

console.log(newArray)

edited Mar 01 '21 at 14:14

answered Mar 01 '21 at 14:09

Sifat Haque

5,357
1
16
23

Is this "more efficient"? – VLAZ Mar 01 '21 at 14:10
1

Nope, simple loop is always faster as far as i know. – Sifat Haque Mar 01 '21 at 14:13

score 1 · Answer 2 · answered Mar 01 '21 at 14:09

You could go over an object and get the entries for having an array of objects.

This approach works as well for more arrays.

const
    x = [0, 1, 2, 3, 4, 5],
    y = [6, 7, 8, 9, 10, 11],
    result = Object
        .entries({ x, y })
        .reduce((r, [k, a]) => a.map((v, i) => ({ ... r[i], [k]: v })), []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Majed Badawi · Accepted Answer · 2021-03-01T14:18:37.437

Your solution is good. Another way using .map:

const getCoordinates = (xCoordinates=[], yCoordinates=[]) =>
   xCoordinates.map((x,index) => ({x, y:yCoordinates[index]}));

console.log( getCoordinates([0, 1, 2, 3, 4, 5], [6, 7, 8, 9, 10, 11]) );

Another way using for-loop (to handle different list sizes):

const getCoordinates = (xCoordinates=[], yCoordinates=[]) => {
  const coordinates = [];
  for(let i = 0, j = 0; i < xCoordinates.length && j < yCoordinates.length; i++, j++)
    coordinates.push({x:xCoordinates[i], y:yCoordinates[i]});
  return coordinates;
}

console.log( getCoordinates([0, 1, 2, 3, 4, 5], [6, 7, 8, 9, 10, 11]) );

How can I form an object with 2 array efficiently

3 Answers3