Variables Locales y Globales (Versión en Video)

Ahora que has dominado los fundamentos de las funciones, quiero hablar de un tema que puede ser un poco complicado: la diferencia entre variables locales y globales.

Puede ser que por ahora estos términos no signifiquen nada para ti. Así que empecemos con un ejemplo.

Escribí este programa para mostrarte cuántas pulgadas crecí en mi infancia.

Dado que los seres humanos crecen a ritmos diferentes, se me ocurrió esta función, "calcInches",

donde puedo pasarle una "startAge" (edad inicial), una "endAge" (edad final), y una "inchesPerYear" (pulgadas por año),

y luego la función calculará cuántas pulgadas crecí durante ese tiempo.

... y regresará el resultado a quien haya llamado la función.

Entonces puedes ver aquí desde 0 hasta 8 años, llamo la función "calcInches" y le paso 0, 8 y 2.5,

porque crecí alrededor de 2.5 pulgadas por año.

Hace el cálculo y como puedes ver, arroja 20.

Luego desde 8 hasta 16, llamo la función y paso 8, 16 y luego 2.

Porque no crecí tanto, y puedes ver que arroja un resultado de 16.

Esto se ve muy bien pero ahora quiero mostrar en realidad cuántas pulgadas crecí en total en toda mi infancia.

Así que ¿cómo hago eso? Bueno podría empezar por mirar mi código y decir mmm..., ¿qué valores tengo aquí?

¿Tengo alguna cosa que parezca representar el total de pulgadas?

Bueno, tengo esta variable "totalInches" (pulgadas totales) dentro de mi función "calcInches",

Así que podría desplegar eso y ver qué dice; podría empezar por ahí.

Digamos entonces "text(totalInches, 10, 200)" y lo ponemos aquí abajo.

Muy bien, vamos a ver qué obtenemos con esto. Oh, o-oh, obtuvimos al chico de los ¡Oh no! Y dice que hay un problema.

"totalInches" no está definida. Bueno, eso es extraño porque definimos "totalInches" justo aquí, ¿cierto? "var totalInches =".

Bueno, el problema es que declaramos "totalInches" dentro de una función. En esta línea de aquí.

Y cuando definimos una variable dentro de una función, es considerada como una variable local.

Sólo es válida dentro de esta función (calcInches).

Y el código que está fuera de la función, todo esto, no ve las variables locales que están dentro de las funciones.

Sólo ve lo que le regresan.

Sólo ve ese valor, no esa variable.

Así que cuando tratamos de usar "totalInches" fuera de la función, el programa no sabe qué es eso,

Y dice: "Hey, no he visto esta variable antes. No está definida. No puedo desplegarla."

Entonces hay una manera en que podemos hacer que el código que está fuera de la función pueda ver esta variable.

Y es cambiando esta variable local en una variable global.

Podemos hacer eso moviendo la definición de la variable fuera de la función, en lo que se llama el entorno global.

Y ahora, dentro de la función, todo lo que estamos haciendo es cambiar su valor cada vez, no definiéndola ni declarándola.

Así que podemos ver que aquí dice "Total grown over life: 16" (Crecimiento total en la vida: 16)

Entonces el programa encontró la variable porque la hicimos variable global.

Pero este no es el valor que estamos buscando en realidad.

Es sólo el valor más reciente.

Y eso es porque cada vez que llamamos esta función, se asigna a "totalInches" el último resultado calculado, ¿correcto?

Entonces lo que realmente necesitamos hacer es un nueva variable

que usemos solamente para almacenar el total que se vaya sumando cada vez que calculamos ... el total para un rango.

Así que vamos a cambiar otra vez esta variable para hacerla local, y hacer una nueva variable global que llamaremos "lifeInches".

Y la inicializamos en 0.

Y luego dentro de la función, sumaremos a esta variable global "lifeInches += totalInches".

Así que vamos a sumar lo que calculemos cada vez que llamamos esta función,

lo vamos a sumar a la variable global "lifeInches".

Y luego en la parte de abajo, desplegaremos la variable lifeInches: "text(lifeInches, 10, 200)".

¡Tan tan! nuestro crecimiento total en la vida.

En realidad esta no es mi estatura. Soy más alta que eso.

Pero eso es porque cuando nacemos medimos más de 0 pulgadas.

Así que si quiero el total, podría comenzar en 20.

Y eso es todo, ésta es mi estatura.

Muy bien. Revisemos, "totalInches" es lo que llamamos una variable local.

Y sabemos eso porque vemos que la declaración de la variable está dentro de la función, y no fuera de la función.

Y eso significa que el código que está aquí afuera de la función no reconoce esta variable llamada "totalInches".

Ahora, "lifeInches" es lo que llamamos una variable global.

Y sabemos eso porque vemos que la declaración de esta variable está fuera de cualquier función, en nuestro entorno global.

Así que trata de tener esto en mente cuando escribas tus funciones y tus variables.

Y piensa si quieres tener una variable local para usar en una función,

o una variable global para usar en todo el programa.

Y no te preocupes si te cuesta trabajo.

Es uno de los conceptos más difíciles de la programación, en JavaScript en particular.

Y es algo que harás mejor mientras más lo practiques.