En este artículo te explico cómo generar números aleatorios con JS y te muestro algunos de los ejemplos de uso más típicos. ¡Empecemos!
Índice de contenidos
Función para generar un numero aleatorio en JavaScript
Lo cierto es que JavaScript lo pone relativamente fácil a la hora de generar números aleatorios, ya que dispone de una función predefinida que permite implementar esta funcionalidad. Se trata del método Math.random().
Esta función crea un número aleatorio decimal entre el 0 y el 1. Sin embargo, tiene la peculiaridad de que el rango de números aleatorios que puede generar van del 0 a menor que 1, de forma que genera un número aleatorio en JS cuyo valor podrá ser 0, pero nunca podrá ser 1.
A continuación te muestro un ejemplo de código que podrás emplear para comprobar su funcionamiento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let random = Math.random();
console.log(random);
</script>
</body>
</html>Puedes copiar dicho código en un archivo con extensión .html y abrirlo con un navegador. A continuación, pulsa la tecla F12 para abrir el inspector de elementos y, en la pestaña Console, podrás ver tu número aleatorio JS.
Por ejemplo, en mi caso se ha generado el valor 0.7323775835569271:
En realidad, el código JavaScript se corresponde únicamente con las dos líneas añadidas entre las etiquetas <script></script>, lo demás es código HTML utilizado únicamente para crear el documento .html en el que se ejecuta JavaScript.
En los ejemplos siguientes mostraré únicamente la parte del código JS.
Generar números aleatorios en JavaScript del 1 al 100
Es posible que la funcionalidad implementada en el ejemplo anterior se te quede corta, debido a que necesitas crear un número aleatorio del 1 al 100 con JavaScript.
Para ello, tendrás que añadir algunas líneas de código al fragmento anterior. Será necesario multiplicar el valor por 100 y sumarle una unidad, ya que de lo contrario se obtendría un rango 0 – 99. Para ello, puedes emplear el siguiente código:
<script>
let random = Math.random();
random = random * 100 + 1;
console.log(random);
</script>
Ahora bien, para finalizar correctamente el código, será necesario redondear el valor a la baja. De esta forma, se obtienen valores enteros (sin decimales) y siempre entre el 1 y el 100, ya que de lo contrario existiría la posibilidad de generar un número con valor de 101.
Realmente, redondear a la baja un número y quitarle los decimales es lo mismo. En el siguiente ejemplo te muestro cómo prescindir de los decimales y generar aleatoriamente de números del 1 al 100 con JS.
Quitar decimales en JavaScript
Para quitar los decimales existe la función Math.trunc(). Gracias ella, es posible obtener la parte entera de cualquier número. Para hacer uso de ella, simplemente tendrás que pasarle como parámetro la variable sobre la que estés trabajando, en nuestro caso random.
<script>
let random = Math.random();
random = random * 100 + 1;
random = Math.trunc(random);
console.log(random);
</script>En mi caso, el resultado ha sido el siguiente:
Generar un número aleatorio del 1 al 10 en JS
Quizás necesites generar números aleatorios con JS únicamente entre el 1 y el 10. En ese caso, puedes emplear prácticamente el mismo código que se expone en el punto anterior. Simplemente será necesario realizar la multiplicación por 10 en vez de por 100:
<script>
let random = Math.random();
random = random * 10 + 1;
random = Math.trunc(random);
console.log(random);
</script>Crear un array con números aleatorios en JavaScript
Puede que desees crear un array compuesto por múltiples números aleatorios en JavaScript. En ese caso, debes saber de antemano la cantidad de valores que contendrá el array.
En el siguiente ejemplo, te muestro cómo rellenar un array de 10 elementos con números aleatorios en JavaScript:
<script>
let lista = [];
// Se ejecuta 10 veces
for (let i = 0; i < 10; i++) {
let random = Math.random();
random = random * 10 + 1;
random = Math.trunc(random);
lista[i] = random;
}
console.log(lista);
</script>El código anterior ejecuta un bucle for que consta de 10 iteraciones (10 repeticiones). En cada una de ellas, se genera un número aleatorio y se le asigna a una posición del array. Por último, se muestra el array por consola. En mi caso, ha generado los siguientes valores:
Generar números aleatorios sin repetir en JavaScript
En ocasiones, es posible que necesites crear un conjunto de números aleatorios en JavaScript que no se repitan entre sí. Este caso es más complejo que los anteriores, ya que requiere del uso de un mayor número de estructuras iterativas (bucles) y condicionales.
Es posible que existan diversas formas de llevarlo a cabo, pero en el siguiente ejemplo te muestro una de ellas. Con el siguiente script podrás generar un array de 10 elementos compuesto por valores aleatorios irrepetibles del 1 y el 100:
<script>
let lista = [];
let repetido;
for (let i = 0; i < 10; i++) {
while (!lista[i]) {
repetido = true;
while (repetido == true) {
let random = Math.random();
random = random * 100 + 1;
random = Math.trunc(random);
for (let j = 0; j < lista.length; j++) {
if (lista[j] == random) {
repetido = true;
break;
} else {
repetido = false;
}
}
lista[i] = random;
}
}
}
console.log(lista);
</script>
Conclusión
Como ves, generar números aleatorios en JavaScript puede ser sencillo, aunque existen ejemplos complejos, como es el caso de los números aleatorios que no se repiten entre sí.
Existen más funciones JavaScript que se pueden utilizar para realizar acciones de este tipo y formas distintas de obtener los mismos resultados.
Sin embargo, puedes usar los scripts que te he ido mostrando para implementar las funcionalidades que necesites.
¡Hasta la próxima!
