I am trying to create a function that changes positions of the items inside an array.

For example, I have this array:

[1, 2, 3] - if I call the function I get this => [2, 3, 1]; If I call the function again I should have this => [3, 1, 2]; The next time it should move again and so on. But instead, if I call the function a second time I get this again => [2, 3, 1];

How could I make this work properly?

I know why this is happening, every time I call the function it receives the same values in the same order, I get that, that's why I built another array (move) to receive the values in the current order, it was an attempt to use this new array the second time I call the function, I tried it using an if/else statemente, but it didn't work; I also built another function passing 'move' as a parameter, and it worked, but just doesn't make any sense I have to have a different function for every move.

p.s. I am receiving the values from a HTML input.

<input id="numero1" value="">
<button onclick="moveLeft()">Move</button>


var n1 = document.getElementById("numero1");

function moveLeft() {
    var str = n1.value;
    var arr = str.split('');
    var move = [];
    
    console.log(arr);
    arr.splice(0, 3, arr[1], arr[2], arr[0]);
    console.log(arr);

    for (var i = 0; i < arr.length; i++) {
        move.push(arr[i]);
    }

    console.log(move);
    teste(move);
}


function teste(move) {
    console.log(move);
    move.splice(0, 3, move[1], move[2], move[0]);
    console.log(move);
}

I am trying to create a function that changes positions of the items inside an array.

For example, I have this array:

[1, 2, 3] - if I call the function I get this => [2, 3, 1]; If I call the function again I should have this => [3, 1, 2]; The next time it should move again and so on. But instead, if I call the function a second time I get this again => [2, 3, 1];

How could I make this work properly?

I know why this is happening, every time I call the function it receives the same values in the same order, I get that, that's why I built another array (move) to receive the values in the current order, it was an attempt to use this new array the second time I call the function, I tried it using an if/else statemente, but it didn't work; I also built another function passing 'move' as a parameter, and it worked, but just doesn't make any sense I have to have a different function for every move.

p.s. I am receiving the values from a HTML input.

<input id="numero1" value="">
<button onclick="moveLeft()">Move</button>


var n1 = document.getElementById("numero1");

function moveLeft() {
    var str = n1.value;
    var arr = str.split('');
    var move = [];
    
    console.log(arr);
    arr.splice(0, 3, arr[1], arr[2], arr[0]);
    console.log(arr);

    for (var i = 0; i < arr.length; i++) {
        move.push(arr[i]);
    }

    console.log(move);
    teste(move);
}


function teste(move) {
    console.log(move);
    move.splice(0, 3, move[1], move[2], move[0]);
    console.log(move);
}

• javascript

• Are you trying to sort the array? Or move one item in the array to a specific spot in the array? – Steve Commented Aug 22, 2019 at 23:15
• I am trying to move 1 position to the left every time I call the function – Berg_Durden Commented Aug 22, 2019 at 23:19
• Okay. So basically take the first item in the array and put it at the end of the array so everything moves one spot to the left? If so, then the answer by @ZER0 is spot on. – Steve Commented Aug 22, 2019 at 23:27
• Yes, I did that. But I am always getting the same result because the function is always running with the same values. In his case it works, but I need to call the function from a button. – Berg_Durden Commented Aug 22, 2019 at 23:37

2 Answers 2

If I understood properly, I think you can simplify in one line function:

const moveLeft = (arr) => arr.push(a.shift());

Notice that this function would mutate the content of the array but I guess that what you want:

const array = [1, 2, 3];

moveLeft(array);
console.log(array)// [2, 3, 1]

moveLeft(array);
console.log(array)// [3, 1, 2]

moveLeft(array);
console.log(array)// [1, 2, 3]

Basically with push we add a new element at the end of the array, and the new element we add, is the return value of the method shift, that removes the first element from an array and return it.

Edit

If you don't want to mutate the original array, the fastest way is create a shallow copy and pass that to the function:

 const newArray = array.slice();
 moveLeft(newArray);

 console.log(newArray, array) // [2, 1, 3] [1, 2, 3]

However, a possible implementation that always return a new array, could be:

 const moveLeft = (arr) => [...arr.slice(1), arr[0]]

Just for future reference. But keep in mind that here you're create a shallow copy, (so one new array) and returns a new array from the spread operator, so it's less ideal. It could be useful only if you're writing an API that never allow mutability.

Edit 2

As per ment, the input's value should reflect the new order, so, given the moveLeft function written before (the first one, that mutates the content):

<input id="numero1" value="">
<button onclick="inputMoveLeft('numero1')">Move</button>

And the JS:

function inputMoveLeft(id) {
  const input = document.getElementById(id);

 input.value = moveLeft(input.value.split("")).join("");
}

It should give you the result you were looking for.

pop and shift sound like the thing you need:

function rotateLeft(array){
    let first = array.shift()
    array.push(first); // add to end
    return array;
}

function rotateRight(array){
    let last = array.pop()
    array.unshift(last); // add to front
    return array;
}