Working on Eloquent Javascript chapter on high order functions, I came accross this example:

function reduce(array, bine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++)
    current = bine(current, array[i]);
  return current;
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
  return a + b;
}, 0));
// → 10

which when the for loop is re-written to include, what I thought were optional, curly braces, like:

function reduce(array, bine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = bine(current, array[i]);
    return current;
  }
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
  return a + b;
}, 0));
// → 1

the result is just 1 instead of the expected 10. What are the braces doing here to change the output?

Working on Eloquent Javascript chapter on high order functions, I came accross this example:

function reduce(array, bine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++)
    current = bine(current, array[i]);
  return current;
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
  return a + b;
}, 0));
// → 10

which when the for loop is re-written to include, what I thought were optional, curly braces, like:

function reduce(array, bine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = bine(current, array[i]);
    return current;
  }
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
  return a + b;
}, 0));
// → 1

the result is just 1 instead of the expected 10. What are the braces doing here to change the output?

• javascript
• for-loop

• 1 The braces put the return current; run within the loop body, so on the first iteration, you exit the function. Without the braces, the return current; is after the loop body. – T.J. Crowder Commented Mar 5, 2017 at 15:27

3 Answers 3

The curly braces are doing just as you asked of them: because you included the return statement in the for loop:

function reduce(array, bine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = bine(current, array[i]);
    return current;
  }
}

the loop stops short of what was intended because the return exits the loop, actually function when a value is returned, and so only the value of the array's first element: 1 gets folded to var current and outputs 1. Whereas:

function reduce(array, bine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = bine(current, array[i]);
  }
  return current;
}

returns the expected output: 10 because the for folds all array elements before returning a value.

You need to move the return statement outside of the block for the for loop, because the return statement ends the function and the loop immediately.

for (var i = 0; i < array.length; i++) {
    current = bine(current, array[i]);
}
return current;

function reduce(array, bine, start) {
    var current = start;
    for (var i = 0; i < array.length; i++) {
        current = bine(current, array[i]);
    }
    return current;
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
    return a + b;
}, 0));

This code runs the loop once and returns right after the first cycle:

for (var i = 0; i < array.length; i++) {
    current = bine(current, array[i]);
    return current;
}

Here we return after loop finishes cycling:

for (var i = 0; i < array.length; i++)
    current = bine(current, array[i]);
return current;