Escribiendo esta guía por el padre que está construyendo alis4ops.com.

• Me refiero a "Baba".
• Está aprendiendo a crear aplicaciones web, anteriormente era ingeniero eléctrico.
• Dejaré algunas notas alrededor del artículo refiriéndose a él, para que cualquiera en Interwebz que lea esto pueda ignorar esas líneas. ¡Espero que no les importe!

Contexto

Tenemos las siguientes funciones:

• manejarStartTouch
• manejarMoveTouch

Baba definido en DragDrop.js

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}

Observe que estamos accediendo a draggedElement en línea:

• if (elemento arrastrado) {

hanldeMoveTouch no genera un error cuando llama.

Colocar un punto de interrupción en if (draggedElement) en Chrome DevTools mostrará que draggedElement se resuelve en el mismo elemento html proporcionado por event.target en handleStartTouch

Asunto

¿Por qué podemos acceder al elemento arrastrado en handleMoveTouch incluso si está definido en handleStartTouch?

Más genéricamente, ¿por qué podemos acceder a una variable que se definió en una función en otra función en javascript?

Explicación

Mira la función handleStartTouch:

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

Específicamente la línea:

    draggedElement = event.target;

No declara el nombre de la variable draggedElement usando ninguna de las palabras clave

• constante
• dejar
• var

Por ejemplo, no lo definimos así:

    const draggedElement = event.target;

Declaración de variable (también conocida como palabras clave)

En Javascript, cuando no utilizamos las declaraciones de variables (también llamadas palabras clave), javascript considera esa variable como una variable global.

Ejercicio

Considere el siguiente ejemplo donde definimos dos funciones:

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x   y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

Abre DevTools en Chrome

• navegue a "Consola"
• Copia y pega el código de arriba
• Presiona enter
• Volverá indefinido, está bien.

En la consola, llama a add(1,1)

• verás que la consola regresa 2

add(1,1)
=> 2

Luego llama a printStatus

• Verás el resultado Suma: 2

Podemos ver que printStatus() puede acceder a la variable suma definida en add(x, y)

Esto se debe a que la suma variable se declara sin las siguientes palabras clave:

• suma = x y

Ahora cambiemos add(x, y) add para usar una declaración de variable para sum

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x   y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

• Ir a Chrome
• Actualizar la página con Ctrl R
  • también puedes abrir una nueva pestaña y abrir la consola devtools nuevamente.

Definamos nuevamente las funciones en el registro de la consola.

• Copie y pegue el fragmento de código anterior en la consola y presione Intro.

Necesitamos redefinirlo porque iniciamos una nueva consola de desarrollo.

Ahora en la consola, llama a add(2, 2)

• verás que la consola regresa 4

Llame a printStatus para ver si puede acceder a la suma variable definida en add(x, y)

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (:9:3)
    at :1:1

El error dice que la suma no está definida

Esto confirma que cuando una variable se define con una declaración de variable (const, let, var) dentro de una función, el alcance de esa variable está solo dentro de la función

Cuando una variable se define sin una declaración de variable dentro de una función, el alcance de esa variable es global.

Espero que esto ayude a Baba (y a cualquiera que lea esto).