¿Cómo hacer el FizzBuzz en JavaScript?
Muchos programadores se han topado con esta prueba en alguna entrevista de trabajo. Parece fácil de solucionar y es que en realidad lo es, pero muchos programadores junior no saben cómo hacerlo. En este post te enseñaré a solucionar este problema, pero de la mejor forma posible para asegurar tu puesto.
¿De qué trata?
El fin de esta prueba es solucionar el siguiente problema:
Escribir un programa que muestre en pantalla los números del 1 al 100, sustituyendo los múltiplos de 3 por la palabra “fizz”, los múltiplos de 5 por “buzz” y los múltiplos de ambos, es decir, los múltiplos de 3 y 5 (o de 15), por la palabra “fizzbuzz”.
En este artículo lo vamos a solucionar usando JavaScript y la consola del navegador.
¿Qué necesitamos para solucionarlo?
Realmente no necesitas mucho, solo necesitas un navegador para poder colocar tu código en la consola y ejecutarlo.
Para poder usar una página limpia en nuestro navegador lo podemos hacer usando about:blank
en una pestaña.
Crearemos una pestaña nueva en nuestro navegador (en este caso usaré Chrome) y escribiremos about:blank
en esa pestaña.
Ahora podemos usar esta página totalmente limpia para ejecutar nuestro código en la consola. Podemos abrir la consola usando f12
.
Empecemos con el código
Para empezar a solucionar el problema primero tenemos que entenderlo. Para poder saber si un número es múltiplo de otro se logra dividiéndolos entre sí y teniendo resto 0.
Para obtener el resto de una división en JavaScript se hace con el operador aritmético: Resto o Residuo (%). Su sintaxis es la siguiente: Operador: var1 % var2
.
Simplemente podemos saber si algún número es múltiplo de 3 o de 5 usando condiciones. Te mostraré un ejemplo:
if(3 % 3 == 0){
console.log(‘Sí es múltiplo de 3’)
}
A partir de este ejemplo podemos solucionar el problema, podemos usar una función que nos compare un numero que vaya en aumento hasta 100 con el 3, 5 y 15 para concluir si es múltiplo o no de esos números.
Con el siguiente código podemos saber qué números son FizzBuzz:
function compararNúmeros(){
for(let númeroAComparar = 1; númeroAComparar <= 100; númeroAComparar++){
if(númeroAComparar % 3 == 0 && númeroAComparar % 5){
console.log(`${númeroAComparar} FizzBuzz`)
}
}
}
Si lo corres en la consola los verás. Ahora necesitamos saber cuales son Fizz y Buzz individualmente, luego los mostraremos en la consola.
function compararNúmeros(){
for(let númeroAComparar = 1; númeroAComparar <= 100; númeroAComparar++){
if(númeroAComparar % 3 == 0 && númeroAComparar % 5 == 0){
console.log(`${númeroAComparar} FizzBuzz`)
} else if(númeroAComparar % 3 == 0){
console.log(`${númeroAComparar} Fizz`)
} else if(númeroAComparar % 5 == 0){
console.log(`${númeroAComparar} Buzz`)
} else {console.log(`${númeroAComparar}`)}
}
}
Con estas condiciones podremos mostrar en nuestra consola todos los múltiplos de 3, 5 y 15.
Primero condicionamos para lograr identificar los múltiplos de 15 con el siguiente código:
if(númeroAComparar % 3 == 0 && númeroAComparar % 5 == 0){}
Si el número no coincide se pasará al siguiente a ver si es múltiplo de 3 o sino de 5. Al final, si ningún número corresponde a los múltiplos se mostrará en la consola sin ninguna identificación.
¡Espero que te haya servido este post! Dame tu clap si te funcionó. :,)