Bloques y variables

Contenidos

Contexto de ejecución
Recapitulación de Hoisting de funciones declaradas
Hoisting de variables
Bloques y variables

Los bloques de código son lo que va dentro de las llaves {}

Contexto de ejecución

Un contexto de ejecución se define como lo que se encuentre declarado dentro de las {} luego declarada una función o una sentencia de control como los if

function calculateGrade(userId) { //<-- Inicia contexto ejecución 1
  
  var getGrades = function(userId) { //<-- Inicia contexto ejecución 2
    var endpointUrl = 'api.boolean.cl/students/'
    
    return axios.get(endpointUrl + userId)
      .then(function(response) { //<-- Inicia contexto ejecución 3
        return response.data.evaluations
      }) //<-- cierra contexto ejecución 3
    } //<-- cierra contexto ejecución 2
  
  var getResult = function(userEvaluations) { //<-- Inicia contexto ejecución 4
    var sumPoints = userEvaluations.list
      .reduce(function(totalGrade, evaluation){ //<-- Inicia contexto ejecución 5
        return totalGrade + evaluation
      })//<-- cierra contexto ejecución 5
 
     return sumPoints/userEvaluations.totalPoints
  }//<-- cierra contexto ejecución 4
 
  return getGrades() //<-- Desencadena la creación de los contextos de ejecución
    .then(getResult)
} //<-- cierra contexto ejecución 1

Recapitulación de Hoisting de funciones declaradas

Es el proceso en el cual las variables y funciones son “subidas” o hoisteadas hacia el inicio del “contexto de ejecución” más cercano. Esto es una forma de pensarlo, ya que en realidad lo que ocurre es que las variables y funciones son alojadas en memoria en la fase de compilación https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Es debido al Hoisting que códigos como este funcionan sin problemas:

  anotherNotDeclaredYet(200)
  notDeclaredYet(100)
  
  function notDeclaredYet(value) {
    console.log('notDeclaredYet', value)
  }
  
  function anotherNotDeclaredYet(value) {
    console.log('anotherNotDeclaredYet', value)
  }

Para los interpretes de Javascript es análogo a tener esto:

function notDeclaredYet(value) {
  console.log('notDeclaredYet', value)
}
function anotherNotDeclaredYet(value) {
  console.log('anotherNotDeclaredYet', value)
}
anotherNotDeclaredYet(200)
notDeclaredYet(100)

Notar que sólo el orden DECLARATIVO subió al inicio del contexto de ejecución, el orden de ejecución (o invocación) se mantiene.

Hoisting de variables

Las variables declaradas con var son hoisteadas, pero solo su declaración, no así su asignación, por lo que al consultar su valor antes de su asignación, este será undefined

¿Cuál será el contexto de declaración de la variable i del for?

var grades = [10, 10, 10, 10, 10, 10, 8, 6, 10, 6]

if (grades.length < 24) {
  console.log('totalEmpties antes de ser asignado', totalEmpties)
  var totalEmpties = 24 - grades.length
  
  console.log('totalEmpties después de ser asignado', totalEmpties)
  console.log('i antes de ser asignado', i)
  
  for(var i = 0; i < totalEmpties; i++) {
      grades.push(0)
    }
  console.log('i al final de ser re-asignado varias veces', i)
}

Bloques y variables

Relación entre alcance y bloques

var,let y const