analogcoding

ES6 : let , const 본문

Study JS for me/Keyword

ES6 : let , const

be well 2019. 5. 10. 15:44


ES6 이전 변수 선언은 var 키워드 뿐이었지만 var 키워드에는 몇 가지 문제점이 있었다.

 

var 의 문제점.

 

1. 함수 레벨 스코프를 가지므로 전역 함수 외부에서 생성 될 경우 모두 전역 변수여서 전역변수가 너무 많아진다.

 

2. 생략이 허용되므로 암묵적 전역변수가 생길 수 있다.

 

3. 변수의 중복 선언이 허용된다.


 

이러한 문제들과 더 편리한? 코딩을 위해 새로 도입 된 let 과 const .

 


let 

1. 재할당이 자유롭다.

 

2. var 와 다르게 블록 레벨 스코프를 가진다.

 

모든 코드 블록 {} 안에서 선언된 변수는 코드 블록 내에서만 유효하고 블록 외부에서 참조할 수 없다. 즉 내부 선언 지역 변수이다.

 

let foo = 123; // 전역 변수

{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

 

3. 변수의 중복 선언 금지

 

let 은 같은 이름을 갖는 변수를 중복해서 선언할 수 없다. 변수를 중복 선언하면 에러가 발생한다.

 

var foo = 123;
var foo = 456;  // 중복 선언 허용

let bar = 123;
let bar = 456;  // Uncaught SyntaxError: Identifier 'bar' has already been declared

 

4. 호이스팅

 

var 와 달리 변수 선언이 뒤에 있을 경우 에러가 발생한다. 이는 var 의 경우 선언과 초기화가 한번에 이루어지지만 

let 의 경우 변수가 아직 초기회되지 않아서 메모리 공간이 확보되지 않아서 참조할 수없다.
스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ라고 한다.(TDZ=일시적사각지대)

 

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

 

5. 전역객체와의 상관

 

var 로 선언된 변수를 전역 변수로 사용하면 전역 객체의 프로퍼티가 되지만 let 은 보이지 않는 개념적인 블록 내에 존재한다.

 

var foo = 123; // 전역변수

console.log(window.foo); // 123

let foo = 123; // 전역변수

console.log(window.foo); // undefined

const

 

1. 재할당이 금지되며 const 는 반드시 선언과 동시에 할당이 이루어져야 한다. 

 

const num = 123;
num 456 // TypeError: Assignment to constant variable.

 

 

 

2. 블록 레벨 스코프를 가진다.

 

모든 코드 블록 {} 안에서 선언된 변수는 코드 블록 내에서만 유효하고 블록 외부에서 참조할 수 없다. 즉 내부 선언 지역 변수이다.

 

3. const 의 변수 타입이 객체인 경우 할당된 객체의 내용은 변경이 가능하다.

 

const user = { name: 'Lee' };

// const 변수는 재할당이 금지된다.
// user = {}; // TypeError: Assignment to constant variable.

// 객체의 내용은 변경할 수 있다.
user.name = 'Kim';

console.log(user); // { name: 'Kim' }

객체의 내용이 변경되더라도 객체 타입 변수에 할당된 주소값은 변경되지 않는다. 

만약에 명시적으로 객체 타입 변수의 주소값을 변경해야 한다면 let을 사용한다.

 

 

정리.

 

재할당이 필요한 경우엔 let 변수의 스코프는 최대한 좁게 만든다.

변경이 필요하지 않은 변수와 객체의 경우 const를 사용한다.

'Study JS for me > Keyword' 카테고리의 다른 글

Arrow function  (0) 2019.05.11
Template literals  (0) 2019.05.11
call & apply & bind  (0) 2019.04.27
Execution context 와 This  (0) 2019.04.26
Closure  (0) 2019.04.23
Comments