WEBVTT 00:00:00.764 --> 00:00:11.532 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. 00:00:11.532 --> 00:00:16.096 Puede ser que por ahora estos términos no signifiquen nada para ti. Así que empecemos con un ejemplo. 00:00:16.096 --> 00:00:20.569 Escribí este programa para mostrarte cuántas pulgadas crecí en mi infancia. 00:00:20.569 --> 00:00:24.562 Dado que los seres humanos crecen a ritmos diferentes, se me ocurrió esta función, "calcInches", 00:00:24.562 --> 00:00:29.821 donde puedo pasarle una "startAge" (edad inicial), una "endAge" (edad final), y una "inchesPerYear" (pulgadas por año), 00:00:29.821 --> 00:00:34.527 y luego la función calculará cuántas pulgadas crecí durante ese tiempo. 00:00:34.527 --> 00:00:37.572 ... y regresará el resultado a quien haya llamado la función. 00:00:37.572 --> 00:00:44.969 Entonces puedes ver aquí desde 0 hasta 8 años, llamo la función "calcInches" y le paso 0, 8 y 2.5, 00:00:44.969 --> 00:00:48.737 porque crecí alrededor de 2.5 pulgadas por año. 00:00:48.737 --> 00:00:52.363 Hace el cálculo y como puedes ver, arroja 20. 00:00:52.363 --> 00:00:57.519 Luego desde 8 hasta 16, llamo la función y paso 8, 16 y luego 2. 00:00:57.519 --> 00:01:02.053 Porque no crecí tanto, y puedes ver que arroja un resultado de 16. 00:01:02.053 --> 00:01:08.462 Esto se ve muy bien pero ahora quiero mostrar en realidad cuántas pulgadas crecí en total en toda mi infancia. 00:01:08.462 --> 00:01:17.050 Así que ¿cómo hago eso? Bueno podría empezar por mirar mi código y decir mmm..., ¿qué valores tengo aquí? 00:01:17.050 --> 00:01:21.012 ¿Tengo alguna cosa que parezca representar el total de pulgadas? 00:01:21.012 --> 00:01:26.038 Bueno, tengo esta variable "totalInches" (pulgadas totales) dentro de mi función "calcInches", 00:01:26.038 --> 00:01:30.820 Así que podría desplegar eso y ver qué dice; podría empezar por ahí. 00:01:30.820 --> 00:01:36.440 Digamos entonces "text(totalInches, 10, 200)" y lo ponemos aquí abajo. 00:01:36.440 --> 00:01:43.457 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. 00:01:43.457 --> 00:01:51.816 "totalInches" no está definida. Bueno, eso es extraño porque definimos "totalInches" justo aquí, ¿cierto? "var totalInches =". 00:01:51.816 --> 00:01:59.731 Bueno, el problema es que declaramos "totalInches" dentro de una función. En esta línea de aquí. 00:01:59.731 --> 00:02:04.925 Y cuando definimos una variable dentro de una función, es considerada como una variable local. 00:02:04.925 --> 00:02:09.736 Sólo es válida dentro de esta función (calcInches). 00:02:09.736 --> 00:02:15.013 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. 00:02:15.013 --> 00:02:18.824 Sólo ve lo que le regresan. 00:02:18.824 --> 00:02:21.824 Sólo ve ese valor, no esa variable. 00:02:21.824 --> 00:02:26.368 Así que cuando tratamos de usar "totalInches" fuera de la función, el programa no sabe qué es eso, 00:02:26.368 --> 00:02:31.345 Y dice: "Hey, no he visto esta variable antes. No está definida. No puedo desplegarla." 00:02:31.345 --> 00:02:37.609 Entonces hay una manera en que podemos hacer que el código que está fuera de la función pueda ver esta variable. 00:02:37.609 --> 00:02:42.978 Y es cambiando esta variable local en una variable global. 00:02:42.978 --> 00:02:50.396 Podemos hacer eso moviendo la definición de la variable fuera de la función, en lo que se llama el entorno global. 00:02:50.396 --> 00:02:58.655 Y ahora, dentro de la función, todo lo que estamos haciendo es cambiar su valor cada vez, no definiéndola ni declarándola. 00:02:58.655 --> 00:03:03.224 Así que podemos ver que aquí dice "Total grown over life: 16" (Crecimiento total en la vida: 16) 00:03:03.224 --> 00:03:06.648 Entonces el programa encontró la variable porque la hicimos variable global. 00:03:06.648 --> 00:03:09.995 Pero este no es el valor que estamos buscando en realidad. 00:03:09.995 --> 00:03:11.712 Es sólo el valor más reciente. 00:03:11.712 --> 00:03:18.429 Y eso es porque cada vez que llamamos esta función, se asigna a "totalInches" el último resultado calculado, ¿correcto? 00:03:18.429 --> 00:03:22.230 Entonces lo que realmente necesitamos hacer es un nueva variable 00:03:22.230 --> 00:03:29.413 que usemos solamente para almacenar el total que se vaya sumando cada vez que calculamos ... el total para un rango. 00:03:29.413 --> 00:03:38.378 Así que vamos a cambiar otra vez esta variable para hacerla local, y hacer una nueva variable global que llamaremos "lifeInches". 00:03:38.378 --> 00:03:41.004 Y la inicializamos en 0. 00:03:41.004 --> 00:03:49.976 Y luego dentro de la función, sumaremos a esta variable global "lifeInches += totalInches". 00:03:49.976 --> 00:03:53.266 Así que vamos a sumar lo que calculemos cada vez que llamamos esta función, 00:03:53.266 --> 00:03:56.403 lo vamos a sumar a la variable global "lifeInches". 00:03:56.403 --> 00:03:59.867 Y luego en la parte de abajo, desplegaremos la variable lifeInches: "text(lifeInches, 10, 200)". 00:03:59.867 --> 00:04:03.838 ¡Tan tan! nuestro crecimiento total en la vida. 00:04:03.838 --> 00:04:06.691 En realidad esta no es mi estatura. Soy más alta que eso. 00:04:06.691 --> 00:04:10.509 Pero eso es porque cuando nacemos medimos más de 0 pulgadas. 00:04:10.509 --> 00:04:13.484 Así que si quiero el total, podría comenzar en 20. 00:04:13.484 --> 00:04:17.265 Y eso es todo, ésta es mi estatura. 00:04:17.265 --> 00:04:22.067 Muy bien. Revisemos, "totalInches" es lo que llamamos una variable local. 00:04:22.067 --> 00:04:27.499 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. 00:04:27.499 --> 00:04:33.288 Y eso significa que el código que está aquí afuera de la función no reconoce esta variable llamada "totalInches". 00:04:33.288 --> 00:04:37.816 Ahora, "lifeInches" es lo que llamamos una variable global. 00:04:37.816 --> 00:04:42.839 Y sabemos eso porque vemos que la declaración de esta variable está fuera de cualquier función, en nuestro entorno global. 00:04:42.839 --> 00:04:47.024 Así que trata de tener esto en mente cuando escribas tus funciones y tus variables. 00:04:47.024 --> 00:04:51.370 Y piensa si quieres tener una variable local para usar en una función, 00:04:51.370 --> 00:04:54.646 o una variable global para usar en todo el programa. 00:04:54.646 --> 00:04:57.564 Y no te preocupes si te cuesta trabajo. 00:04:57.564 --> 00:05:01.674 Es uno de los conceptos más difíciles de la programación, en JavaScript en particular. 00:05:01.674 --> 00:05:05.674 Y es algo que harás mejor mientras más lo practiques.