JavaScript: Mudar a posição de um elemento no array

Neste artigo veremos uma maneira de mudar a posição de um elemento no array, com funções nativas do JavaScript, de forma fácil.

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender coisa nova!

Podemos fazer a manipulação de um array via JavaScript, para posicionar os elementos em um índice que nós desejarmos

Isso serve, por exemplo, para quando precisamos exibir os itens em um select, e atualizar as options com valores que vem em um array

Então podemos manipular antes os itens e depois inserir nas options, vamos para a prática?

Trocar a posição de um elemento no array: prática

Podemos criar uma função para resolver este problema, veja:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

function changePosition(arr, from, to) {
    arr.splice(to, 0, arr.splice(from, 1)[0]);
    return arr;
};

let arr = [1,2,4,5,6,7,8,9,10,3];

arr = changePosition(arr, 9, 3);

console.log(arr); // [1,2,3,4,5,6,7,8,9,10]

Criamos uma função chamada changePosition, que leva três argumentos: o array que vamos mudar os elementos de posição, a posição que o elemento está (from) e a posição que o elemento deve ficar (to)

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Veja que conseguimos organizar a ordem do array, mudando o número 3 da última posição para a número 2 (arrays começam contando do 0)

Então agora ficou fácil para você trocar a posição de um elemento no array, certo? 😀

Dica: como mudar o elemento da primeira posição para a última no array

E vai também uma dica bônus neste artigo, vamos mudar a posição do primeiro elemento para última no array

Veja como é simples:

let arr = [3,1,2];

arr.push(arr.splice(0,1)[0]);

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

Simplesmente removemos o primeiro elemento do array com splice, e pegamos ele no retorno com o [0]

Depois damos um push no array, que adiciona um elemento no fim do array

E este elemento sera o primeiro, que foi retirado com splice

Conclusão

Neste artigo vimos uma forma de trocar a posição de um elemento em um array

Criamos uma função para o nosso código poder ser reaproveitado e ficar bem estruturado nos helpers do nosso projeto 😀

E ainda, uma super dica de como colocar o primeiro elemento como último no array

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Muita gente cai aqui procurando não mover UM elemento pra um índice, e sim TROCAR dois elementos de posição entre si, tipo o primeiro com o último

Dá pra fazer isso numa linha só, usando desestruturação do JavaScript

Se liga:

Aqui a gente pega o valor da posição 0 e da posição 4 e joga um no lugar do outro de uma vez

Sem variável temporária, sem splice, sem PC da Nasa

Se você conhece o velho jeito com uma variável ‘temp’ pra guardar um valor antes de trocar, esse é o mesmo conceito, só que enxuto no JS moderno

Um detalhe que pega muita gente: a função changePosition lá de cima altera o array original, porque o splice modifica o array na mão

Na maioria dos casos isso é ok, mas às vezes você quer manter o array original intacto e receber um novo array já organizado (pensa em React, ou em qualquer estado que você não quer mutar sem querer)

Pra isso a gente copia o array antes de mexer:

function mudarPosicao(arr, from, to) { copia.splice(to, 0, item); return copia; };

let novo = mudarPosicao(original, 4, 2);

Assim você mexe na cópia e devolve ela, e o original nem sente

Já que mostramos como mandar o primeiro pro fim, bora fechar o combo com o contrário: pegar o último e jogar pra frente

arr.unshift(arr.pop());

O pop() remove o último elemento e retorna ele

O unshift() adiciona esse elemento lá na primeira posição

Dois métodos nativos, uma linha, resolvido

Qual a diferença entre splice e slice pra isso?

O splice altera o array original (remove/insere no lugar) e é ele que usamos pra mover o elemento. O slice só copia um pedaço e não altera nada. Nome parecido, comportamento bem diferente, cuidado pra não trocar um pelo outro

Posso mover um elemento pelo VALOR e não pelo índice?

Pode. Primeiro você acha o índice com indexOf, depois usa a mesma lógica:

let from = arr.indexOf(3);

O indexOf te dá a posição do valor 3, aí é só reaproveitar o splice

O array começa a contar do zero mesmo?

Sim! O primeiro elemento é o índice 0, o segundo é o 1, e por aí vai. É o erro clássico de quem tá começando, então sempre confere o índice antes de reclamar que ‘não funcionou’