Como embaralhar um array em JavaScript (shuffle)

Neste artigo você vai aprender a como embaralhar um array em JavaScript, do jeito mais simples e eficaz possível!

Fala programador(a), beleza? Bora aprender mais sobre arrays e também sobre a linguagem JavaScript!

Para embaralhar um array podemos utilizar um algoritmo que retira um elemento aleatório do array e coloca em um novo array, o que será o reordenado aleatoriamente

Depois removemos o elemento que tiramos do array original, e assim prosseguimos

Quando não houve mais elementos, finalizamos o novo array com os elementos randomizados!

Veja a implementação deste algoritmo na prática:

// Função para randomizar array
function shuffleArray(arr) {
		// Loop em todos os elementos
    for (let i = arr.length - 1; i > 0; i--) {
    		// Escolhendo elemento aleatório
        const j = Math.floor(Math.random() * (i + 1));
        // Reposicionando elemento
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    // Retornando array com aleatoriedade
    return arr;
}

var arrA = [1, 2, 3, 4, 5];

console.log(shuffleArray(arrA)); // [4, 2, 1, 5, 3]
console.log(shuffleArray(arrA)); // [5, 3, 4, 2, 1]
console.log(shuffleArray(arrA)); // [5, 1, 3, 4, 2]

Criamos uma função que vai receber o array e depois reorganizar os elementos aleatoriamente

Lembrando que retornamos o array, para poder ter acesso ao novo array, que é o nosso objetivo

Leve em conta também que podemos utilizar qualquer tipo de dado, apesar do exemplo estar com apenas elementos numéricos

Conclusão

Neste artigo você aprendeu a como embaralhar um array em JavaScript, de uma maneira simples

Criamos um algoritmo que reposiciona os elementos por meio de uma escolha aleatória dos itens que estão no array

Utilizamos um loop for para percorrer a lista e retornamos o novo array, que veio de uma função que criamos para resolver o problema

Assim temos um novo array aleatório!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!