JavaScript: Var 및 Let

오늘 나는 너희들을 데리고 모험을 가고 싶다. 우리는 var 변수와 let 변수 사이의 관건적인 차이를 발견할 것이다.인코딩에 대한 많은 소개(Javascript에서)는 보통 var 변수에서 시작하지만, 나는 가능한 한 빨리 let 변수로 전환해야 한다고 생각한다.너는 더 적은 버그를 가지고 더 좋은 프로그래밍 체험을 할 수 있을 것이다.자!
우선 범위의 개념을 소개하고 싶습니다.나는 이런 정의를 즐겨 사용한다.

Scope is the area of code where you can access a symbol

이런 상황에서 기호는 변수나 함수일 수 있다.네가 부호를 안전하게 사용할 수 있을 때, 우리는 그것이 범위 내에 있다고 말한다.예를 들면 다음과 같습니다.

var variable = 'Hello'; 
// We can log variable here because is within scope
console.log(variable);

함수를 처리하면 일이 더욱 재미있어진다.

console.log(variable); // This will not work

function thisIsAFunction() {
    var variable = 1; 
    console.log(variable); // This will work
}

console.log(variable); // This will not work

thisIsAFunction();

함수 외부의 로그가 어떻게 작용하지 않는지 주의하십시오. (즉 이름 variable은 범위 내에 있지 않지만, 함수 내부의 로그가 작용합니다.)

왜?

var 변수는 우리가 알고 있는 함수 기반 범위를 사용합니다.만약 함수에 var 변수를 성명한다면, 이 변수는 함수의 모든 범위 내에 있을 것이다.
Hoisting은 접근 변수의 위치를 약간 복잡하게 할 것입니다.일반적으로 변수를 성명한 후에만 var을 사용하는 것이 안전하다.우리는 다음 문장에서 승진을 토론할 것이니 흥분해야 한다.
이제 함수에 if 문을 추가합니다.

console.log(variable); // This will not work

function thisIsAFunction() {
    if(true === true) { // This is a simple if statement to avoid confusion
        var variable = 1;
        console.log(variable); // This works
    }
    console.log(variable); // This works
} 

console.log(variable); // This will not work

우리의 var 변수는 그 함수의 작용 영역에서만 성명된다.variable이if문장에서 성명되었음에도 불구하고, 문장 밖에서 사용할 수 있음을 주의하십시오.이것이 바로 기능 기반의 역할 영역이다!
이제 var 변수를 let 변수로 변경하여 전체 속도로 실행합니다.

console.log(variable); // This will not work

function thisIsAFunction() {
    if(true === true) { // This is a simple if statement to avoid confusion
        let variable = 1; 
        console.log(variable); // This works
    }
    console.log(variable); // This will not work
} 

console.log(variable); // This will not work

thisIsAFunction();

var을 let으로 변경하면 로그가 다시 중지됩니다.

여섯 번째 줄에 로그인하는 것과 여덟 번째 줄에 로그인하는 것은 어떤 차이가 있습니까?

다른 점은 그들이 서로 다른 구역에 위치하고 있다는 데 있다.'그래, 거리가 뭐야?'라고 생각하면,,내 친구를 엄호하라고.
만약 당신이 초기술성을 얻고 싶다면 Block은 일종의'조합된 원본 코드 어휘 구조'이지만 이 개념을 소개하고 싶습니다.

Block - whatever is contained inside curly brackets: functions, loops, if statements, etc.

대상은 내가 방금 제시한 괄호 정의에 관한 재미있는 예외이지만, 이것은 내가 아는 유일한 예외이다.
현재 함수 중의 블록을 고려합시다

console.log(variable);

function thisIsAFunction() { // Start of block A
    if(true === true) { // Start of block B
        let variable = 1; 
        console.log(variable);
    } // End of block B
    console.log(variable); 
} // End of block A

console.log(variable);

thisIsAFunction();

variable은 블록 B 내부에 정의되어 있기 때문에 블록 B 내부(이곳은 중점)와 블록 B에 포함된 각 블록 내부에서만 사용할 수 있습니다.

기술적으로 말하자면 변수는 A구역에 있다. 그렇지?왜 콘솔이야?벌목

좋아.B구역은 A구역 내에 있기 때문에 기술적으로 variable이 A구역 내에 선포되었다.
그러나 let이 사용하는 범위 해석 규칙은 가장 가까운 폐쇄 블록 (즉 블록 b) 을 찾고, 이 블록 안의 어느 곳에서든, 그 중의 모든 다른 블록에서 변수를 사용할 수 있도록 합니다.
최근 닫힌 블록이 있는 블록은 variable에 액세스할 수 없습니다.

그렇다면if문장 앞에서 변수를 이동하면 어떤 일이 일어날까요?

console.log(variable);

function thisIsAFunction() { // Start of block A
    let variable = 1; 
    if(true === true) { // Start of block B
        console.log(variable);
    } // End of block B
    console.log(variable); 
} // End of block A

console.log(variable);

thisIsAFunction();

가장 가까운 폐쇄 구역이기 때문에 A 구역 내의 어느 곳에서든지 도착할 수 있다.B구역은 A구역 안에 있기 때문에 B구역 내에도 들어갈 수 있다.

이것은 var에 일련의 규칙을 추가한 것처럼 보입니다. 이것은 무슨 의미가 있습니까?

좋은 문제!블록은 왕왕 함수보다 작다.우리의 역할 영역 규칙을 비교적 작은 역할 영역에 세우는 것은 변수 이름이 비교적 작은 코드 영역에서 '사용 가능' 하다는 것을 의미한다.
비교적 작은 코드 영역은 이 변수를 잘못 변경할 수 없다는 것을 의미한다.

알겠습니다!또 다른 거 있어요?

마지막 한 가지.let은 동일한 변수를 잘못 재선언하지 않도록 내장된 보호 기능도 갖추고 있습니다.

let kali = 'is cute';

// LOTS OF CODE IN BETWEEN

let kali = 2; // This will break

명칭 kali을 다시 성명하려고 시도하면 redeclaration of identifier kali과 같은 오류가 발생합니다.
다른 한편:

var kali = 'is cute';

// LOTS OF CODE IN BETWEEN

var kali = 2; // This works just fine

var 변수는 불평 없이 같은 이름을 반복해서 설명할 수 있습니다.너는 결국 다른 사람(심지어 너 자신)의 변수를 뛰어넘을 수도 있고, 심지어는 이 점을 의식하지 못할 수도 있다.이것은 가능한 한 let 변수를 많이 사용하는 또 다른 중요한 원인이다.

요컨대

범위는 코드에서 이름을 액세스할 수 있는 영역입니다.

var 변수는 함수 기반 범위를 사용합니다.그것들은 그것들을 정의하는 함수에서 사용할 수 있다.

let 변수는 블록 기반 범위를 사용합니다.정의된 블록에서 사용할 수 있습니다.

let 변수에서는 동일한 이름을 다시 선언할 수 없습니다.

감사합니다!

제 글을 읽어주셔서 대단히 감사합니다!만약 당신이 더욱 상호작용적인 프레젠테이션을 원한다면, 나는 이러한 주제에 관한 유튜브 동영상을 가지고 있다: https://youtu.be/kIJ2Jh7Qwso
만약 네가 나의 내용을 좋아하고 내가 너의 인코딩 과정에서 너를 도와주기를 바란다면, 너는 반드시 나의 통신에 가입해야 한다: https://www.cadejo.dev/free-updates/