Variables globales y locales en JavaScript

Variables en JavaScript son esenciales para almacenar y procesar datos. Es importante entender dónde son válidas estas variables y a qué áreas de tu código pueden acceder. Dada la variedad de tipos de variables – globales y locales – es fundamental comprender el "scope" (ámbito de visibilidad). Vamos a profundizar y descubrir qué hay detrás de las variables globales y locales.

Conocimientos clave

• Las variables globales son accesibles en todo el código, mientras que las variables locales solo son visibles dentro de su función.
• Definir una variable fuera de una función la convierte en global, mientras que definirla dentro de una función la hace local.
• Para una estructura clara y mantenible del código, es beneficioso declarar variables globales al principio del script.

Guía paso a paso

Definición de variables y su visibilidad

En el primer paso, veremos cómo puedes crear una variable y qué significa su visibilidad. Si declaras una variable fuera de cualquier función, como se muestra en el siguiente ejemplo, esta es global.

Aquí creamos una variable global llamada meineVariable.

Creación de funciones con variables locales

A continuación, crearemos dos funciones. Llamaremos a una de las funciones localFunction, donde crearemos una variable local. Esta variable solo es visible dentro de la función. Vamos a definir nuestra función.

En localFunction, crearás una variable local localV con un valor de 5 y la mostrarás.

Llamando a las funciones

Ahora queremos llamar a localFunction para mostrar el número 5. Después de haber llamado a la función en el código, la salida será la siguiente:

Prueba de la visibilidad de las variables locales

Ahora intentaremos usar la variable local localV en otra función. Te darás cuenta de que esto no funciona. Vamos a hacer una llamada a otherFunction y ver qué pasa.

Recibiremos un error porque la variable localV solo es visible dentro de localFunction.

Verificación de errores en la consola

Para entender mejor por qué ocurre el error, examinaremos el código en la consola. Haciendo clic derecho y seleccionando "Inspeccionar", puedes abrir el explorador de DOM y la consola para analizar el error.

Allí se muestra que localV es undefined. Esto refuerza la suposición de que la variable no existe fuera de su función.

Definición de una variable global

Ahora crearemos una variable global que podamos usar en ambas funciones. Llamaremos a esta variable globalVariable y le daremos un valor de texto simple.

Ahora esta variable global puede ser llamada en ambas funciones, y la salida será la misma. Probemos una vez.

Definición de variables y orden de llamada

Es importante notar que el orden de las definiciones de variables y funciones es crucial. Si creas una variable global por debajo de su uso, esto provocará un problema de undefined.

Esto se debe a que la función que necesita la variable global la llama antes de su definición. Para evitar esto, es recomendable definir las variables globales al principio del código.

Más sobre variables locales y su uso

Ahora crearemos nuevamente una variable local en otra función. Aquí la llamaremos localVariable y estableceremos su valor en 12.

También podemos usar esta variable local, pero solo dentro de su propia función, no en otras. Si usas ambas variables locales, eso puede requerir paciencia y orden en tus programas, dependiendo de la complejidad.

Resumen de conceptos

Ahora has entendido los conceptos básicos sobre la visibilidad y el ámbito de las variables en JavaScript. Las variables globales son visibles para todas las funciones, mientras que las variables locales solo existen dentro de su función. Es recomendable definir las variables globales en un lugar central del código para mejorar la legibilidad y mantenibilidad.

Resumen – La visibilidad de las variables en JavaScript

En resumen, has aprendido que la manera en que defines las variables tiene un impacto directo en su visibilidad y ámbito. Siempre presta atención a dónde colocas tus variables para evitar errores.