I'm trying to make the "merge function" work by writing a Callback.

Question

I think my understanding of callbacks is pretty green. But this is what have so far and my function is only adding the first index in each array together.

var merge = function(array1, array2, callback){  
  for (var i = 0; i < array1.length; i++) {
   return array1[i] + array2[i];
  };
  callback(array1[i] + array2[i]);
};

var x = merge([1, 2, 3, 4], [5, 6, 7, 8], function(a, b){  
  return a + b;
});
console.log(x);

Answer 1

You are returning too early, the first iteration through the loop is going to end the function call.

It looks like you want to use a callback to do the merge work, much like you would with .filter, .sort of Array. If that is the case, you do either the work in the merge function or in the callback not both.

Meaning you either do array1[i]+array2[i] in the merge function adding each to a new array, or pass the arguments to the callback and put each result from the callback into the new array.

var merge = function(array1, array2, callback){  
  //test to make sure arrays are same length
  if(array1.length != array2.length){
     throw new Error('Arrays are of different lengths'); 
  }
  var out = [];
  for (var i = 0; i < array1.length; i++) {
    if(callback){
      out.push( callback(array1[i],array2[i]) );
    } else {
      out.push( array1[i] + array2[i] );
    }
  }
  return out;
};

var x = merge([1, 2, 3, 4], [5, 6, 7, 8], function(a, b){  
  return a + b;
});
var x2 = merge([1, 2, 3, 4], [5, 6, 7, 8]);

document.body.innerHTML = x.toString();
document.body.innerHTML += '<br>'+x2.toString();

//will cause the error to be thrown
var x2 = merge([1, 2, 3, 4], [6, 7, 8]);

Answer 2

Your return statement is the reason why your function is returning the sum of just the first indices of each array. It terminates the function call and never reaches your callbacks call. This should help you get it to work. Note: there are a thousand ways to achieve what you're trying to do here.

var merge = function(array1, array2, callback){ 
  var sum=0; 
  for (var i = 0; i < array1.length; i++) { 
    sum = sum + callback(array1[i],array2[i]); 
  } 
  return sum;
}; 
var x = merge([1, 2, 3, 4], [5, 6, 7, 8], 
           function(a, b){ return a + b; }); 
console.log(x);

Answer 3

When you use a callback, the flow of your code is now through the callbacks not return and variable assignment. I see a mixture of usage in your code and it isn't clear to me what your code is trying to do. The return inside of the for loop will terminate the merge function before the callback is called.

I might adapt your code to this:

var merge = function(array1, array2, callback){  
  var result = [];
  for (var i = 0; i < array1.length; i++) {
   result[i] = array1[i] + array2[i];
  };
  callback(result);
};

var x = merge([1, 2, 3, 4], [5, 6, 7, 8], function(merged) {
    console.log(merged);
});

That would log this result to console:

[6, 8, 10, 12]

To go further, I would also use the Math.max(array1.length, array2.length) in the for loop to ensure that the result array was as long as the longest input array. There is a little more complication there but I wanted to point out a potential issue with that.