ES6알아보기 02 - Varaiables(var, let, const)

ES6알아보기 02 - Varaiables(var, let, const)

2018, May 22    

지난시간에는 ES6가 무엇인지에 대해 간단하게 알아봤습니다.
이번시간에는 ES6에서 추가된 변수 선언 타입에 대해서 알아보도록 하겠습니다.

기존의 선언타입: var
추가된 선언타입: let, const

기존에 있던 이 var 라고 하는 선언타입은 매우 너그러운 편이 였습니다. 어디서 선언 하는지 상관이 없었고, 자유도가 너무 높아? 오히려 에러가 발생하거나 하는 경우도 있었습니다. 여기서 기존에 없던 let, const 선언 타입이 추가 되었습니다.



var, let, const의 차이 알아보기

먼저 var 과 let 의 차이부터 알아보겠습니다. 이 둘의 가장 큰 차이는 유효범위 의 차이 입니다.


  • 유효범위의 차이

아래의 예에서 차이를 알아보겠습니다.

function printNum() {
  var num = 10;
  if (true) {
    let num = 20;
    console.log(num); // 결과값: 20
  }
  console.log(num); // 결과값: 10
}

위와 같이 let 으로 선언하게 될 경우 변수가 선언된 {} 스코프 안에서만 유효하게 됩니다. var 로 선언된 변수의 경우는 function 안에서는 어디에서는지 유효하게 됩니다.


  • Global로 선언되는 경우

global로 function 스코프 밖에서 선언되는 경우에는 유효범위에는 크게 차이는 없습니다. 하지만 window객체의 프로퍼티로는 사용할 수 없다는 차이점이 있습니다.

var hello = 'hello'; // 전역변수
let world = 'world'; // 전역변수

console.log(window.hello) // 'hello' 가 출력됨
console.log(window.world) // undefined


  • 중복선언의 차이

let에는 중복선언 제한이 있습니다. 아래와 같이 같은 레벨(동일 스코프) 안에서 같은 이름으로 선언된 경우 Syntax error 를 출력하게 됩니다.

var wow = 10;
let wow = 30; // SyntaxError 가 출력됩니다.

// 함수 안에서의 에러-1
function printNum() {
  var num = 10;
  let num = 20; // 여기서 SyntaxError 가 출력됩니다.
  if (true) {
    let num = 30; // 여기서는 스코프범위가 달라지기 때문에 에러가 출력되지 않습니다.
  }
}

// 함수 안에서의 에러-2
function printNum2() {
  let num = 10;
  if (true) {
    var num = 20; // let으로 선언된 변수의 유효범위 안에서 동일이름의 변수가 또한번 선언되었기 때문에 error가 출력됩니다.
  }
}


  • const 사용

앞서 let에 대해 설명했기 때문에 const에 대해서는 크게 설명할 필요가 없을 것 같네요. 한가지 특징 말고는 let과 거의 동일하기 때문입니다. const 는 상수입니다. 당연히 한번 값이 초기화된 후에는 값이 변할 수 가 없습니다. 그 외의 유효범위나 중복선언 등의 사양은 let과 동일하기 때문에 설명은 생략하도록 하겠습니다.

Twitter Facebook Google+
# javascript