I have two arrays like this:

const a = ['a', 'b', 'c', 'd'];
const b = ['1', '2', '3', '4'];

I'm trying to make a new array like this:

const c = ['a1', 'b2', 'c3', 'd4'];

I tried it this way:

const c = [];
c.push([`${a[0]}${b[0]}`, `${a[1]}${b[1]}`, `${a[2]}${b[2]}`, `${a[3]}${b[3]}`]);

With actually looping through data and doing this took 17400ms.

I took out the c.push([........]); and it dropped to 1250ms.

Why does this take so long to do?

And what is the best way to do this?

I have two arrays like this:

const a = ['a', 'b', 'c', 'd'];
const b = ['1', '2', '3', '4'];

I'm trying to make a new array like this:

const c = ['a1', 'b2', 'c3', 'd4'];

I tried it this way:

const c = [];
c.push([`${a[0]}${b[0]}`, `${a[1]}${b[1]}`, `${a[2]}${b[2]}`, `${a[3]}${b[3]}`]);

With actually looping through data and doing this took 17400ms.

I took out the c.push([........]); and it dropped to 1250ms.

Why does this take so long to do?

And what is the best way to do this?

• javascript
• arrays

Share Improve this question Follow asked Aug 27, 2016 at 3:49 cocacravecocacrave 2,63355 gold badges2222 silver badges3131 bronze badges 5

• 1 17400ms for 4 elements? – Ram Commented Aug 27, 2016 at 3:52
• It looks through an Object.keys(obj).map() and the obj has ~20k keys. – cocacrave Commented Aug 27, 2016 at 3:54
• It seems you are doing lots of push, I would preallocate instead. And I would avoid template strings, here they are not useful at all and it wouldn't surprise me that they are less optimized because are so recent and used less frequently. – Oriol Commented Aug 27, 2016 at 4:07
• So you are not using template strings as one sane person won't use that syntax for 20k elements! – Ram Commented Aug 27, 2016 at 4:08
• So, I played around with it and found out the Array.push() is the problem for taking so long. @Oriol What do you mean by preallocate? I tried google but couldn't find what it was. – cocacrave Commented Aug 27, 2016 at 4:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

you can use .map to achieve that. map a, then use index on each loop to get element of b.

const a = ['a', 'b', 'c', 'd'];
const b = ['1', '2', '3', '4'];

var c = a.map(function (d, i) {
    return d + String(b[i])
})

console.log(c)
// ["a1", "b2", "c3", "d4"]

cleaner code using es6:

var c = a.map((d, i) => `${d}${b[i]}`)

A simple loop.

const a = ['a', 'b', 'c', 'd', 'e'];
const b = ['1', '2', '3'];
var result = [];

for (var i = 0; i < a.length; i++) {
  result[i] = a[i] + b[i];
}

alert(result);

As I suspected and you confirmed, the real problem is that you do too many push.

push modifies the length of the array. The specification does not enforce any data structure for arrays, but for non-sparse ones, implementations usually use lists which store the values consecutively in memory. That's problematic when you change the length of the array, because the additional data could not fit in the place in memory where the data currently is, so all data must be moved. push ends up being constant in amortized time instead of just constant.

However, if you know the length of the resulting array beforehand, it's usually better to preallocate.

Then, instead of

var array = [];
for(var i=0; i<2e4; ++i)
  array.push([a[0]+b[0], a[1]+b[1], a[2]+b[2], a[3]+b[3]]);

I would use

var array = new Array(2e4);
for(var i=0; i<2e4; ++i)
  array[i] = [a[0]+b[0], a[1]+b[1], a[2]+b[2], a[3]+b[3]];