let과 const의 차이

10월 11, 2017

let과 const 키워드에 대해서 자세하게 공부해보자.

let과 const는 다른 언어들과의 차이를 줄여주고 block-scope 변수와 상수를 정의하는 방법을 제공한다.

`let`

ECMAScript 5 이후에, 자바스크립트는 function scope와 global scope 두가지타입의 scope가 있었다. 이것은 많은 불안감과 예상치 못한 상황이 발생할 가능성이 존재했었다. 이유는 바로 자바스크립트의 block scope 의 부재때문인데, 이는 접근 가능성과 변수의 생명주기, block에서의 정의에 영향을 미친다. block은 괄호 안에서 모든것이 존재한다.

function foo() {
   var par = 1;
   if (par >= 0) {
      var bar = 2;
      console.log(par); // prints 1
      console.log(bar); // prints 2
   }
   console.log(par); // prints 1
   console.log(bar); // prints 2
}
foo();

코드를 실행시키면 다음과 같은 결과를 얻을 수 있다.

1 2 1 2

대부분의 개발자들이 다른 언어들에 미루어 보았을 때, if block 밖에서 bar에 접근할 수 없다고 생각한다. 예시에서 C언어였다면 if문 밖에 있는 bar는 undeclared at line ... 과 같은 에러를 발생 시켰을 것이다.

ECMAScript 6에서는 block scope를 이용할 수 있다. ECMA의 관계자들은 개발자들이 var 키워드를 버리지 못할거라고 생각했다. 그래서 let이라는 키워드를 만들게 되었다. let을 통해 block scope를 이용할 수 있게 되었다. 추가적으로 var 와 다르게 let 은 hoisted 되지 않는다. 만약 let을 통해 선언하기 이전에 참조한다면 참조에러를 발생시키게 될것이다. 하지만 실행하는 측면에서는 어떻겠는가? 아래의 예시 코드를 보자

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + i);
   });
}

위의 예시는 아주 잘 알려진 scope와 handlers에 관련된 예시이다.

let을 사용해서 쉽게 위의 이슈를 해결할 수 있다.

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   let j = i;
   nodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + j);
   });
}

Cool, isn’t it?

이제 나쁜소식을 전하자면, 브라우저에서 디폴트로 지원하지 않을 수도 있다.

var와 let의 차이점을 보자.

'use strict';

var varNodes = document.getElementsByClassName('var');
for (var i = 0; i < varNodes.length; i++) {
   varNodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + i);
   });
}


var letNodes = document.getElementsByClassName('let');
for (var i = 0; i < letNodes.length; i++) {
   let j = i;
   letNodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + j);
   });
}

`const`

const 는 일반적인 개발자라면 const라는 키워드를 보았을 때 변경할 수 없는 변수와 같은 이름을 연상할 것이다. const는 global또는 local에서 사용할 수 있는 상수를 생성할 때 사용한다.

상수는 const를 통해서 정의할 수 있는데, scope규칙이 적용되어 재선언 할 수 없다. 또한 상수는 let 과 같이 block scope가 적용된다. 선언 이전엔 접근 할 수 없고 접근한다면 참조에러가 발생될 것이다.

이경우에서도, 아주 드물게 브라우저에서 지원해주고 있다. const를 지원해주는 브라우저에 대해 자세하게 알기를 원한다면 ECMAScript 6 compatibility table을 확인하시면 될것같습니다.

다음은 const를 사용한 예제이다.

'use strict';

function foo() {
   const con1 = 3.141;
   if (con1 > 3) {
      const con2 = 1.414;
      console.log(con1); // prints 3.141
      console.log(con2); // prints 1.414
   }
   console.log(con1); // prints 3.141
   try {
      console.log(con2);
   } catch(ex) {
      console.log('Cannot access con2 outside its block');
   }
}
foo();

위 코드는 JSFiddle을 이용하는것도 볼 수 있다. 브라우저별로 차이점이 있을 수 있다.

결론

let과 const를 통해 좀더 향상된 javascript를 이용할 수 있다. 불행하게도 브라우저가 지원하지 않아서 사용할 수 없을지 모르겠지만 그래도 자바스크립트는 발전하고 있습니다.

출처: http://www.sitepoint.com/preparing-ecmascript-6-let-const/

이 블로그 검색

Lanace 블로그