3.2. Variables: reutilitzar valors
Les variables són simplement valors que s’emmagatzemen a la memòria de l’ordinador (alguna vegada us heu preguntat per què serveix la memòria RAM del vostre ordinador? Entre altres coses, per emmagatzemar variables dels programes que useu) als quals podem accedir més tard en els nostres programes. Una mateixa variable es pot utilitzar múltiples vegades i, com el seu propi nom indica, el seu valor pot canviar durant l’execució del programa.
Un dels usos més immediats que podem fer de les variables és el de reutilitzar el seu valor per aplicar-lo diverses vegades en el nostre programa. Ho faríem de la manera següent:
Font: elaboració pròpia.
A la figura 27 s’observa a la primera línia la declaració let size = 75;, amb la qual estem dient al nostre sketch que guardi a la memòria el valor 75 i que li posi com a nom size perquè més endavant en el nostre codi puguem fer-ne ús. Això és precisament el que farem dins del draw(), on hem dibuixat tres cercles i en lloc d’escriure directament 75 com a paràmetre per a l’amplària i alçària de cada ellipse(), hem utilitzat la nostra variable size. Si ara volguéssim canviar la mida dels nostres cercles, en lloc d’haver de canviar sis valors (dos per cada ellipse()), n’hi haurà prou amb canviar el valor de la nostra variable. Aquest és un dels grans avantatges d’usar variables: ens permeten simplificar el codi i fan que sigui més difícil cometre algun error (sempre és més fàcil equivocar-se si hem de teclejar sis vegades un valor, que si ho hem de fer una sola vegada).
Aprofundim una mica en el procés de creació d’una variable:
let size = 75;
El primer que fem per crear una variable és usar la paraula clau let; a continuació, indiquem el seu nom (size) i, finalment, li assignem el seu valor (75). La paraula clau let és relativament nova a JavaScript i, per extensió, a P5. Fins al 2015, amb l’aparició d’ES6 (l’estàndard que defineix JavaScript des de 1996), la paraula clau que s’utilitzava per crear variables era var. A efectes pràctics per a nosaltres, podem utilitzar indistintament let o var, ja que ambdues són reconegudes per l’estàndard actual i per als nostres casos d’ús poden ser intercanviables. Si voleu aprofundir en les (petites) diferències entre let i var (i també const), teniu a la secció «A fons» un vídeo en el qual les expliquen.
Podem pensar en l’ús de let per crear variables si pensem en anglès: Let there be light (‘faci’s la llum’), o en el nostre cas «Faci’s la grandària de la nostra el·lipse a 75».
En crear la nostra variable amb let size = 75; realment estem fent dos passos en un. Els desgranarem:
let size; // Declarem la variable size = 75; // Li assignem el valor 75
let size = 75; // Declarem i assignem en la mateixa línia
Normalment, podem usar la «drecera» declarant i assignant un valor a la variable en la mateixa línia, però a vegades haurem de declarar la variable (dir al programa que reservi un espai a la memòria) sense assignar-li immediatament un valor, ja que aquest pot dependre d’altres operacions que succeeixin més endavant.
És important a l’hora d’escriure codi que els noms que els donem a les nostres variables siguin el més informatius possible, amb la finalitat que sigui més fàcil saber què és el que està fent el nostre codi:
let s = 200; // A què es refereix s? let circleSize = 200; // Molt més informatiu
També hem de tenir en compte que els noms que utilitzem han de ser únics per a cada variable, ja que en cas contrari ens podem trobar amb errors inesperats en el nostre codi.
Abast (scope) de les variables
Quan declarem una variable, aquesta té un àmbit dins del qual la podem reutilitzar. Si creem una variable dins del setup(), només podrem accedir-hi dins de la pròpia funció i no dins del draw(). Si declarem la funció fora del setup() i el draw(), estarem creant el que es diu una variable «global» a la qual podrem accedir tant des del setup() com des del draw().
// Aquest sketch donarà un error en executar-se
function setup() {
createCanvas(400, 400);
let size = 50; // Variable local del setup()
}
function draw() {
ellipse(100, 100, size, size); // Error, el draw() no sap què és size
}
// Aquest altre sketch sí que funcionarà
let size = 50; // Variable global
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(100, 100, size, size);
// En ser size global, la podem usar tant
// en el setup com en el draw
}