¿Cómo funciona la ejecución de Javascript?

En el contexto de Javascript en el navegador web, el motor del Javascript (v8, SpiderMonkey) realiza lo siguiente:

1. Análisis sintáctico (parser).- Leer y entender el código.
2. Compilar.- Convertirlo a código binario
3. Ejecuta el código binario.

El motor de Javascript ejecuta todo esto en un único subproceso (single-thread)

Contexto de ejecución

Lo primero que hace el motor de Javascript para manejar la complejidad de interpretar y ejecutar el código es crear un contexto de ejecución global.

El contexto de ejecución cuenta con 2 fases, creación y ejecución. En la fase de creación en el contexto global de un navegador web se crean 2 objetos: window y this que es una referencia al objeto global.

Adicionalmente, todas las declaraciones de funciones y variables se almacenan en memoria y a estas últimas se les asigna un valor de undefined (hoisting).

Contexto de ejecución fase de ejecución

En esta fase, el motor de Javascript ejecuta el código línea por línea, asigna los valores a las variables e invoca las funciones (callbacks).

Cada vez que se invoca una función, se crea un contexto de ejecución de la función y se agregan a la pila de ejecución (callstack). Al momento de terminar la ejecución de la función se quita de la pila de ejecución (LIFO).

Diferencia entre un contexto de ejecución global y un contexto de ejecución de la función.

Crear un objeto arguments

¿Qué ocurre cuando pasamos un argumento a la función durante la fase de creación?

arguments: {0: "argValue",

length: 1 }

Al definir una función, esta puede aceptar parametros que, al momento de ejecución (pasarle argumentos a la función) estos funcionan como variables locales (memoria local) únicamente disponible en el contexto de ejecución actual de la función.

this: window

someLocalVar: undefined

arg: "argValue"

Scope

Scope en JavaScript  se refiere al alcance de una variable dentro de un contexto de ejecución.

Una variable cuyo scope es global es accesible a cualquier parte del código ya que se añade al objeto global y scopes anidados pueden acceder a él debido al scope lookup (scope chain).

Una variable cuyo scope es local sólo es visible al bloque donde se declaró.

Closure

Closure es cuando una función (declarada dentro de otra función) guarda referencias del contexto léxico (lexical environment) que le permite acceder a funciones exteriores.

Cuando se invoca una función, se crea un contexto de ejecución con memoria local. Al terminar de ejecutar esta función, su memoria local se borra excepto lo que se regreso de la función.

Esto permite crear persistencia de datos (cache) en nuestro programa y separar nuestro código en mini programas (funciones).

Higher order functions

Higher order functions son funciones que reciben una función como argumento o regresan una función como output.

El hecho de tomar una función como argumento se conoce como función callback, porque se invoca por una higher order function.

Esto es útil para crear funciones más simples y pequeñas con específica funcionalidad  y lógica que  posteriormente podemos combinar con funciones más complejas para reducir la complejidad del código, reducir bugs y escribir mejor código.