5. Condicionales

5.3. Condicionales if, if-else

Comencemos por un ejemplo muy sencillo:

Figura 53. Estructura condicional
Fuente: elaboración propia.

Comenzamos definiendo una variable value y asignándole el valor 0. A continuación, en el draw(), creamos una estructura condicional en la que dibujamos un círculo únicamente cuando se cumple la condición de que el valor de variable value sea igual a 0. Veamos qué ocurre si cambiamos al principio el valor de la variable a cualquier otro que no sea 0:

Figura 54. Estructura condicional
Fuente: elaboración propia.

Ahora, al no cumplirse la condición de que value == 0, el código que pinta el círculo no se ejecuta nunca y por eso no lo vemos. Veamos con detalle la estructura condicional:

if (condición) {
    // Código a ejecutar si se cumple la condición
}

Siempre empezaremos utilizando la palabra clave if, seguida entre paréntesis de la condición que debe cumplirse. A continuación, entre llaves, el código que se ejecutará en caso de cumplirse la condición. La condición se evalúa y, en caso de que sea true, se ejecutara el código entre las llaves; en el caso de que sea false, no llegará a entrar en el cuerpo del if, de la misma manera que en los bucles for, y continuará la ejecución de manera normal.

Dentro del bloque entre llaves del if escribimos el código que se ejecutará si se cumple la condición, pero también podemos especificar código que se ejecute cuando no se cumpla la condición. Para ello, usaremos la palabra clave else de la siguiente manera:

if (condición) {
    // Código a ejecutar si se cumple la condición
} else {
    // Código a ejecutar si no se cumple la condición
}

Al cerrar el bloque del if escribimos a continuación la palabra clave else y abrimos otro bloque de llaves donde escribiremos el código que se ejecutará en el caso de que no se cumpla la condición definida en el if.

Veamos cómo funciona un condicional if-else continuando con el ejemplo visto anteriormente:

Figura 55. Estructura condicional if-else
Fuente: elaboración propia.
Ahora, como en el ejemplo anterior, tampoco entramos en el bloque de código del if, ya que 345 == 0 es false, pero sí que entramos en el bloque del else, pintando el cuadrado.

También podemos crear una estructura condicional que tenga cuenta distintas opciones, para lo que podemos encadenar varias estructuras if-else de la siguiente manera:

if (condición1) {
    // Código a ejecutar si se cumple la condición 1
} else if (condición2){
    // Código a ejecutar si se cumple la condición 2
} else {
    // Si no se cumple ninguna de las condiciones
}

Si justo a continuación de un else escribimos otro if, podemos concatenar varias condiciones. Estas estructuras son útiles cuando tenemos un número pequeño de opciones. Sin embargo, cuando el número de opciones empieza a crecer, quizá no sea la opción más limpia para nuestro código. Más adelante estudiaremos una alternativa para estos casos. De momento, utilicemos otro if en el ejemplo anterior para establecer una segunda condición:

Figura 56. Encadenando varias condiciones
Fuente: elaboración propia.

Ahora observamos que además de la primera condición value == 0 hemos añadido una nueva value == 1. Como ninguna de estas se cumple, saltamos a la línea 15 del código, a partir de la cual se dibuja el círculo rojo. Si cambiásemos el valor asignado al principio a la variable value, podríamos ver los cambios en nuestro sketch.