javascript - let으로 선언된 변수와 관련하여 이 코드에서는 어떻게 작동합니까?

Question

디스플레이를 향상시키는 데 사용되는 코드는 다음과 같습니다.

으아악

여기서 this.style은 i가 이미 사이클을 완료했기 때문에 aLi[i].style로 대체될 수 없습니다.
그러나 i의 값이 let으로 선언되면 완전히 다르며 i의 값도 정확할 수 있습니다. 이벤트 함수에서 호출됨:

으아악

이벤트 기능이 실행되면 나를 찾을 수 없다는 오류가 뜨는 것 아닌가요? 성공적으로 실행될 수 있는 이유

Answer 1

ES6에는 변수 선언을 위한 새로운 let 명령이 추가되었습니다. 사용법은 var와 비슷하지만 선언된 변수는 let 명령이 있는 코드 블록 내에서만 유효합니다.

으아악

위 코드는 코드 블록에 있으며 각각 let과 var를 사용하여 두 개의 변수를 선언합니다. 그런 다음 이 두 변수는 코드 블록 외부에서 호출됩니다. 결과적으로 let으로 선언된 변수는 오류를 보고하고 var로 선언된 변수는 올바른 값을 반환합니다. 이는 let으로 선언된 변수가 해당 변수가 위치한 코드 블록에서만 유효함을 보여줍니다.

루프 카운터의 경우 let 명령을 사용하는 것이 매우 적합합니다.

으아악

위 코드에서 카운터 i는 for 루프 본문 내에서만 유효하며, 루프 외부에서 참조되면 오류가 보고됩니다.

다음 코드에서 var를 사용하면 최종 출력은 10입니다.

으아악

위 코드에서 변수 i는 var 명령으로 선언되었으며 전역 범위에서 유효하므로 전역적으로 변수 i는 하나만 있습니다. 루프가 반복될 때마다 변수 i의 값이 변경되고 루프의 배열 a에 할당된 함수 내의 console.log(i)는 전역 i를 가리킵니다. 즉, 배열 a의 구성원에 있는 모든 i는 동일한 i를 가리키므로 런타임 시 i의 마지막 라운드인 10이 출력됩니다.

let을 사용하면 선언된 변수는 블록 수준 범위 내에서만 유효하며 최종 출력은 6입니다.

으아악

위 코드에서 변수 i는 let에 의해 선언되었습니다. 현재 i는 이 주기에서만 유효하므로 각 주기의 i는 실제로 새로운 변수이므로 최종 출력은 6입니다. 루프의 각 라운드에서 변수 i가 다시 선언되면 어떻게 이전 라운드의 값을 알고 따라서 이번 라운드의 값을 계산하는지 물어볼 수 있습니다. 이는 자바스크립트 엔진이 내부적으로 이전 루프의 값을 기억하고 이번 라운드의 변수 i를 초기화할 때 이전 루프를 기반으로 계산을 수행하기 때문이다.

그리고 for 루프의 또 다른 특징은 루프 변수를 설정하는 부분이 상위 범위이고, 루프 본문 내부가 별도의 하위 범위라는 것입니다.

으아악

위 코드는 올바르게 실행되어 abc를 3번 출력합니다. 이는 함수 내부의 변수 i와 루프 변수 i가 동일한 범위에 있지 않고 별도의 범위를 가지고 있음을 나타냅니다.