Can two loops be merged into one?

Question

I'm using the following function to add specific numbers into an array that I later want to be assigned to a variable. For this I'm using two for loops, but I feel like there is a more succinct way to do it. I tried merging the two loops in one without getting an error, but the output is not the same.

Working Example:

function fill () {
    var array = [];
    for (var index = 0; index < arguments.length; index++) {
        for (var number = arguments[index][0]; number <= arguments[index][1]; number++)
            array.push(number);
    }
    return array;
};

/* Use */
var keys = fill([1, 10], [32, 34]);

/* Output */
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 32, 33, 34]

---

Merged Example:

function fill () {
    var array = [];
    for (var index = 0, number = arguments[index][0];
      index < arguments.length && number <= arguments[index][1];
      index++ && number++) {
        array.push(number);
    }
    return array;
};

/* Use */
var keys = fill([1, 10], [32, 34]);

/* Output */
[1, 1]

Is it possible to actually merge the two loops into one? If not, is there a way to write the foregoing function in less code?

Answer 1

Your code in the first example is fine. There is no real "clean" way to remove the nested loops.

You could iterate over them with forEach, but then you'd still have nested loops, even if one of them is disguised as a function call:

function fill () {
    var array = [];
    Array.prototype.slice.apply(arguments) // Make an array out of arguments.
        .forEach(function(arg){
            for (var number = arg[0]; number <= arg[1]; number++){
                array.push(number);
            }
        });
    return array;
};

console.log(fill([1, 10], [32, 34]));

And you'd have to use Array.prototype.slice.apply to convert arguments to an actual array. (which is ugly)

So, basically, nested loops aren't necessarily "evil". Your first example is as good as it gets.

Answer 2

JavaScript is a functional language. For the sake of modern coding purposes a functional approach is best for the coder's benefit.

var fillArray = (...args) => args.reduce((res,arg) => res.concat(Array(...Array(arg[1]-arg[0]+1)).map((e,i) => i + arg[0])),[]),
       filled = fillArray([1, 10], [32, 34]);
console.log(filled);

OK what happens here.. It's very simple. We do the job by fillArray function. fillArray function takes indefinite number of arguments. So we collect them all in an array called args by utilizing the ES6 rest operator ....

var fillArray = (...args)

Now that we have our source arrays in the args array we will apply a reduce operation to this array with an initial value of an empty array (res). What we will do is.. as per each source (arg) array we will create a new array and then we will concatenate this to the res array. Ok we receive [1,10] as source which means we need an array of length arg[1]-arg[0]+1 right. So comes

Array(...Array(arg[1]-arg[0]+1))

we could also do like Array(arg[1]-arg[0]+1).fill() same thing. We now have an array filled with "undefinite" in the needed length. Then comes map. This is really very simple as we apply to this undefinites array like

.map((e,i) => i + arg[0]))

which means each item will be the current index + offset which is the arg[0] Then we concatenate this array to our results array and pass to the next source array. So you see it is very straight forward and maintainable.

Answer 3

You might not be able to escape the two loops, but that shouldn't necessarily be a goal either. The loop themselves aren't really harmful – it's only if you're iterating over the same data multiple times that you might want to reconsider your code

Consider this entirely different approach

const range = (x , y) =>
  x > y
    ? []
    : [ x, ...range (x + 1, y) ]

const concat = (xs, ys) =>
  xs .concat (ys);

const flatMap = (f, xs) =>
  xs .reduce ((acc, x) => concat (acc, f (x)), [])

const apply = f => xs =>
  f (...xs)

const fill = (...ranges) =>
  flatMap (apply (range), ranges);

console.log
  (fill ( [1,10]
        , [32,34]
        , [40,49]
        , [100,100]
        )
  )

So yes, @Redu is on the right track with "JavaScript is a functional language", but I think his/her answer falls short of delivering a well-composed functional answer.

The answer above shows how functions with individualized concerns can be easy to read, easy to write, and easy to combine to achieve complex computations.

Answer 4

In ES6, you could use the rest operator and build a new array, based on the items.

function fill(...p) {
    return p.reduce((r, a) => r.concat(Array.apply(null, { length: a[1] - a[0] + 1 }).map(() => a[0]++)), []);
};

var keys = fill([1, 10], [32, 34]);
console.log(keys);

Answer 5

Similar to another answer, but a little more complete:

const arrays = [[1,10],[32,34],[9,12]]
const range = (a,b) => a >= b ? [] :
    [...Array(b-a).keys()].map(i => i+a)
const result = arrays.reduce( (a,c) =>
     a.concat( range(c[0], c[1]+1) ), [] )

// =>   [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 32, 33, 34, 9, 10, 11, 12 ]

If you prefer a more traditional range function, then:

const arrays = [[1,10],[32,34],[9,12]]

function range(a,b) {
    var arr = []
    for (let i = a; i < b; i++)
        arr.push(i)
    return arr
}

const result = arrays.reduce( function(a,c) {
    return a.concat( range(c[0], c[1]+1) )
}, [] )

Answer 6

After almost 2 years and some great answers that were posted to this thread proposing interesting alternatives, I found a way to merge the two loops into one, but it ain't pretty!

Code:

function fill () {
    var
      ar = [],
      imax = arguments.length,
      
      /* The functions that calculate the bounds of j. */
      jmin = i => arguments[i][0],
      jmax = i => arguments[i][1] + 1;
    
    for (
      let i = 0, j = jmin(i);
      i < imax && j < jmax(i);
      
      /* If j reaches max increment i and if i is less than max set j to min. */
      ar.push(j++), (j == jmax(i)) && (i++, (i < imax) && (j = jmin(i)))
    );
    return ar;
};

/* Use */
var keys = fill([1, 10], [32, 34], [76, 79]);
console.log.apply(console, keys);