왜 우리는 더 이상 var을 사용하지 않습니까?

자바스크립트 인코딩에 익숙했다면 var 키워드를 자주 사용했습니다.변수를 설명할 다른 방법이 없습니다.이것은 정말 간단하다.네가 유일하게 해야 할 일은 바로 이렇다.

var x = 3; var y = 'hello'; // etc...

ES6 이후 두 개의 새로운 키워드가 있습니다. const과 let입니다.첫 번째는 상수를 정의할 수 있도록 합니다.만약 당신이 이렇게 한다면:

const x = 2;

상수 x에 다른 값을 다시 할당할 수 없습니다. 개발자가 상수를 정의할 수 있는 많은 프로그래밍 언어가 있습니다.이것은 쉽게 틀리지 않는 코드를 작성하는 좋은 방법이다.그러나 이 "let"키워드도 있습니다. 변수를 설명할 수 있습니다.이것이 바로 네가 필요로 하는 것이다. 단지 다른 키워드일 뿐이다. 그것은 var의 작용과 같다. 그렇지?왜 "var"과 const만 있지 않습니까?

Why don’t we use var anymore?

이 질문에 대답하려면 var가 어떻게 일을 하는지 알아야 한다.Javascript에서는 ES6 이전에 블록 도메인이 없습니다.기능 범위가 있습니다.우리 이 두 개념을 분해합시다.

블록 역할 영역

변수나 함수를 설명하면 블록에 접근할 수 있습니다.대부분의 프로그래밍 언어에는 Java와 같은 유형의 역할 영역이 있습니다.다음 코드 세그먼트를 참조하십시오.

public class Example () {
  public void processArray (String[] array) {
    for(int i = 0; i < array.length; i++) {
      System.out.println(array[i]);
    }

    System.out.println("I cannot use the variable i here");
  }
}

for 순환에서만 변수 i를 사용할 수 있습니다.그것은 그 거리 밖에 존재하지 않는다.Java에서 "{"를 사용할 때마다 새 블록이 생성됩니다. "}"는 블록을 닫는 것을 의미합니다.물론 블록 밖에서 변수를 설명하면 블록 내에서 사용할 수 있습니다.
다음 그림을 보여 드리겠습니다. 이 그림은 블록 역할 영역이 이 예에서 작동하는 방식을 보여 줍니다.
은 예시류 차단 범위를 사용합니다.
각 사각형은 하나의 범위입니다.하위 역할 영역은 상위 역할 영역의 함수와 변수에 액세스할 수 있지만 상위 역할은 하위 역할에 액세스할 수 없습니다.이 예에서 예시 클래스는processArray 방법의 부급이고processArray 방법은 for 순환 블록의 부급이다.예시 클래스는processArray 방법에 속하는 모든 내용에 접근할 수 없습니다.processArray 방법은 for 순환에 속하는 모든 내용에 접근할 수 없습니다.그러나 for 순환은processArray 방법의 모든 내용과 예시 클래스의 모든 내용, 예를 들어 변수나 다른 방법에 접근할 수 있습니다.이것은 대다수 개발자들이 사용하는 범위다.

기능 범위

Java와 달리 Javascript(ES5)는 함수를 기반으로 역할 영역을 생성합니다.이것은 함수에서 변수를 설명하면 이 함수의 어느 위치에서든 사용할 수 있다는 것을 의미한다.

function processArray (array) {
  for(var i = 0; i < array.length; i++) {
    console.log('Element ', array[i]);
  }

  console.log('I can use variable i outside the loop ', i);
}

물론 너도 전 세계가 있다.함수 밖에서 변수를 설명할 때마다 전역 범위에 속합니다.
다른 차트를 보여 드리겠습니다. 하지만 이번에는 함수 범위에 대해:
processArray 함수의 함수 범위
훨씬 간단해 보이죠?그런데 for 순환은 어디 있어요?
for 순환은 하나의 블록이지만 여기는 블록 작용역이 없습니다. 이것이 바로 그것이 자신의 작용역이 없는 이유입니다.

왜 우리는 var 키워드를 사용하지 않습니까?

이게 다 범위에 관한 거야!대부분의 프로그래밍 언어는 블록 작용역을 가지고 있다.왜?실수가 쉽지 않기 때문이다.블록 내에서 변수 (if 문장, for 순환 등) 를 설명할 수 있으며, 이전에 설명한 변수를 덮어쓸 염려가 없습니다.
예를 들겠습니다.인쇄 행렬의 각 위치에 대한 함수를 실현하고 있다고 가정하십시오.다른 for 순환에서 for 순환을 작성합니다.ES5에서는 var 키워드만 사용할 수 있으며 초보자는 다음과 같이 사용합니다.

function printMatrix (matrix) {
  for (var i = 0; i < matrix.length; i++) {
    var line = matrix[i];
    for (var i = 0; i < line.length; i++) {
      var element = line[i];
      console.log(element);
    }
  }
}

var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

printMatrix(matrix);

출력은 다음과 같습니다.
ES5에서 printMatrix 함수의 출력
그것은 단지 첫 줄만 기록했다.무슨 일이 일어났는지 이해할 수 있도록 이 예시의 범위도를 보여 드리겠습니다.
printMatrix ES5 버전의 범위 분해
printMatrix 함수의 모든 변수는 같은 레벨에 있습니다.두 개의 for 순환은 실제로 같은 변수 i를 사용합니다!
어떻게 된 거야?몇 년 전, 내가 Javascript로 인코딩을 시작했을 때, 나는 이런 코드를 많이 썼다. 왜냐하면 나는 이전에 Java로 많은 코드를 작성했기 때문이다. Java는 블록 작용역이 있기 때문이다.그래서 만약 내가 순환 중에 변수를 성명한다면, 그것은 거기에 남을 것이다. 그러나 사실은 아니다.
많은 오류와 좌절을 겪은 후에 나는 자바스크립트에 블록 작용역이 없다는 것을 알게 되었다.기능 범위만 있습니다.하지만 내가 그것을 알게 된 후에도 나는 여러 번 잊어버렸다.이것은 쉽게 잊을 수 있는 일이다.일반적인 기대는 두 번째 for 순환에서 새로운 변수를 만들고 있다는 것입니다.근데 넌 아니야.첫 번째 for 순환에서 변수 i를 덮어씁니다.두 번째 순환을 실행하면 첫 번째 순환의 조건을 다시 평가하지만, 변수 i의 현재 값은 3(행렬의 첫 번째 줄 크기)으로 행렬의 길이(3)와 같다.조건은false를 되돌려주고 순환이 멈춥니다.이것이 바로 행렬의 첫 줄만 기록하는 이유다.

In Javascript, it doesn’t matter how many times you use the keyword “var”. If it’s the same name in the same function, you are pointing to the same variable.

이 함수 범위는 아마도 많은 오류의 출처일 것이다.다행히도 Javascript는 계속 변화하고 있습니다. 현재 우리는 ES6와 더 많은 것을 가지고 있습니다.두 개의'새'키워드, const와let이 있습니다. 상수와 변수를 각각 정의할 수 있습니다.블록 역할 영역은 블록 내에서 변수나 상수를 선언할 경우 상위 블록은 사용할 수 없다는 것을 의미합니다.
새 키워드를 이용하여 행렬을 기록하는 예시를 다시 작성합시다.var을 let으로 대체하고 초기화 후 변경해야 할 내용을 알기 위해useconst를 추가합니다...

function printMatrix (matrix) {
  for (let i = 0; i < matrix.length; i++) {
    const line = matrix[i];
    for (let i = 0; i < line.length; i++) {
      const element = line[i];
      console.log(element);
    }
  }
}

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

printMatrix(matrix);

출력은 다음과 같습니다.
ES5에서 printMatrix 함수의 출력
행렬의 모든 위치가 기록되었습니다.그것은 방금 작용했다. 나는 var를 let과 const 키워드로 바꾸기만 하면 된다!모든 for 순환에서, 나는 실제로 다른 변수 I를 만들었기 때문이다. 두 번째 순환에서, 첫 번째 순환은 덮어쓰지 않는다.
범위에서 무슨 일이 일어났는지 봅시다.
printMatrix ES6 버전의 범위 분해
보기에는 좀 복잡해 보이지만, 이것은 블록 범위를 제공합니다. 모든 for 순환에는 자신의 변수 i가 있습니다. 낡은 자바스크립트에서는 이러한 명칭 충돌을 피하기 위해 다른 이름을 주어야 합니다.그러나 정말로, 당신이 하나의 그룹을 교체하기 위해 for 순환을 해야 할 때, 당신의 머릿속에 떠오르는 첫 번째 이름은 현재의 그룹 인덱스 값이'i'이기 때문입니다. 그렇지 않습니까?
주의할 점: forEach, map과 더 많은 처리 그룹의 함수를 알고 있습니다.이것은 var,let,const 키워드가 어떻게 작동하는지 보여주는 간단한 예일 뿐이다.

결론

let과 const는 두 가지 새로운 멋진 키워드가 아니라 블록 작용역을 도입하여 우리가 깨끗하고 틀리지 않는 코드를 작성할 수 있도록 합니다.
왜 우리는 더 이상 var을 사용하지 않습니까?변수, 심지어 상수까지 설명하는 더 좋은 방법이 있기 때문에... 블록 범위 사용!블록 내에서 변수를 설명할 때 심사숙고할 필요가 없다.나는 블록 범위를 사용하는 것이 함수 범위를 사용하는 것보다 더 쉽다고 생각한다.var 사용을 권장하지 않습니다.예를 들어 ESLint을 사용하여 코드를 검사하면'no-var'규칙을 설정할 수 있으며, var를 사용하면 오류가 발생할 수 있습니다.
전송 도구(예: Babel)를 사용하여 코드를 ES6에서 ES5로 전송하여 모든 브라우저에서 실행되도록 해야 합니다.모든 브라우저에서 전체 ES6 사양을 지원하는 것은 아닙니다.
let과 const를 안아주고 var를 영원히 떠나게 하세요!
나는 네가 좋아하고 배운 것이 있기를 바란다.즐거운 코드!:)
당신의 생각을 알려주고 개발자에 대한 멋진 내용을 더 많이 알려주세요:)

Coding Sam@ 중