“Fizz – Buzz” y formas de llevarlo a cabo en JavaScript

Fizz y Buzz es un problema planteado a “aspirantes programadores” como una prueba técnica para entrevistas de trabajos en esta área tan demandada, la programación. El enunciado del problema es el siguiente:

Escribe, en el lenguaje de programación que desees, un programa que muestre en pantalla los números del 1 al 100, sustituyendo los múltiplos de 3 por la palabra “Fizz” y, a su vez, los múltiplos de 5 por “Buzz”. Para los números que al tiempo son múltiplos de 3 y 5 (como 15), utiliza el combinado “FizzBuzz”.

Teniendo en cuenta el enunciado del problema, mostraré las formas que he encontrado para resolverlo en JavaScript, con un ciclo for e if’s dentro de él, y con un ciclo for y operadores condicionales ternarios (?:) dentro de él.

Como JavaScript es un lenguaje de navegador, justo ahí es donde ejecutaremos nuestro código.


Fizz – Buzz con ciclo for e if’s

Lo único que tendremos que crear es un ciclo for y el número de if’s que contengan las condiciones que se citan en el enunciado del problema “Fizz – Buzz”.

Sin título

El ciclo for debe tener tres parámetros: una expresión inicial, una condición, y una expresión final.

for([expresion-inicial]; [condicion]; [expresion-final])

Esto puede citarse así:

“Mientras la (expresión inicial) cumpla la (condición), la (expresión final) se ejecutará”.

La expresión inicial va a constar de una variable iteradora, llamada i (var i). Como queremos que el programa muestre los números del 1 al 100, la variable i va a comenzar con un valor equivalente a 1 (var i = 1; ).

La condición es que mientras la variable i sea menor o igual a 100, i va a aumentar de valor +1 (i <= 100; ).

La expresión final indica que la variable i va a aumentar +1 mientras la condición sea verdadera (i++).

En código quedaría así:

Sin título2

Mientras, en los if’s tenemos 4 condiciones:

  1. Que el número salga de manera normal (1, 2… ) porque no es múltiplo de 3 ni de 5.
  2. Que el espacio de un número múltiplo de 3 sea ocupado por un texto que diga Fizz (“6 <- Fizz“. Como 6 es múltiplo de 3, sustituimos 6 por Fizz).
  3. Que el espacio de un número múltiplo de 5 sea ocupado por un texto que diga Buzz (“10 <- Buzz“. Como 10 es múltiplo de 5, sustituimos 10 por Buzz).
  4. Que el espacio de un número múltiplo de 3 y de 5 sea ocupado por un texto que diga FizzBuzz (“15 <- FizzBuzz“. Como 15 es múltiplo de 3, y a la vez de 5, sustituimos 15 por FizzBuzz).

Las condiciones deben seguir un patrón. Para entender este patrón debemos de imaginar una pelota roja que comienza a caer desde arriba del código. Esta pelota se detiene cuando la condición de un if es verdera. Debemos de tener cuidado en cómo colocamos las condiciones, ya que si un if está mal ubicado, la pelota roja se dentendrá en el lugar equivocado.

El patrón de condiciones quedaría organizado de la siguiente manera:

  1. Un número es múltiplo de 3 y de 5. Debemos de colocar primero esta condición, ya que primero se contempla la posibilidad de que un número cumpla dos expresiones. Si colocáramos otra condición al inicio, esta condición nunca se cumpliría. El programa quedaría mal estructurado según el problema planteado.
  2. Un número es múltiplo de 3. Si la anterior condición no se cumple, esta condición se encargará de revisar si algún número es, exclusivamente, múltiplo de 3.
  3. Un número es múltiplo de 5. Si la anterior condición no se cumple, esta condición se encargará de revisar si algún número es, exclusivamente, múltiplo de 5.
  4. Un número no es múltiplo de 3 ni de 5. Si ninguna de las anteriores condiciones se cumple, el número se imprimirá por pantalla tal y como está.

Pero, nos estamos olvidando de algo… ¿Cómo sé cuándo un número es múltiplo de 3 o de 5? Pues bien, para eso existe el operador %. Este operador viene a representar en JavaScript la operación modulo. El modulo se encarga de devolver el resto de una división entre dos números. P. ej. “12 % 6 = 0″. Como 12 puede dividirse entre 6, el resto o residuo de la división es igual a 0.

Podemos utilizar este operador % a nuestro favor en nuestro código. Para ello tenemos que imaginar una operación que nos permita establecer cuándo un número es múltiplo, o no, de 3 y 5.

Con el ejemplo anterior (“12 % 6 = 0”) podemos deducir que 12 puede dividirse entre 6, ya que su resto (o residuo) es igual a 0. A su vez, 12 es múltiplo de 6. Es decir, que la operación del ejemplo nos sirve perfectamente para saber cuando un número es, o no, múltiplo de 3 o de 5.

Tenemos que cambiar algunos de los datos en la operación de ejemplo para poder reutilizarla dentro del código:

  1. El primer dato es 12; 12 pasará a ser la variable i, la cual a la vez es la variable que indica si algún número del 1 al 100 es divisible entre 3 o 5. Es decir, que es el dividendo entre 3 o 5.
  2. El segundo dato es 6; 6 será los divisores que estamos usando para nuestro problema, el 3 y el 5. Recordemos que un divisor es un número que en la división divide a otro número (específicamente, al dividendo).
  3. El tercer dato es el operador =; este operador, en operaciones matemáticas, puede significar un resultado. En JavaScript, el operador = significa asignación. Esto quiere decir que tendremos que utilizar otro operador para poder decir que un número es múltiplo de 3 o de 5 cuando su módulo es igual a 0. Tendremos que utilizar un operador de comparación == para comparar la operación de módulo y el número 0.

La operación de ejemplo en código queda de esta manera:

i % 3 == 0 && i % 5 == 00 <- Para demostrar si un número es múltiplo de 3 y de 5

i % 3 == 0 <- Para demostrar si un número es múltiplo de 3

i % 5 == 0 <- Para demostrar si un número es múltiplo de 5

i <- Para mostrar por pantalla un número que no es múltiplo de 3 ni de 5

NOTA: OPERADOR LÓGICO &&

expr1 = true && expr2 = false  <-  Ej. operador lógico &&

El operador lógico && (AND) se encarga de devolver expr1 si puede ser convertido a false, de lo contrario devuelve expr2. Cuando && se usa con valores booleanos (valores que pueden ser sólo true o false), && devuelve true si ambos operandos son true, en caso contrario devuelve false.


Siguiendo el patrón de if’s, y teniendo en cuenta que sabemos cuándo un número es múltiplo o no de otro, podemos poner todo esto en nuestro código:

Sin título3

Ahora declaremos las sentencias para cada una de las condiciones. Como queremos escribir en el documento (en la página web), utilizaremos el método document.write(“”). Pondremos este método en cada una de las condiciones como sentencia:

Sin título4

Dentro de las comillas del método document.write(“”) escribirémos el texto correspondiente a la condición. Es decir, cuando es:

  1. Múltiplo de 3 y de 5. Escribir FizzBuzz
  2. Múltiplo de 3. Escribir Fizz
  3. Múltiplo de 5. Escribir Buzz
  4. No es múltiplo de 3 y de 5, o de 3 ni de 5. Escribir el número tal y como está (i)

Sin título5

Técnicamente, el programa ya está terminado. Sin embargo, cuando abrimos el archivo en el navegador, nos sale lo siguiente:

Sin título6

¡El programa funciona! Si revisamos, los múltiplos de 3 y de 5 están definidos como FizzBuzz (p. ej. 15), los múltiplos de 3 como Fizz (p. ej. 9) y los múltiplos de 5 como Buzz (p. ej. 10).

Pero no queremos que los números se escriban de manera horizontal, ya que como se puede ver, se ve desorganizado… Aquí es donde entra la etiqueta <br />. Esta etiqueta produce un salto de línea en el texto. Nos servirá para escribir los números de manera vertical.

En el código, lo único que tendremos que hacer es agregar esta etiqueta <br /> al final de cada texto dentro de las comillas. De esta forma:

Sin título7

En el caso de else {}, su document.write() contiene solamente la variable i (significa que escribirá solamente el valor de i, un número que va del 1 al 100). Como i no es una cadena de texto, para agregar la etiqueta <br /> a i tendremos que concatenar estos dos valores. Concatenar es unir dos datos como una sola cadena string.

Para concatenar i y <br /> podremos hacerlo de dos formas: utilizando el operador + o utilizando una coma (,), como se muestra en la imagen.

Recuerda poner siempre las etiquetas que utilices en JavaScript dentro de comillas (“”). Sino lo haces, JavaScript te soltará un error de sintaxis.

¡Ya hemos terminado nuestro Fizz – Buzz con ciclo for e if’s! Ahora hay que ejecutarlo en nuestro navegador:

Sin título-1

Código de Fizz – Buzz con ciclo for e if’s (FINAL)

Final

for(var i = 1; i <= 100; i++) {
  if(i % 3 == 0 && i % 5 == 0) {
    document.write("FizzBuzz<br />");
  } else if(i % 3 == 0) {
    document.write("Fizz<br />");
  } else if(i % 5 == 0) {
    document.write("Buzz<br />");
  } else {
    document.write(i + "<br />");
  }
}

Fizz – Buzz con ciclo for y operadores condicionales ternarios (?:)

Como primer paso, tendremos que crear un ciclo for. Sus datos serán los mismos que describimos en el for del Fizz – Buzz anterior.

img1


Ahora vamos a hacer un repaso de operadores condicionales ternarios (?:).

  • La sintaxis del operador condicional ternario (?:) es la siguiente:
test ? expresión1 : expresión2

Tenemos, como su nombre lo indica (ternario: consta de tres objetos), tres parámetros dentro de la sintaxis del operador condicional ternario (?:):

  1. test. Es cualquier expresión booleana (una expresión que puede ser evaluada como verdadera o falsa).
  2. expresión1. Expresión que se retorna si test es true (verdadero).
  3. expresión2. Expresión que se retorna si test es false (false).

El operador ?: se utiliza como forma abreviada de una condición if… else.


En nuestro código, luego de haber creado el ciclo for con sus respectivos datos, comenzaremos colocando el patrón de condiciones que vimos anteriormente en el Fizz – Buzz con ciclo for e if’s. Pero esta vez lo haremos con los operadores condicionales ternarios.

Recordemos el patrón de condiciones:

  1. Un número es múltiplo de 3 y de 5. Debemos de colocar primero esta condición, ya que primero se contempla la posibilidad de que un número cumpla dos expresiones. Si colocáramos otra condición al inicio, esta condición nunca se cumpliría. El programa quedaría mal estructurado según el problema planteado.

  2. Un número es múltiplo de 3. Si la anterior condición no se cumple, esta condición se encargará de revisar si algún número es, exclusivamente, múltiplo de 3.

  3. Un número es múltiplo de 5. Si la anterior condición no se cumple, esta condición se encargará de revisar si algún número es, exclusivamente, múltiplo de 5.

  4. Un número no es múltiplo de 3 ni de 5. Si ninguna de las anteriores condiciones se cumple, el número se imprimirá por pantalla tal y como está.

En código, este patrón de condiciones va de la siguiente manera:

i % 3 == 0 && i % 5 == 00 <- Para demostrar si un número es múltiplo de 3 y de 5

i % 3 == 0 <- Para demostrar si un número es múltiplo de 3

i % 5 == 0 <- Para demostrar si un número es múltiplo de 5

i <- Para mostrar por pantalla un número que no es múltiplo de 3 ni de 5

Comencemos por la primera condición. Colocaremos esta condición tal y como se muestra en la imagen.

img2

Esta primera condición es nuestro primer test, según la sintaxis del operador condicional ternario (?:).

Luego de haber colocado nuestro primer test, colocaremos el operador ? para indicar que antes de aquél operador está el test.

img3

Siguiente al operador ? colocaremos nuestra expresión1, la cual es la expresión que se retornará si test es true (verdadero). Esta expresión1 es, según la condición en el problema planteado al inicio, escribir en el documento la palabra FizzBuzz, que indicará si un número es múltiplo de 3 y de 5.

Escribiremos con el método document.write(“”) la expresión1.

img4

Luego, pondremos el operador : para indicar que antes de este operador hay un expresión verdadera (expresión1), y después de este operador hay una expresión falsa (expresión2).

img5

La expresión2 vendrá a ser la expresión que se retornará si test es false (falso). En este espacio colocaremos el segundo test, el cual es la segunda condición que tenemos, que es i % 3 == 0. Desde este punto estamos, por así decirlo, anidando operadores condicionales ternarios (?:)

img6

Después del segundo test viene el operador ?, y siguiente a este operador viene la expresión1 del segundo test. Esta expresión es escribir en el documento la palabra Fizz, que indicará si un número es múltiplo de 3. Luego de haber escrito la expresión1, agregamos el operador : . 

img7

Luego del operador : viene la expresión2. Este espacio será ocupado por el tercer test, que será la tercera condición que tenemos, la cual es i % 5 == 0. Luego de poner este tercer test agregamos el operador ?, y luego de agregarlo declararemos la expresión1 del tercer test. Esta es escribir en el documento la palabra Buzz, que indicará si un número es múltiplo de 5. Luego, agregamos el operador : .

img8

Luego del operador : viene la expresión2 del tercer test. Como solo nos queda una condición, la cual es:

Cuando “un número no es múltiplo de 3 ni de 5. Si ninguna de las anteriores condiciones se cumple, el número se imprimirá por pantalla tal y como está”

Por consiguiente la expresión2 vendrá a ser escribir por pantalla la variable i.

img9

Si ejecutamos este código en el navegador, los números se escribirán de manera horizontal.

Sin título6

Para corregir esto, tendremos que colocar la etiqueta <br /> al final de cada texto dentro de las comillas, justo como lo hicimos en el anterior Fizz – Buzz con ciclo for e if’s.

img10

Agregando estas etiquetas <br />, ya tendremos nuestro código listo para ser ejecutado en el navegador. El resultado es el mismo que obtuvimos con el anterior Fizz- Buzz.

Sin título-1

Código de Fizz – Buzz con ciclo for y operadores condicionales ternarios (?:) (FINAL)

img11-final

for(var i = 1; i <= 100; i++) {
  i % 3 == 0 && i % 5 == 0 ? document.write("FizzBuzz<br />") : i % 3 == 0 ? document.write("Fizz<br />") : i % 5 == 0 ? document.write("Buzz<br />") : document.write(i + "<br />");
}

Estas son las dos formas de hacer el ejercicio FizzBuzz en JavaScript que he encontrado. Ahora tú comienza a hacer tu propio desarrollo de FizzBuzz en este o cualquier otro lenguaje de programación que tu desees.

Mándame por correo tu forma de resolver este ejercicio. Estaré atento a resolver cualquier duda que tengas acerca de FizzBuzz


Fuentes:

Mis redes:

Contacto:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s