4

I would like to add the values of two JavaScript arrays that have the same length to get a third array so that the the first value of the third array is the sum of the first values of the two first arrays, the second value of the third array is the sum of the second values of the two first arrays, etc. For example:

var array1 = [1,2,3];
var array2 = [4,1,0];
var array3 = array1 + array2;

I would like the result of array3 to be [1+4, 2+1, 3+0] = [5,3,3].

This is not the same question as this. I would like to add the numbers and not make sub-arrays.

I know that you can do for(i = 0; i < array1.length; i++){array3[i] = array1[i] + array2[i]} but I would like to know if there is a built-in code that does this.

Community
  • 1
  • 1
Donald Duck
  • 8,409
  • 22
  • 75
  • 99
  • 1
    `array1.map((e, i) => e + array2[i])` – Tushar Jun 02 '16 at 12:32
  • Possible duplicate of [Javascript equivalent of Python's zip function](http://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function) – Rhumborl Jun 02 '16 at 12:34
  • @Rhumborl I would like to add the numbers and not make sub-arrays. – Donald Duck Jun 02 '16 at 12:44
  • Why do you consider the `for` loop a workaround? It's just a bit of code that does what you want. The answer to your question, is **no**, there is no "built-in code that does this". –  Jun 02 '16 at 12:59

3 Answers3

9

Use Array#map() method

var array1 = [1, 2, 3];
var array2 = [4, 1, 0];
var array3 = array1.map(function(v, i) {
  return v + array2[i];
})

console.log(array3);

For latest browser use it with ES6 arrow function

var array1 = [1, 2, 3];
var array2 = [4, 1, 0];
var array3 = array1.map((v, i) => v + array2[i])

console.log(array3);

For older browser check polyfill option of map method.

Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
  • Bear in mind, @Tushar, that some clients don't yet support ES2015's Arrow Function syntax. – David Thomas Jun 02 '16 at 12:33
  • It is beautiful, @Tushar (and my go-to when I can use it), but not all that widely supported outside of pretty much the latest browser releases. Sadly... :) – David Thomas Jun 02 '16 at 12:34
  • 1
    @Tushar, maybe don't spam answers as comments? If you like that answer so much, just provide your own answer. – Mulan Jun 02 '16 at 12:38
  • 1
    @naomik I don't think that's _spam_, if you think so flag it. – Tushar Jun 02 '16 at 12:38
  • @Tushar, you had it pasted in two places. How about instead of me reprimanding a 55k user, you just don't do that anymore? – Mulan Jun 02 '16 at 12:39
  • Is there a way to make this compatible with IE8? – Donald Duck Jun 02 '16 at 12:40
  • @naomik yes, removed that. :) – Tushar Jun 02 '16 at 12:40
  • @DonaldDuck you can transpile ES6 using babel. – Mulan Jun 02 '16 at 12:41
  • @DonaldDuck Or you can use [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill) – Tushar Jun 02 '16 at 12:41
  • 2
    The question was *I would like to know if there is a built-in code that does this*, but this answer merely provides a different roll-your-own solution instead of giving the correct answer, which is NO. if you are going to propose an alternative solution, then at least provide the pros and cons vis-a-vis the solution the OP gave. –  Jun 02 '16 at 13:02
3

You should use generators.

function *addPairwise(a1, a2) {
  let i1 = a1[Symbol.iterator](), i2 = a2[Symbol.iterator](), x1, x2;

  while (1) {
    x1 = i1.next();
    x2 = i2.next();
    if (x1.done && x2.done) return;
    yield x1.done ? x2.value : x2.done ? x1.value : x1.value + x2.value;
  }
}

Normally we would prefer to simply do a for...of loop over an iterable, but there's no way to do that in parallel over two iterables, so we need to get the iterators so we can use the next method on them.

This approach will allow you to do pairwise addition of any iterable including infinite streams.

console.log([...addPairwise([1,2,3], [4,1,0])]);

If you prefer you could define addPairwise to take iterators directly and call it as

addPairwise([1, 2, 3].values(), [4, 1, 0].values())

This assumes suitable support for ES6 such as node v6, Chrome 51, or babel.

-1

var array1 = [1,2,3];
var array2 = [4,1,0];

var array3 = add(array1, array2);
console.log(array3);

function add(arr1, arr2) {
  return arr1.map(function(value, index) {
    return value + arr2[index];
  });
}

For IE8 support:

var array1 = [1,2,3];
var array2 = [4,1,0];

var array3 = add(array1, array2);
console.log(array3);

function add(arr1, arr2) {
  var newArray = [];
  
  for(var i = 0; i < arr1.length; i++){
    newArray.push(arr1[i] + arr2[i]);
  }
  
  return newArray;
}
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
  • It is quite stupid that in this day and age we are worrying about supporting IE8, when even MS itself does not. It's global usage is at less than 1%. If we are going to worry about IE8, why not also worry about IE7 and IE6? Or, why not at least propose using Underscore's `_.map`? –  Jun 02 '16 at 13:06
  • @torazaburo OP asked about IE8 support in his comment on Pranav's answer. – Mohammad Usman Jun 02 '16 at 13:07