Cómo declarar, interactuar y variables de alcance en JavaScript

Cómo declarar, interactuar y variables de alcance en JavaScript

Las variables son uno de los bloques fundamentales de cualquier lenguaje de programación, la forma en que cada lenguaje define cómo declaramos e interactuamos con las variables puede hacer o deshacer un lenguaje de programación. Esto significa que cada desarrollador debe ser capaz de comprender cómo trabajar eficazmente con variables, sus reglas y particularidades. En el tutorial de hoy, vamos a aprender cómo declarar, interactuar y abarcar variables en JavaScript. Introduciremos nuevos conceptos y palabras clave importantes de JavaScript como var, let y const. Entonces empecemos.

Declarando variables

Hoy en día, JavaScript tiene tres palabras clave diferentes para declarar una variable: var, let y, const. Cada uno tiene sus propias propiedades y particularidades. Comencemos haciendo una tabla de comparación simple de las tres palabras clave y luego profundicemos en los detalles.

No se preocupe si en este momento no está completamente seguro de lo que queremos decir con alcance, elevación o cualquiera de los otros atributos. Los cubriremos en detalle a continuación.

Alcance variable

El alcance en JavaScript se refiere al contexto (o porción) del código que determina la accesibilidad (visibilidad) de las variables. En JavaScript, tenemos dos tipos de alcance, local , y global. Aunque el alcance local puede tener diferentes significados.

Analicemos las definiciones dando algunos ejemplos de cómo funciona el alcance. Supongamos que define una variable message:

Como es de esperar la variable message utilizado en el console.log existiría y tendría el valor Hello World. No hay dudas, pero qué sucede si cambiamos un poco donde declaramos la variable:

Vaya, parece que lo rompimos, pero ¿por qué? Bueno el if La instrucción crea un ámbito de bloque local, y dado que utilizamos "const", la variable solo se declara para ese ámbito de bloque y no se puede acceder desde el exterior.

Hablemos un poco más sobre los ámbitos de bloque y función.

Alcance del bloque

Un bloque es básicamente una sección de código (cero o más declaraciones) que está delimitada por un par de llaves y opcionalmente puede etiquetarse.

Como ya discutimos el uso de let y const nos permite definir variables que viven dentro del alcance del bloque. A continuación, crearemos ejemplos muy similares usando diferentes palabras clave para generar nuevos ámbitos:

Expliquemos esto, ya que puede parecer un poco extraño al principio. En nuestro alcance externo, estábamos definiendo la variablex1con un valor de1. Luego creamos un nuevo alcance de bloque simplemente usando llaves, esto es extraño, pero totalmente legal dentro de JavaScript, y en este nuevo alcance, creamos una nueva variable (separada de la del alcance externo) también llamadax1. Pero no se confunda, esta es una variable completamente nueva, que solo estará disponible dentro de ese alcance.

El mismo ejemplo ahora con un alcance con nombre:

El ejemplo "while", pero no ejecute este código a continuación. Explicaré por qué pronto.

¿Puedes adivinar qué tiene de malo el código anterior? ¿Y qué pasaría si lo ejecutaras? Dejame explicar, x3 según lo declarado en el alcance externo se utiliza para la comparación while x3 === 1, normalmente dentro de la declaración while, podría reasignar x3 un nuevo valor y salga del bucle. Sin embargo, como estamos declarando un nuevox3 dentro del alcance del bloque, no podemos cambiar x3 desde el alcance externo más, y por lo tanto la condición "mientras" siempre se evaluará para true produciendo un bucle infinito que colgará su navegador, o si está utilizando un terminal para ejecutarlo en NodeJS imprimirá una gran cantidad de2.

Arreglar este código en particular podría ser complicado a menos que cambie el nombre de cualquiera de las variables.

Hasta ahora en nuestro ejemplo, utilizamos const, pero ocurriría exactamente el mismo comportamiento con let. Sin embargo, como vimos en nuestra tabla de comparación, la palabra clavevar es en realidad el alcance de la función, entonces, ¿qué significa para nuestros ejemplos? Bueno, echemos un vistazo:

¡Asombroso! A pesar de que declaramos de nuevo x4 dentro del alcance, cambió el valor a2tanto en el alcance interno como en el externo. Y esta es una de las diferencias más importantes entre let,constyvar y generalmente está sujeto (de una forma u otra) para preguntas de la entrevista.

Alcance de la función

El alcance de una función es en cierto modo también un alcance de bloque, así que let y constse comportaría de la misma manera que lo hicieron en nuestros ejemplos anteriores. Sin embargo, los ámbitos de función también encapsulan variables declaradas con var. Pero veamos que continuar con nuestro xn ejemplos:

const o let ejemplo:

Exactamente como lo esperábamos, y ahora con var:

En este escenario, 'var' funcionó de la misma manera que let y const. También:

Como podemos ver, var las declaraciones solo existen dentro de la función en la que se crearon y no se puede acceder desde el exterior. Pero hay más, como siempre JS ha ido evolucionando y se han creado nuevos tipos de ámbitos.

Alcance del módulo

Con la introducción de módulos en ES6, era importante que las variables en un módulo no afectaran directamente las variables en otros módulos. ¿Te imaginas un mundo donde la importación de módulos desde una biblioteca entraría en conflicto con tus variables? Ni siquiera JS es tan desordenado. Entonces, por definición, los módulos crean su propio alcance que encapsula todas las variables creadas con var,let o const, similar al alcance de la función.

Sin embargo, hay formas en que los módulos proporcionan para exportar variables para que se pueda acceder desde fuera del módulo, y eso ya lo cubrí en un artículo anterior: Una introducción a los módulos de JavaScript.

Hasta ahora hablamos de diferentes tipos de ámbitos locales, ahora vamos a sumergirnos en los ámbitos globales.

Alcance global

Una variable definida fuera de cualquier alcance de función, bloque o módulo tiene alcance global. Se puede acceder a las variables en el ámbito global desde cualquier lugar de la aplicación.

El alcance global a veces puede confundirse con el alcance del módulo, pero este no es el caso. Se puede utilizar una variable de alcance global en todos los módulos, aunque esto se considera una mala práctica y por buenas razones.

¿Cómo harías para declarar una variable global? Depende del contexto, es diferente en un navegador que en una aplicación NodeJS. En el contexto del navegador, puede hacer algo tan simple como:

O usando el objeto de ventana:

Hay algunas razones por las que quieres hacer algo como esto, sin embargo, siempre ten cuidado cuando lo hagas.

Ámbitos de anidamiento

Como probablemente ya haya adivinado, es posible anidar ámbitos, lo que significa que puede crear un ámbito dentro de otro ámbito, y es una práctica muy común. Simplemente agregue un if declaración dentro de una función. Entonces, veamos un ejemplo:

Alcance léxico

En cierto modo, ya hicimos uso del alcance léxico, aunque no sabíamos mucho al respecto. El alcance léxico simplemente significa que los otros ámbitos tienen acceso a las variables definidas en los ámbitos externos.

Veámoslo con un ejemplo:

Eso se ve más extraño de lo que es, así que vamos a explicarlo. La funciónouterScope declara una variablenamecon valorJuan y una función llamada innerScope. El último no declara ninguna variable para su propio alcance, pero hace uso de la variable name declarado en el alcance de la función externa.

Cuando outerScope()se llama devuelve una referencia a la innerScope función, que luego se llama desde el ámbito más externo. Al leer este código por primera vez, puede estar confundido sobre por qué innerScope haría console.log el valor Juan como lo llamamos desde el alcance global, o alcance del módulo, donde name No se declara.

La razón por la que esto funciona es gracias a los cierres de JavaScript. Los cierres son un tema en sí mismo y puedes leer más sobre esto en el MDN docs.

Elevación

La elevación en términos de JavaScript significa que se crea una variable en la memoria durante la fase de compilación y, por lo tanto, se puede usar antes de que se declare. Suena muy confuso, veamos mejor en código.

Así es como se vería un flujo normal:

Como se esperaba, eso funciona, pero ¿qué pensaría de lo siguiente?

Espera espera espera…. ¿Qué? Tan loco como suena, ya que la función se asigna a la memoria antes de que el código realmente se ejecute, la función hoistedDisplayName está disponible antes de su definición real, al menos en términos de líneas de código.

Las funciones tienen esta propiedad particular, pero también hacen variables declaradas convar. Veamos un ejemplo:

El hecho de que la variable se "cree" antes de su definición real en el código no significa que su valor ya esté asignado, es por eso que cuando hacemos el console.log(x8) no recibimos un error que indique que la variable no está declarada, sino que la variable tiene valor undefined. Muy interesante, pero que pasa si usamos let o const? Recuerde en nuestra tabla, no comparten esta propiedad.

Lanzó un error.

La elevación es una propiedad menos conocida de las variables de JavaScript, pero también es importante. Asegúrese de comprender las diferencias, es importante para su código y puede ser un tema para una pregunta de entrevista.

Reasignación de variables

Este tema cubre específicamente las variables declaradas con la palabra clave const. Una variable declarada con const no se puede reasignar, lo que significa que no podemos cambiar su valor por uno nuevo, pero hay un truco. Veamos algunos ejemplos:

Como esperábamos, no podemos cambiar el valor de una constante, ¿o sí?

¿Acabamos de cambiar el valor de un const ¿valor? La respuesta corta es no. Nuestra constante c2 hace referencia a un objeto con una propiedad name. c2 es una referencia a ese objeto, ese es su valor. Cuando hacemos c2.name realmente estamos tomando el puntero a la c2 objeto y acceder a la propiedad desde allí. Lo que estamos cambiando cuando lo hacemos c2.name es el valor de la propiedad name en el objeto, pero no la referencia almacenada en c2, y por lo tanto c2 permaneció constante aunque el valor de la propiedad ahora es diferente.

Vea lo que sucede cuando realmente intentamos actualizar el valor de manera diferente:

Aunque el objeto se ve igual, en realidad estamos creando un nuevo objeto { name: 'Gera' } e intentando asignar ese nuevo objeto a c3, pero no podemos como se declaró como constante.

Hoy cubrí el tema de las declaraciones de variables y el alcance en JavaScript. Es un tema muy importante que puede explicar muchas situaciones extrañas que suceden a nuestro código. Es una habilidad imprescindible para todos los desarrolladores de JavaScript.

Esta artículo fue publicado originalmente en Transmisión de código en vivo por Juan cruz martinez (gorjeo: @bajcmartinez), fundador y editor de Live Code Stream, emprendedor, desarrollador, autor, orador y hacedor de cosas.

Transmisión de código en vivo también está disponible como un boletín semanal gratuito. Regístrese para recibir actualizaciones sobre todo lo relacionado con la programación, la inteligencia artificial y la informática en general.

Pssst, ¡hola!

¿Desea recibir el boletín técnico diario más atrevido todos los días, en su bandeja de entrada, GRATIS? Por supuesto que sí: regístrate en Big Spam aquí.

Deja un comentario