javascript loop iterating too much

Question

Trying a fun problem of replacing vowels in a string with the next vowel in line aka a->e, e->i, i->o, o->u, not accounting for "u". Starting with an array instead of a string. My second loop (to iterate over vowel array elements) is ignoring my "j

var vowelChange = function(vowelArray, stringToChange) {
for (var i = 0; i<stringToChange.length; i++) {
    for (var j = 0; j<vowelArray.length; j++) {
      if (stringToChange[i]===vowelArray[j]) {
        var newCharacter = vowelArray[j+1]
          stringToChange[i] = newCharacter
          i++
      }
    }
}
return stringToChange
};

I'm using node-debug to set breakpoints in a browser, and j is looping to 5 before starting over at 0. I get the correct output, but j should stop at 4...

EDIT

Can somebody explain how I'm using join incorrectly, because I can't get my function to output a string instead of just an array.

var vowelChange = function(vowelArray, stringToChange) {
for (var i = 0; i<stringToChange.length; i++) {
    for (var j = 0; j<vowelArray.length-1; j++) {
      if (stringToChange[i]===vowelArray[j]) {
          stringToChange[i] = vowelArray[j+1]
          break
      }
    }
  }
  stringToChange = stringToChange.join('')
  return stringToChange
};


var vowels = ['a','e','i','o','u']
var firstName = ['t', 'e', 's', 't']

vowelChange(vowels, firstName)
console.log(firstName)

Answer 1

Assuming vowelArray is 0-indexed...

var vowelChange = function(vowelArray, stringToChange) {
    for (var i = 0; i<stringToChange.length; i++) {
        for (var j = 0; j<vowelArray.length - 1; j++) {
            if (stringToChange[i]===vowelArray[j]) {
                stringToChange[i] = vowelArray[j+1];
                break;
            }
        }
    }
    return stringToChange
};

Answer 2

In JavaScript, strings are immutable objects, which means that the characters within them may not be changed and that any operations on strings actually create new strings.

So,if you try to change any index of the string, the original string won't change

node
> str = "hello this is dummy string";
'hello this is dummy string'
> str[0] = "w";
'w'
> str
'hello this is dummy string'

So, stringToChange[i] = vowelArray[j+1]; won't work

Could split the string and then join

var vowelChange = function(vowelArray, stringToChange) {
    stringToChange = stringToChange.split('');
    for(var i=0; i<stringToChange.length;i++){
        for(var j=0;j<vowelArray.length-1;j++){
            if(stringToChange[i] == vowelArray[j]){
                stringToChange[i] = vowelArray[j+1];
                break;
            }
        }
    }
    stringToChange = stringToChange.join('');
    return stringToChange;
};

Example