Ámbito estático

Clase 11 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

Elcira Ibarra

student•

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

Ana Rotela Cabrera

student•

Que buen resumen, muchas gracias

Jose Gabriel Argüello

student•

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.

Irving Juárez

student•

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()
);

Stiven Trujillo

student•

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)

Tomás André Peñaloza Avilés

student•

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.

Aimee Rodríguez

student•

Para complementar un poco más lo que explicó la profesora, les dejo este video de otro profesor de Platzi:

Andrés Schuster

student•

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.

Javier Hernando Suarez Pachon

student•

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:

Stiven Trujillo

student•

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:

Ana Rotela Cabrera

student•

Resumen de la clase

Diego Martínez VIlla

student•

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.

Andres Felipe Bolaños Fernandez

student•

Excelente.

Diego Martínez VIlla

student•

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.

Johan Sebastian

student•

La edad es de 28

Luis Eduardo Payano Villar

student•

Sandra Rosa Arroyo Paredes

student•

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:

Definición: Se determina en el momento de la escritura del código, no durante la ejecución.
Anidamiento: Las funciones pueden acceder a variables de sus funciones contenedoras.
Búsqueda de variables:
- Comienza en el ámbito local actual.
- Si no se encuentra, busca en el ámbito exterior inmediato.
- Continúa hasta llegar al ámbito global.
Independencia de la ejecución: El ámbito de una función se mantiene sin importar dónde o cómo se llame.
Closures: Permite que las funciones mantengan acceso a variables de su ámbito de creación, incluso después de que la función contenedora haya terminado.
Shadowing: Variables con el mismo nombre en ámbitos internos "ocultan" las variables de ámbitos externos.
Predictibilidad: Hace que el comportamiento del código sea más predecible y fácil de entender.

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.

Miguel Prada

student•

pero no es que dentro de mainApp, age se sustituya, simplemente es que se está ejecutando printAge dentro de mainApp

Jose Ever Muñoz Muñoz

student•

La edad es de 28, lo descubri porque vscode marca en un tono mas oscuro las variables que no usamos jeje

Ulqernesh Karvenae

student•

Juliette Alexandra Lopez Coy

student•

Imprime: 28

Daniel Ochoa

student•

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.

Milagros Fortis

student•

Va a dar 28 porque declaramos la variable const al principio de todo y fuera del bloque

Kevin Giovanni Cano Blanco

student•

Yo digo que da error ya que se está re declarando la variable age

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

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

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()
);

Ámbito estático

Introducción al Clean Code

Deuda técnica y refactorización de código

Reglas del diseño simple

Qué es Clean Code

Nombre y uso de las variables

Uso correcto de var, let y const

Reglas para la nomenclatura

Cómo nombrar según el tipo de dato

Nombres de Variables y Funciones Correctos en JavaScript

Ámbito de las variables

Ámbito global

Ámbito local o de función

Ámbito de bloque

Ámbito estático

Hoisting

Funciones

Declaración y expresión de funciones

Parámetros y argumentos

Funciones de flecha y el this

Clases

POO con ES6 (constructores, métodos y herencia)

Herencia en JavaScript

Tamaño reducido (responsabilidad única)

Organización

Optimizaciones

Cuándo usar comentarios

Formato coherente (codear en equipos)

Principio DRY

Tipos de Algoritmos y Complejidad Big O en JavaScript

Cierre

Sigue aprendiendo JavaScript