alis4ops.com을 구축하고 있는 아버지를 위해 이 가이드를 작성했습니다.

• 저는 "바바"라고 부릅니다.
• 그는 이전에 전기 엔지니어였던 웹 애플리케이션 구축 방법을 배우고 있습니다.
• 그를 언급하는 기사 주위에 몇 가지 메모를 남길 것이므로 이 글을 읽는 interwebz의 누구든지 해당 내용을 무시할 수 있습니다. 여러분도 괜찮기를 바랍니다!

문맥

다음과 같은 기능이 있습니다:

• 시작터치 처리
• 이동 터치 처리

DragDrop.js에 정의된 Baba

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
    }
}

다음 라인에서 draggedElement에 액세스하고 있습니다.

• if(드래그된 요소) {

hanldeMoveTouch는 호출 시 오류를 발생시키지 않습니다.

Chrome DevTools에서 if(daggedElement)에 중단점을 배치하면 draggedElement가 handlerStartTouch의 event.target에서 제공하는 것과 동일한 html 요소로 확인되는 것으로 표시됩니다.

문제

handleStartTouch에 정의되어 있음에도 불구하고 handlerMoveTouch의 draggedElement에 액세스할 수 있는 이유는 무엇입니까?

더 일반적으로, 자바스크립트의 다른 함수에서 함수에 정의된 변수에 액세스할 수 있는 이유는 무엇입니까?

설명

handleStartTouch 함수를 살펴보세요:

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

구체적으로 다음 라인:

    draggedElement = event.target;

키워드 중 하나를 사용하여 변수 이름 draggedElement를 선언하지 않습니다.

• 상수
• 허락하다
• 변수

예를 들어 다음과 같이 정의하지 않습니다.

    const draggedElement = event.target;

변수 선언(일명 키워드)

Javascript에서 변수 선언(키워드라고도 함)을 사용하지 않는 경우 JavaScript는 해당 변수를 전역 변수로 간주합니다.

운동

두 가지 함수를 정의하는 다음 예를 살펴보세요.

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

Chrome에서 DevTools 열기

• "콘솔"로 이동
• 위의 코드를 복사하여 붙여넣으세요.
• Enter를 누르세요
• 정의되지 않은 결과가 반환됩니다. 괜찮습니다.

콘솔에서 add(1,1)

• 콘솔 반환 2가 표시됩니다.

add(1,1)
=> 2

그런 다음 printStatus를 호출합니다.

• 출력 합계가 2로 표시됩니다.

printStatus()가 add(x, y)에 정의된 변수 sum에 액세스할 수 있음을 알 수 있습니다.

이는 변수 sum이 다음 키워드 없이 선언되기 때문입니다.

• 합계 = x y

이제 add(x, y) add를 변경하여 합계에 대한 변수 선언을 사용하겠습니다.

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

• Chrome으로 이동
• Ctrl R로 페이지 새로고침
  • 새 탭을 열고 devtools 콘솔을 다시 열 수도 있습니다.

콘솔 로그에 함수를 다시 정의해 보겠습니다.

• 위의 코드 조각을 복사하여 콘솔에 붙여넣고 Enter 키를 누르세요.

새 개발 콘솔을 시작했기 때문에 재정의해야 합니다.

이제 콘솔에서 add(2, 2)를 호출하세요.

• 콘솔이 4를 반환하는 것을 볼 수 있습니다.

printStatus를 호출하여 add(x, y)에 정의된 변수 sum에 액세스할 수 있는지 확인하세요.

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

합계가 정의되지 않았다는 오류가 발생함

이는 변수가 함수 내에서 변수 선언(const, let, var)으로 정의될 때 해당 변수의 범위가 함수 내에만 있음을 확인합니다.

변수가 함수 내에서 변수 선언 없이 정의되면 해당 변수의 범위는 전역입니다.

이 내용이 Baba(그리고 이 글을 읽고 있는 다른 사람에게도 도움이 되기를 바랍니다.)