JS 변수 선언 소개

alis4ops.com을 만들고 계신 아버지를 위해 이 가이드를 작성했습니다.

• 저는 '바바'라고 부릅니다.
• 그는 웹 애플리케이션 구축을 배우고 있으며 이전에는 전기 엔지니어였습니다.
• 그를 언급하는 기사 주위에 몇 가지 메모를 남길 것이므로 이 글을 읽는 interwebz의 누구든지 해당 내용을 무시할 수 있습니다. 걱정하지 않으셨으면 좋겠습니다!

문맥

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

• startTouch 처리
• MoveTouch 처리

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(draggedElement)에 중단점을 배치하면 draggedElement가 handlerStartTouch의 event.target에서 제공하는 것과 동일한 html 요소로 확인되는 것을 볼 수 있습니다

문제

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

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

설명

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 열기

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

콘솔에서 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")
  }
}

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

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

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

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

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

• 콘솔 반환 4가 표시됩니다

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

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

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

함수 내에서 변수 선언(const, let, var)으로 변수를 정의할 때 해당 변수의 범위가 함수 내에서만 적용됨을 확인합니다

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

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

위 내용은 JS 변수 선언 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!