¿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ó. :,)