¿Te has topado con la necesidad de mezclar el orden en el que tus elementos se pintan en pantalla? ¡Nosotros también, y array.prototype.shuffle en JavaScript es la solución!
A la hora de programar, es muy común encontrar situaciones en las que queremos que nuestros elementos no tengan un orden tan estricto y que se ubiquen más bien de forma aleatoria. Por eso, en este post, te enseñaremos cómo usar array.prototype.shuffle en JavaScript para crear aleatoriedad en tu proyecto.
¿Qué es array.prototype.shuffle en JavaScript?
En programación, existen muchas maneras de crear una distribución aleatoria de elementos. Esta práctica se llama randomize elements y es muy común utilizarla para crear sorteos. Usualmente, esta distribución aleatoria se hace en relación a un array, pues es un conjunto de elementos que solemos recorrer en orden para pintarlos en la pantalla.
La función array.prototype.shuffle en JavaScript es una de las formas más populares de crear una distribución aleatoria de elementos. Como su nombre indica, con ella estaremos afectando directamente al prototipo de nuestro objeto array. Si tienes dudas sobre qué es eso del prototipo de un objeto, te sugerimos leer nuestro post sobre los objetos en JavaScript.
Al utilizar una función que afecta el prototipo, lo que estamos creando es un nuevo método que estará disponible para cualquier array. Es decir, una vez creado el array.prototype.shuffle en JavaScript, podremos usar shuffle como método para manipular los elementos de cualquier array. Esto hará que se comporte igual que otros métodos predeterminados como forEach, map y filter.
¿Cómo funciona el array.prototype.shuffle en JavaScript?
Entonces, ¿cómo es eso de que podemos acceder a la cadena de prototipos de un objeto y alterar su comportamiento? Si has leído ya nuestro post sobre las clases en JavaScript, sabrás que existen dos maneras de escribir y generar clases en este lenguaje de programación. Una de ellas define que, una vez creada la clase, podemos acceder a su prototipo usando la propiedad .prototype. Al acceder a esta propiedad, podemos insertar lo que queramos, por ejemplo, una función o un parámetro.
Lo que nos permite hacer array.prototype.shuffle en JavaScript es acceder al prototipo del objeto y crear un método shuffle que estará disponible en cualquier array. Este método nos ayudará a randomizar el orden en el que se pinta el arreglo. A continuación, te mostramos una plantilla para crear este método que encontramos en Stackoverflow:
array.prototype.shuffle = function ( ) {
var i = this.lenght, j, temp;
if (i === 0) return this;
while (–i) {
j = Math.floor ( Math.random ( ) * ( i + 1) );
temp = this [i];
this [i] = this [j];
this [j] = temp;
}
return this;
}
Una vez hayas insertado este método en tu código, preferiblemente en el archivo index.js, podrás utilizarlo como cualquier otro método. Entonces, lo que harás será utilizar el comando .método después de llamar a tu array por nombre. Recuerda que con cualquier método también puedes insertar directamente el array con sus valores en vez de insertar su nombre.
teams.shuffle ( );
Ahora, para pintar este array en la pantalla con su nueva distribución aleatoria, basta con insertar el comando consol.log de ‘teams’ como lo haríamos normalmente:
console.log (teams);
Para revisar exactamente lo que hace este proceso en tu proyecto, te sugerimos utilizar el debugger de JavaScript y sus breakpoints.
Ahora que sabes qué es y cómo funciona el array.prototype.shuffle en JavaScript, te invitamos a poner en práctica esta forma de crear métodos en tu propio proyecto, ya que esta es la mejor forma de afianzar la teoría. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Allí, no solo seguirás aprendiendo sobre el desarrollo web, sino que también pondrás en práctica tus conocimientos con diversos proyectos. ¡Anímate a inscribirte para convertirte en un experto del desarrollo web!
