{"id":366,"date":"2022-10-04T14:43:33","date_gmt":"2022-10-04T12:43:33","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=366"},"modified":"2022-11-12T14:13:41","modified_gmt":"2022-11-12T12:13:41","slug":"3-2-variables-reutilizar-valores","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/3-2-variables-reutilizar-valores\/","title":{"rendered":"3.2. Variables: reutilizar valores"},"content":{"rendered":"

Las variables son simplemente valores que se almacenan en la memoria del ordenador (\u00bfalguna vez os hab\u00e9is preguntado para qu\u00e9 sirve la memoria RAM de vuestro ordenador? Entre otras cosas, para almacenar variables de los programas que us\u00e1is) a los que podemos acceder m\u00e1s tarde en nuestros programas. Una misma variable puede utilizarse m\u00faltiples veces y, como su propio nombre indica, su valor puede cambiar a lo largo de la ejecuci\u00f3n del programa.<\/p>\n

Uno de los usos m\u00e1s inmediatos que podemos hacer de las variables es el de reutilizar su valor para aplicarlo varias veces en nuestro programa. Lo har\u00edamos de la siguiente manera:<\/p>\n

\"\"
Figura 27. Variables
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

En la figura 27 se observa en la primera l\u00ednea la declaraci\u00f3n let size = 75;<\/span>, con la que estamos dici\u00e9ndole a nuestro sketch<\/em> que guarde en la memoria el valor 75 y que le d\u00e9 como nombre size<\/span> para que m\u00e1s adelante en nuestro c\u00f3digo podamos hacer uso de este. Esto es precisamente lo que haremos dentro del draw()<\/span>, donde hemos dibujado tres c\u00edrculos y en lugar de escribir directamente 75 como par\u00e1metro para el ancho y alto de cada ellipse()<\/span>, hemos utilizado nuestra variable size<\/span>. Si ahora quisi\u00e9ramos cambiar el tama\u00f1o de nuestros c\u00edrculos, en lugar de tener que cambiar seis valores (dos por cada ellipse()<\/span>), con que cambiemos el valor de nuestra variable ser\u00e1 suficiente. Esta es una de las grandes ventajas de usar variables: nos permiten simplificar el c\u00f3digo y hacen que sea m\u00e1s dif\u00edcil cometer alg\u00fan error (siempre es m\u00e1s f\u00e1cil equivocarse si tenemos que teclear seis veces un valor, que si lo tenemos que hacer una \u00fanica vez).<\/p>\n

Profundicemos un poco en el proceso de creaci\u00f3n de una variable:<\/p>\n

let size = 75;<\/pre>\n
Lo primero que hacemos para crear una variable es usar la palabra clave let<\/span>; a continuaci\u00f3n, indicamos su nombre (size<\/span>) y, por \u00faltimo, le asignamos su valor (75). La palabra clave let<\/span> es relativamente nueva en Javascript y, por extensi\u00f3n, en P5. Hasta 2015, con la aparici\u00f3n de ES6 (el est\u00e1ndar que define Javascript desde 1996), la palabra clave que se utilizaba para crear variables era var<\/span>. A efectos pr\u00e1cticos para nosotros, podemos utilizar indistintamente let<\/span> o var<\/span>, ya que ambas son reconocidas por el est\u00e1ndar actual y para nuestros casos de uso pueden ser intercambiables. Si quer\u00e9is profundizar en las (peque\u00f1as) diferencias entre let<\/span> y var<\/span> (y tambi\u00e9n const<\/span>), ten\u00e9is en la secci\u00f3n \u00abA fondo\u00bb un v\u00eddeo en el que las explican.<\/p>\n
Podemos pensar en el uso de let<\/span> para crear variables si pensamos en ingl\u00e9s: Let there be light <\/em>(\u2018h\u00e1gase la luz\u2019), o en nuestro caso \u00abH\u00e1gase el tama\u00f1o de nuestra elipse a 75\u00bb.<\/p>\n
Al crear nuestra variable con let size = 75;<\/span> realmente estamos haciendo dos pasos en uno. Vamos a desgranarlos:<\/p>\n
let size; \/\/ Declaramos la variable\r\nsize = 75; \/\/ Le asignamos el valor 75<\/pre>\n
let size = 75; \/\/ Declaramos y asignamos en la misma l\u00ednea<\/pre>\n
Normalmente, podemos usar el \u00abatajo\u00bb declarando<\/strong> y asignando <\/strong>un valor a la variable en la misma l\u00ednea, 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\u00e1s adelante.<\/p>\n
Es importante a la hora de escribir c\u00f3digo que los nombres que les demos a nuestras variables sean lo m\u00e1s informativos posible con el fin de que sea m\u00e1s f\u00e1cil saber qu\u00e9 es lo que est\u00e1 haciendo nuestro c\u00f3digo:<\/p>\n
let s = 200; \/\/ \u00bfA qu\u00e9 se refiere s?\r\nlet circleSize = 200; \/\/ Mucho m\u00e1s informativo<\/pre>\n
Tambi\u00e9n debemos tener en cuenta que los nombres que utilicemos deben ser \u00fanicos para cada variable, ya que de lo contrario nos podemos encontrar con errores inesperados en nuestro c\u00f3digo.<\/p>\n
Alcance (scope<\/em>) de las variables<\/h3>\n
Cuando declaramos una variable, esta tiene un \u00e1mbito dentro del cual la podemos reutilizar. Si creamos una variable dentro del setup()<\/span>, solo podremos acceder a esta dentro de la propia funci\u00f3n y no dentro del draw()<\/span>. Si declaramos la funci\u00f3n fuera del setup()<\/span> y el draw()<\/span>, estaremos creando lo que se llama una variable \u00abglobal\u00bb a la que podremos acceder tanto desde el setup()<\/span> como desde el draw()<\/span>.<\/p>\n
\/\/ Este sketch dar\u00e1 un error al ejecutarse\r\nfunction setup() {\r\n   createCanvas(400, 400);\r\n   let size = 50; \/\/ Variable local del setup()\r\n}\r\n\r\nfunction draw() {\r\nellipse(100, 100, size, size); \/\/ Error, el draw() no sabe qu\u00e9 es size\r\n}<\/pre>\n
\/\/ Este otro sketch s\u00ed funcionar\u00e1\r\nlet size = 50; \/\/ Variable global\r\nfunction setup() {\r\n   createCanvas(400, 400);\r\n}\r\n\r\nfunction draw() {\r\n   ellipse(100, 100, size, size);\r\n   \/\/ Al ser size global, podemos usarla tanto\r\n   \/\/ en el setup como en el draw\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Las variables son simplemente valores que se almacenan en la memoria del ordenador (\u00bfalguna vez os hab\u00e9is preguntado para qu\u00e9 sirve la memoria RAM de vuestro ordenador? Entre otras cosas, para almacenar variables de los programas que us\u00e1is) a los que podemos acceder m\u00e1s tarde en nuestros programas. Una misma variable puede utilizarse m\u00faltiples veces […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/366"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=366"}],"version-history":[{"count":4,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/366\/revisions"}],"predecessor-version":[{"id":694,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/366\/revisions\/694"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}