Ámbito estático

Curso de Clean Code y Buenas Prácticas con JavaScript

Contenido del curso

Introducción al Clean Code

Nombre y uso de las variables

Ámbito de las variables

Funciones

Clases

Optimizaciones

Cierre

24
Sigue aprendiendo JavaScript
00:55 min

Tomar examen

Ámbito estático

Jose Gabriel Argüello

Estudiante

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

Estudiante

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

Estudiante

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)

Á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