JavaScript Iteration In my current project I have objects of the following structure:

CanvasBundle - Object


Some elements...
gridCanvas
axesCanvas
functions[] (contains unknown number of functionCanvases)
overlayCanvas


I'd like to write an iterator which would iterative over all the canvases (grid/axes/func/func1/func2/.../overlay).

I've currently implemented it like this:

function makeCanvasBundleIterator(canvasBundle) {
  var nextIndex = 0;
  var functionIndex = 0;

  return {
    next: function() {
      var value;

      switch (nextIndex) {
      case 0:
        value = canvasBundle.grid;
        break;
      case 1:
        value = canvasBundle.axes;
        break;
      case 2:
        value = canvasBundle.functions[functionIndex];
        break;
      case 3:
        value = canvasBundle.overlay;
        break;
      default:
        break;
      }

      if (nextIndex != 2 || functionIndex == canvasBundle.functions.length -1) { 
        nextIndex++; 
      } else { 
        functionIndex++ 
      }

      return nextIndex &lt;= 4 ? 
        {value: value, done: false} :
        {done: true};
    }
  };
}


This allows me to do the following: 

var it = makeCanvasBundleIterator(canvasBundle);

var next;
while (!(next = it.next()).done) {
  console.log(next.value);
}


Coming from C, this code does not look clean at all. Since I'm a real JS beginner, I'd like a review with suggestions/advice how I can clean it up. Maybe there even is a completely different/better approach.
The switch is awkward, and the nextIndex != 2 special case is cumbersome.  It would be a bit simpler if you regularized everything:

function makeCanvasBundleIterator(canvasBundle) {
  var i = 0, j = 0;
  var items = [
    [canvasBundle.grid],
    [canvasBundle.axes],
    canvasBundle.functions,
    [canvasBundle.overlay],
  };
  return {
    next: function() {
      if (i &gt;= items.length) {
        return {done: true};
      }
      if (j &gt;= items[i].length) {
        i++;
        j = 0;
      }
      return {done: false, value: items[i][j++]};
  };
}


But that could be simplified further by linearizing the list up front using Array.concat():

function makeCanvasBundleIterator(canvasBundle) {
  var i = 0;
  var items = [].concat(
    canvasBundle.grid,
    canvasBundle.axes,
    canvasBundle.functions,
    canvasBundle.overlay
  );
  return {
    next: function() {
      return (i &gt;= items.length) ? {done: true}
                                 : {done: false, value: items[i++]};
  };
}


For that matter, why bother making an iterator at all?  Just return the linearized array.  The caller can iterate through it conventionally using a for loop or Array.forEach().

Note that the behaviour of these alternate solutions is different from the original if the canvasBundle is modified during iteration.  (You wouldn't want to do that, I hope?)