ES6 문법 정리 (1) - let, const 키워드

ES6로 오면서 새롭게 등장하는 키워드로 let과 const가 있습니다.

const 같은 경우는 C 계열의 언어에서 많이 보셨을 거라고 생각하고, 변수의 값을 수정하지 못하도록 하는 것 역시 비슷합니다. 다만 let이 익숙치가 않을텐데요. 이건 자바스크립트의 scope와 관계가 있기 때문에 정리가 필요할거 같습니다.

그럼 시작합니다~

※ let 키워드

예제를 먼저 보겠습니다.

var name1 = "kevin";

function fn1(){
  for(var h = 0; h < 100; h++){

  }
  console.log(h);

  for(let i = 0; i < 100; i++){

  }
  console.log(i);

  if(1===1){
    var name2 = "name is ..";
    let name3 = "case if";
  }

  console.log(name2);
  console.log(name3);
}

fn1();

실행결과는 다음과 같습니다.

똑같은 for문인데 변수를 var로 선언했을때는 for문 밖에서도 변수가 유효한 반면에 let으로 선언하니 for문 밖에서 변수가 유효하지 않다고 나오네요. 이번엔 for문 부분을 주석처리해서 다시 돌려보겠습니다.

if문 안에서 변수를 선언하고 밖에서 변수값을 출력해봤는데요. 여기서도 var 키워드와 let 키워드의 차이가 분명하게 나타나네요. var로 선언한 변수는 if문 밖에서도 유효한 반면, let은 그렇지 않죠.

let으로 선언된 변수는 block 단위의 scope를 가지기 때문에 선언된 block 밖에서는 유효하지 않습니다. 반면 var로 선언됬었던 기존의 자바스크립트 변수들은 함수 단위의 scope를 가지기 때문에 함수 안에 선언되면 그 함수 안에서는 얼마든지 접근할수 있는거죠. 잘 살펴보면 let 키워드가 다른 프로그래밍 언어에서의 변수 선언 방식과 상당히 유사하죠? 그렇기 때문에 ES6 에서의 권장방식은 var 키워드 대신 let이나 const를 활용하는 것입니다. var 키워드는 구 버전 자바스크립트 소스의 호환성을 위해 작동은 하지만 가급적 지양하라는 거죠.  기존의 자바스크립트 소스를 애매모호하게 만들던 요소들을 최대한 줄이려는걸로 생각됩니다.

※ const 키워드

const 키워드로 선언된 변수는 값의 수정이 안된다고 했습니다만, 해당 변수에 객체를 할당했다면 얘기가 조금 달라집니다. 예제를 보면서 비교해보죠.

변수에서 바로 값을 변경하거나 재할당 하는 건 안되지만, 변수를 배열객체로 만든다음 메소드로 값을 넣고 빼는건 가능합니다. const로 객체를 변수에 선언한 경우 변수는 객체의 주소값을 계속 유지하므로 객체가 갑자기 바뀌는 것을 막는 효과를 가집니다.  그리고 const 역시 let과 동일한 block 단위의 scope를 가지게 합니다.

※ 정리

자바스크립트에서 var 키워드는 scope가 지정되는게 다른 프로그래밍 언어와 달랐고, 이런 부분이 자바스크립트를 ambigious(애매한) 하게 만드는 요인이었습니다. ES6는 자바스크립트를 더욱 유연하게 만들면서도 ambigious한 요인들은 없애기 위해 많은 변화를 주었고, 그 중에 하나가 let과 const 키워드의 도입이 아닐까 생각합니다.

다음에는 Destructuring으로 찾아뵙겠습니다~