En JavaScript, la gente a menudo confunde las cláusulas con el ámbito léxico.

El ámbito léxico es una parte importante de las cláusulas, pero no es una cláusula en sí mismo.

Las cláusulas son un concepto avanzado y un tema frecuente en entrevistas técnicas.

Debes tener un conocimiento básico de las funciones antes de intentar entender las cláusulas.

Después de leer este artículo, espero haberte ayudado a aprender lo siguiente:

  • La diferencia entre ámbito léxico y cláusulas.
  • Por qué las cláusulas requieren un ámbito léxico.
  • Cómo dar un ejemplo de cláusulas durante una entrevista de trabajo.

¿Qué es el ámbito léxico en JavaScript?

El ámbito léxico describe cómo las funciones anidadas (también conocidas como "secundarias") tienen acceso a las variables definidas en los ámbitos de sus padres.

const miFuncion = () => {
     let miValor = 2;
     console.log(miValor);

     const funcionHija = () => {
          console.log(miValor += 1);
     }

     funcionHija();
}

miFuncion();

En este ejemplo, funcionHija tiene acceso a la variable miValor que está definida en el ámbito de la función padre  miFuncion.

El ámbito léxico de funcionHija permite el acceso al ámbito del padre (función madre).

¿Qué es una cláusula en JavaScript?

w3Schools.com ofrece una gran definición de lo que es una cláusula:

Una cláusula es una función que tiene acceso al ambito de su función padre, incluso después de que la función padre haya terminado de ejecutar.

Observemos la primera parte de la oración, antes de la coma:

...una función que tiene acceso al ambito de su padre

¡Eso describe el ámbito léxico!

Pero necesitamos la segunda parte de la definición para tener un ejemplo de una cláusula...

...incluso después de que la función padre haya terminado de ejecutar.

Veamos un ejemplo de una cláusula:

const miFuncion = () => {
     let miValor = 2;
     console.log(miValor);

     const funcionHija = () => {
          console.log(miValor += 1);
     }

     return funcionHija;
}

const resultado = miFuncion();
console.log(resultado);
resultado();
resultado();
resultado();

Copia el código del ejemplo anterior y pruébalo.

Analicemos lo que está pasando...

En esta versión, miFuncion devuelve funcionHija en lugar de llamarla.

Por tanto, cuando a resultado  se le asigna miFuncion(), la instrucción en la consola dentro de miFuncion es registrada, pero no la instrucción dentro de  funcionHija.

funcionHija no es ejecutada.

En lugar de eso, es devuelta y guardada en resultado.

Además, debemos darnos cuenta de que miFuncion ha terminado de ejecutarse.

La línea con console.log(resultado) debe mostrar en la consola que resultado ahora contiene el valor de la función anónima que esfuncionHija.

Ahora, cuando ejecutamos resultado(), estamos llamando a la función anónima que es funcionHija.

Como hija de miFuncion, esta función anónima tiene acceso a la variable miValor dentro de miFuncion ¡incluso después de que haya terminado su ejecución!

La cláusula que creamos, ahora nos permite continuar aumentando el valor de la variable miValor  cada vez que ejecutamos resultado().

Tómate tu tiempo con cláusulas

Las cláusulas se consideran un concepto avanzado con motivo.

Incluso con un desglose paso a paso de lo que es una cláusula, entender este concepto puede llevar tiempo.

No te apresures para entenderlo y no seas duro contigo mismo si no tiene sentido al principio.

Cuando entiendas completamente las cláusulas, es posible que sientas lo que sintió Neo cuando vio la Matriz. ¡Verás nuevas posibilidades de código y te darás cuenta de que estuvieron ahí todo el tiempo!

Te dejo con un tutorial sobre cláusulas de mi canal de YouTube. Profundizo un poco más y proporciono algunos ejemplos más de cláusulas para aprovechar la discusión en este artículo.

Traducido del artículo de  Dave Gray - JavaScript Closure Tutorial – How Closures and Lexical Scope Work in JS