3.2. Variables: reutilizar valores
Las variables son simplemente valores que se almacenan en la memoria del ordenador (¿alguna vez os habéis preguntado para qué sirve la memoria RAM de vuestro ordenador? Entre otras cosas, para almacenar variables de los programas que usáis) a los que podemos acceder más tarde en nuestros programas. Una misma variable puede utilizarse múltiples veces y, como su propio nombre indica, su valor puede cambiar a lo largo de la ejecución del programa.
Uno de los usos más inmediatos que podemos hacer de las variables es el de reutilizar su valor para aplicarlo varias veces en nuestro programa. Lo haríamos de la siguiente manera:
Fuente: elaboración propia.
En la figura 27 se observa en la primera línea la declaración let size = 75;, con la que estamos diciéndole a nuestro sketch que guarde en la memoria el valor 75 y que le dé como nombre size para que más adelante en nuestro código podamos hacer uso de este. Esto es precisamente lo que haremos dentro del draw(), donde hemos dibujado tres círculos y en lugar de escribir directamente 75 como parámetro para el ancho y alto de cada ellipse(), hemos utilizado nuestra variable size. Si ahora quisiéramos cambiar el tamaño de nuestros círculos, en lugar de tener que cambiar seis valores (dos por cada ellipse()), con que cambiemos el valor de nuestra variable será suficiente. Esta es una de las grandes ventajas de usar variables: nos permiten simplificar el código y hacen que sea más difícil cometer algún error (siempre es más fácil equivocarse si tenemos que teclear seis veces un valor, que si lo tenemos que hacer una única vez).
Profundicemos un poco en el proceso de creación de una variable:
let size = 75;
Lo primero que hacemos para crear una variable es usar la palabra clave let; a continuación, indicamos su nombre (size) y, por último, le asignamos su valor (75). La palabra clave let es relativamente nueva en Javascript y, por extensión, en P5. Hasta 2015, con la aparición de ES6 (el estándar que define Javascript desde 1996), la palabra clave que se utilizaba para crear variables era var. A efectos prácticos para nosotros, podemos utilizar indistintamente let o var, ya que ambas son reconocidas por el estándar actual y para nuestros casos de uso pueden ser intercambiables. Si queréis profundizar en las (pequeñas) diferencias entre let y var (y también const), tenéis en la sección «A fondo» un vídeo en el que las explican.
Podemos pensar en el uso de let para crear variables si pensamos en inglés: Let there be light (‘hágase la luz’), o en nuestro caso «Hágase el tamaño de nuestra elipse a 75».
Al crear nuestra variable con let size = 75; realmente estamos haciendo dos pasos en uno. Vamos a desgranarlos:
let size; // Declaramos la variable size = 75; // Le asignamos el valor 75
let size = 75; // Declaramos y asignamos en la misma línea
Normalmente, podemos usar el «atajo» declarando y asignando un valor a la variable en la misma línea, pero en ocasiones tendremos que declarar la variable (decirle al programa que reserve un espacio en la memoria) sin asignarle inmediatamente un valor, ya que este puede depender de otras operaciones que sucedan más adelante.
Es importante a la hora de escribir código que los nombres que les demos a nuestras variables sean lo más informativos posible con el fin de que sea más fácil saber qué es lo que está haciendo nuestro código:
let s = 200; // ¿A qué se refiere s? let circleSize = 200; // Mucho más informativo
También debemos tener en cuenta que los nombres que utilicemos deben ser únicos para cada variable, ya que de lo contrario nos podemos encontrar con errores inesperados en nuestro código.
Alcance (scope) de las variables
Cuando declaramos una variable, esta tiene un ámbito dentro del cual la podemos reutilizar. Si creamos una variable dentro del setup(), solo podremos acceder a esta dentro de la propia función y no dentro del draw(). Si declaramos la función fuera del setup() y el draw(), estaremos creando lo que se llama una variable «global» a la que podremos acceder tanto desde el setup() como desde el draw().
// Este sketch dará un error al ejecutarse
function setup() {
createCanvas(400, 400);
let size = 50; // Variable local del setup()
}
function draw() {
ellipse(100, 100, size, size); // Error, el draw() no sabe qué es size
}
// Este otro sketch sí funcionará
let size = 50; // Variable global
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(100, 100, size, size);
// Al ser size global, podemos usarla tanto
// en el setup como en el draw
}