ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • var, let
    JS(javascript) 2020. 11. 24. 10:54

    *혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.

     

    var, let의 차이가 뭘까?

     

    그리고 왜 var보다 let 사용을 권장할까?

     

    let은 block scope를 지원하기 때문이다.

     

    하지만 var는 지원하지 않는다. 그럼 무슨 문제가 발생할까?

     

    // 예시 코드 - var
    
    for(var i = 0; i < 3; i++) {
        
        console.log(i);
        for(var i = 0; i < 3; i++) {
            console.log(i);
        }
    }
    
    // 출력 결과
    
    0
    0
    1
    2

     

     

    출력 결과가 좀 이상하지 않은가?

     

    적어도 block scope를 지원하는 언어를 다루던 사람 입장에선 이상하게 느껴질 것이다.

     

    대략 짐작했겠지만 해당 코드에서는 안쪽 반복문에서 바깥쪽 반복문의 i에 관여한다. (참조 수준이 아니라 아예 값을 바꿔버린 것이다.)

     

    var를 사용한 변수 선언은 최상단에서부터 그 아래 영역들까지 모두 공유된다. (함수, 조건문, 반복문 등등의 영역)

     

    그렇다면 같은 코드를 let을 사용해 작성하면 어떨까?

     

    // 예시 코드 - let
    
    for(let i = 0; i < 3; i++) {
        
        console.log(i);
        for(let i = 0; i < 3; i++) {
            console.log(i);
        }
    }
    
    // 출력 결과
    
    0
    0
    1
    2
    1
    0
    1
    2
    2
    0
    1
    2

    var를 사용한 경우와 다른 출력 결과이다.

     

    위에서 말했듯 let은 block scope를 지원한다.

     

    그렇기 때문에 안쪽 scope에서 i의 값을 바꿔줘도 바깥쪽 scope의 i에는 아무런 영향이 없다.

     


     

     

    오늘은 이렇게 var와 let의 차이를 알아봤다.

     

    대부분의 programming language에서 block scope를 지원한다.

     

    block scope 안에 변수를 선언할 때 이전 상위 계층의 변수와 겹치는 것을 신경쓰지 않아도 되므로 편하다.

     

    그리고 ES6 이후로 javascript도 let을 통해 block scope를 지원한다.

     

    이를 통해 더욱 깔끔한 코드를 작성할 수 있을 것이다.

     

    또한 에러 발생률을 낮출 수 있을 것이다.

     

    개인적으로 var 대신 let을 써야 할 이유로 충분한 것 같다.

     

    끝.

     

     

     

    참고 사이트:

    blog.usejournal.com/awesome-javascript-no-more-var-working-title-999428999994

     

    Why don’t we use var anymore?

    If you used to code in Javascript in the old days, you used the “var” keyword a lot. There was no other way to declare a variable. It is…

    blog.usejournal.com

     

    'JS(javascript)' 카테고리의 다른 글

    localStorage, JSON, stringfy, parse  (0) 2020.11.24
    setInterval  (0) 2020.11.24
    Date, innerHTML  (0) 2020.11.23
    querySelector  (0) 2020.11.23
    document interface  (0) 2020.11.23
Designed by Tistory.