Escrevendo este guia pelo pai que está construindo alis4ops.com.

• Eu me refiro como "Baba".
• Ele está aprendendo a construir aplicações web, anteriormente engenheiro elétrico.
• Deixarei algumas notas ao redor do artigo referente a ele, para que qualquer pessoa na interwebz que esteja lendo isso possa ignorar essas linhas. Espero que vocês não se importem!

Contexto

Temos as seguintes funções:

• lidar comStartTouch
• lidar comMoveTouch

Baba definido em 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 acessando dragElement on-line:

• if (elementoarrastado) {

hanldeMoveTouch não gera um erro quando é chamado.

Colocar um ponto de interrupção em if (draggedElement) no Chrome DevTools mostrará que dragElement resolve para o mesmo elemento html fornecido por event.target em handleStartTouch

Emitir

Por que podemos acessar dragElement em handleMoveTouch mesmo que ele esteja definido em handleStartTouch

Mais genericamente, por que podemos acessar uma variável que foi definida em uma função em outra função em javascript?

Explicação

Veja a função handleStartTouch:

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

Especificamente a linha:

    draggedElement = event.target;

Não declara o nome da variável dragElement usando nenhuma das palavras-chave

• const
• deixar
• var

Por exemplo, não estamos definindo assim:

    const draggedElement = event.target;

Declaração de variável (também conhecida como palavras-chave)

Em Javascript, quando não usamos as declarações de variáveis ​​(também chamadas de palavras-chave), o javascript considera aquela variável uma variável global.

Exercício

Considere o seguinte exemplo onde definimos duas funções:

// 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")
  }
}

Abra o DevTools no Chrome

• navegue até "Console"
• Copie e cole o código acima
• Pressione Enter
• Ele retornará indefinido, tudo bem.

No console, chame add(1,1)

• você verá o console retornar 2

add(1,1)
=> 2

Então chame printStatus

• Você verá a saída Soma: 2

Podemos ver que printStatus() pode acessar a variável sum definida em add(x, y)

Isso ocorre porque a variável sum está sendo declarada sem as seguintes palavras-chave:

• soma = x y

Agora vamos alterar add(x, y) add para usar uma declaração de variável 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")
  }
}

• Vá para o Chrome
• Atualize a página com Ctrl R
  • você também pode abrir uma nova guia e abrir o console do devtools novamente.

Vamos definir as funções no log do console novamente.

• Copie e cole o trecho de código acima no console e pressione Enter.

Precisamos redefini-lo porque iniciamos um novo console de desenvolvimento.

Agora no console, chame add(2, 2)

• você verá o console retornar 4

Chame printStatus para ver se consegue acessar a variável sum definida em add(x, y)

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

O erro diz que a soma não está definida

Isso confirma que quando uma variável é definida com uma declaração de variável (const, let, var) dentro de uma função, o escopo dessa variável está apenas dentro da função

Quando uma variável é definida sem uma declaração de variável dentro de uma função, o escopo dessa variável é global.

Espero que isso ajude Baba (e qualquer outra pessoa que esteja lendo isso.)