Ámbito estático
Contenido del curso
Ámbito estático
Contenido del curso
Elcira Ibarra
Ana Rotela Cabrera
Jose Gabriel Argüello
Irving Juárez
Stiven Trujillo
Tomás André Peñaloza Avilés
Aimee Rodríguez
Andrés Schuster
Javier Hernando Suarez Pachon
Stiven Trujillo
Ana Rotela Cabrera
Diego Martínez VIlla
Andres Felipe Bolaños Fernandez
Diego Martínez VIlla
Johan Sebastian
Luis Eduardo Payano Villar
Sandra Rosa Arroyo Paredes
Miguel Prada
Jose Ever Muñoz Muñoz
Ulqernesh Karvenae
Juliette Alexandra Lopez Coy
Daniel Ochoa
Milagros Fortis
Kevin Giovanni Cano Blanco
JavaScript el ámbito de las variables tiene un comportamiento por defecto estático, esto quiere decir que se determina en tiempo de compilación y no de ejecución, a ésto se le llama ámbito léxico. No importa desde dónde se llame a la función, siempre va a dar como resultado el primer valor que se le definió a una variable. Ejemplo:
const age = 28; function printAge() { console.log(age); } function mainApp() { const age = 26; printAge(); } mainApp(); // output es: 28, que es el primer valor que se le definió a la variable age
Que buen resumen, muchas gracias
no entiendo bien este punto, creo que da este resultado por los scopes ( global y local ) de la definición de variables, ( como indican otros comentarios), buscando encontré este ejemplo de ámbito léxico o estático , que esta relacionado a closures ( ver curso de Oscar Barajas),
function createCounter() { let count = 0; function increment() { count++; console.log(count); } function decrement() { count--; console.log(count); } return { increment, decrement }; } const counter = createCounter(); counter.increment(); // Output: 1 counter.increment(); // Output: 2 counter.decrement(); // Output: 1
En este ejemplo se crea la funcion createCounter(), que define dos funciones internas : increment() y decrement(), que aumentan o decrementan un contador count cuyo valor capturado .El ámbito estático (también conocido como ámbito léxico) nos permite que la función counter capture el valor de la variable count definida en createCounter(). Cuando se almacena el resultado de createCounter() en la variable counter, se está almacenando un objeto que tiene las funciones internas y la variable count encapsuladas en un closure. Esto permite que cuando se llama a los métodos increment() y decrement() de counter, se acceda al valor actual de count y se actualice su valor en consecuencia.
Por lo tanto, el ámbito estático en este caso nos permite que las funciones internas increment() y decrement() "capturen" el valor de la variable count definida en su ámbito léxico y lo mantengan disponible en el tiempo, incluso después de que createCounter() haya terminado de ejecutarse.
Me parece que es un buen ejemplo para Closure en JS. Sin embargo este código se puede mejorar usando Constructor Functions, que no es más que la implementación de las "clases" antes de ECS6.
function CreateCounter(counterValue = 0) { this.counter = counterValue; } CreateCounter.prototype.increment = function () { this.counter++; return this.counter; }; CreateCounter.prototype.decrement = function () { this.counter--; return this.counter; }; const counter = new CreateCounter(); console.log( // Output: 1 counter.increment() ); console.log( // Output: 2 counter.increment() ); console.log( // Output: 1 counter.decrement() );
Si logras ver las dos diferencias, en el de la clase la funcion se definio fuera, y en el tuyo dentro de la misma funcion que lo utiliza por eso conserva o utiliza ese valor (closures)
Pero JS no es un lenguaje compilado!! Cómo es posible que tenga ámbito léxico? ---
Si te preguntaste lo mismo que yo, déjame explicarte que incluso los lenguajes interpretados, como JavaScript, pasan por un proceso de compilación, aunque este suele ser más transparente y ocurre justo antes de la ejecución.
JavaScript utiliza un modelo de compilación conocido como Just-in-Time (JIT). En este modelo, el código fuente de JavaScript se compila en bytecode o máquina virtual justo antes de ser ejecutado.
Incluso en lenguajes interpretados como JavaScript, el ámbito de las variables se puede determinar durante la fase de compilación JIT, antes de que el código se ejecute realmente. Esto significa que el motor de JavaScript analiza la estructura del código y decide qué variables están disponibles en cada parte del código sin necesidad de ejecutarlo.
Para complementar un poco más lo que explicó la profesora, les dejo este video de otro profesor de Platzi:
El código imprimirá 28 en lugar de 26. Esto se debe a que la variable 'age' que se imprime en la función 'printAge()' es la variable global que se declaró fuera de cualquier función con el valor de 28. La variable 'age' declarada dentro de la función 'mainApp()' tiene un alcance limitado solo a la función 'mainApp()' y no afecta al valor de la variable global.
El ámbito de una variable se refiere al alcance en el que se puede acceder y utilizar la variable en un programa. En JavaScript, existen dos tipos de ámbito: el ámbito global y el ámbito local. El ámbito global se refiere a cualquier variable que se declare fuera de cualquier función y está disponible para ser utilizada en todo el programa. El ámbito local se refiere a cualquier variable que se declare dentro de una función y solo está disponible dentro de esa función.
El ámbito de una variable determina si se puede acceder y modificar la variable en diferentes partes del programa. En el ejemplo anterior, la variable global 'age' se puede acceder y utilizar en cualquier parte del programa, mientras que la variable local 'age' solo se puede acceder y utilizar dentro de la función 'mainApp()'. Cuando se llama a la función 'printAge()', se accede a la variable global 'age' en lugar de la variable local 'age' que se declaró dentro de la función 'mainApp()'. Por lo tanto, el valor impreso será 28.
En un entorno mas profesional, no tanto de ejecuciones locales, por ejemplo el navegador, el ejercicio de declarar dos veces la variable const age, no lo permite:
Para uso de un cambio del valor de la variable, (por ejemplo por cambios de valor segun reglas de producto/negocio), recomiendo el uso de let:
Lo primero que mencionas no es verdad, justo por lo que mencionan de que const es de scope de bloque, no sé como lograste sacar ese error pero funciona sin problema en node como navegador:
Resumen de la clase
const age = 28; function printAge() { console.log(age); } function mainApp() { const age = 26; printAge(); } mainApp()
Para mi esta explicación fue lo que me hizo entender lo que pasa.
Al llamar a mainApp(), la función printAge() se ejecuta, y ++como la variable age se busca en el ámbito léxico de la función printAge(), se encuentra la variable age definida en el alcance global++ (fuera de cualquier función), ++y no la variable age definida dentro de mainApp()++.
Por lo tanto, se imprime el valor 28, que es el valor de la variable age definida fuera de las funciones.
Excelente.
Cuando se llama a la función, JavaScript busca las variables y funciones dentro de ese ámbito léxico y, si no se encuentran allí, busca en el ámbito léxico superior, que es el ámbito que contiene la función actual. Si aún no se encuentra la variable o función, JavaScript continúa buscando en ámbitos superiores hasta llegar al alcance global, que es el alcance más amplio y general en el que se definen todas las variables y funciones globales.
En resumen, el ámbito léxico en JavaScript es relativo a la función que se está ejecutando en un momento dado, y determina el alcance y la accesibilidad de las variables y funciones definidas dentro de esa función.
Si queremos controlar esto es cuando enviamos el dato que queremos como argumento de la función.
La edad es de 28
El ámbito léxico, también conocido como ámbito estático, se refiere a cómo se determina la accesibilidad de las variables en JavaScript basándose en la ubicación de las declaraciones en el código fuente.
Puntos clave:
Este concepto es fundamental para entender cómo JavaScript maneja la visibilidad y accesibilidad de las variables, y es crucial para trabajar efectivamente con funciones, especialmente en situaciones que involucran funciones anidadas y closures.
pero no es que dentro de mainApp, age se sustituya, simplemente es que se está ejecutando printAge dentro de mainApp
La edad es de 28, lo descubri porque vscode marca en un tono mas oscuro las variables que no usamos jeje
28
Imprime: 28
El nombramiento de la variable edad el correcto seria myAge ya que debemos ser muy específicos en el uso del dato y si quedemos pasar la misma idea que se expresa en el video.
Va a dar 28 porque declaramos la variable const al principio de todo y fuera del bloque
Yo digo que da error ya que se está re declarando la variable age
