Question

The alltones array contains all the possible notes in music scale.

var alltones = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B" ];

I want to take the user’s input of a tone, and then construct a list that contains certain elements of the array.

Say I start at alltones[5] or "F", and want to take every second element of the array from that point and put it into my list, until I get back around to "F". The array is more like a circle than straight list. I’m a little unsure of how the array operates once the loop reaches the last element.

Do I approach the problem by generating a new array, based on the users input. Or is there a way that JavaScript knows to loop back to the start of an array once it reaches the end such that it treats the array like a circle?

An example:
User input = F
The output that I am seeking is to count (every two items) from F until we get back around the array to F
so the desired output would be => F G A B C# D#

Answer 1

There isn’t an existing Array method to do what you want, but one is easily defined using Array.prototype.slice and Array.prototype.concat:

// move i elements from the start of the array to the end of the array
Array.prototype.lcycle = function(i) {
  var xs = this.slice(0,i);
  var ys = this.slice(i);
  return ys.concat(xs)
};
// move i elements from the end of the array to the start of the array
Array.prototype.rcycle = function(i) {
  var xs = this.slice(0,-i);
  var ys = this.slice(-i);
  return ys.concat(xs);
};

And then you can use lcycle and rcycle as normal array methods:

>>> alltones.lcycle(3)
[ "D#" , "E" , "F" , "F#" , "G" , "G#" , "A" , "A#" , "B" , "C" , "C#" , "D" ]
>>> alltones.rcycle(4)
[ "G#" , "A" , "A#" , "B" , "C" , "C#" , "D" , "D#" , "E" , "F" , "F#" , "G" ]

Note that both of these methods return a new array. If you wanted to mutate the original array, you could define similar methods using Array.prototype.splice.

// move i elements from the start of the array to the end of the array, mutating the original array
Array.prototype.lcycle_m = function(i) {
  var args = this.splice(0,i);
  args.unshift(0);
  args.unshift(this.length);
  this.splice.apply(this, args);
};
// move i elements from the end of the array to the start of the array, mutating the original array
Array.prototype.rcycle_m = function(i) {
  var args = this.splice(-i);
  args.unshift(0);
  args.unshift(0);
  this.splice.apply(this, args);
};

And again, you can can use lcycle_m and rcycle_m as normal array methods:

>>> alltones.lcycle_m(3)
>>> alltones
[ "D#" , "E" , "F" , "F#" , "G" , "G#" , "A" , "A#" , "B" , "C" , "C#" , "D" ]
>>> alltones.rcycle_m(3)
>>> alltones
[ "C" , "C#" , "D" , "D#" , "E" , "F" , "F#" , "G" , "G#" , "A" , "A#" , "B" ]