ES6 [ES6] let, const 블록 레벨 스코프

황제낙엽 2018.04.11 06:06 조회 수 : 174

sitelink1 http://jinbroing.tistory.com/154 
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  
[자바스크립트 스코프]
- 자바스크립트의 변수 범위는 블록( { …. } )이 아닌 function level scope
- 함수 바깥에 정의된 변수와 함수는 전역 객체(window)의 멤버
- 함수 내부에서 var 키워드로 변수를 선언하지않으면 전역객체의 멤버로 정의됨
- 전역변수의 남발
 
 
[블록 레벨 스코프]
- ES6부터 추가된 문법을 통해 블록 레벨 스코프 변수를 선언할 수 있음
- 기존 함수 레벨 스코프를 가지는 var로 변수를 선언하면 전역변수 or 함수의 변수
 
 
[let]
1) 블록 레벨 스코프 변수 선언 키워드
var test = function(a, b, start){     
     if(start){
          let result = a + b;    
     }

     return result;
}

test(1, 2, true); // undefined
- result는 let으로 선언되었기때문에 스코프는 if문 안에서만 유효함
- if문 바깥의 result는 test 함수 내부 변수나 전역객체에서 찾으려고 했으나 못찾으면서 undefined를 리턴
 
 
2) var는 여러번 같은 변수명으로 선언하는 것이 가능하나 let으로 선언하는 변수는 블록 안에서 1개만 존재
var name = 'jinbro';

{
     var name = 'jinhyung park';
}

var test = function(){
     var name = 'jinhyung';
     console.log(name);  // jinhyung

     let age = 26;
     let age = 26;
}

console.log(name); // jinhyung park


test();
- syntax error 발생함 : 두개의 같은 변수명을 가진 let 변수가 선언되었기 때문에
- var로 선언한 경우 전역객체의 멤버와 함수 객체의 멤버로 갈릴 뿐 아니라 새로운 값을 재할당함
 
 
3) 호이스팅에서의 차이
- 호이스팅이란? 자바스크립트의 변수 선언부와 할당문을 구분하고 선언부를 모두 끌어올려 초기화 시키는 것
- 초기화 값은 undefined
- 총 3단계
(1) 선언 : Variable Object 스코프에 등록함
(2) 초기화 : undefined로 초기화
(3) 할당 : 실제 값을 할당 - 실행될 때(할당문에 도달했을 때)
 
 
- var 변수는 선언과 초기화 단계를 한번에 함 : 코드 상에서 할당문 전에 접근하여도 undefined를 리턴하지 에러나지않음
console.log(a); // undefined

var a = 10;

 

- let 변수는 선언과 초기화 단계를 쪼갬 : Variable Object 스코프에 등록하지만, 초기화는 하지않고 할당문을 만났을 때 초기화함
- 할당 단계가 곧 초기화 단계가 된 것
console.log(b); // uncaught reference error 발생, b is not defined

let b = 20;

 

 
4) 클로저 : let을 사용한다면 코드가 간결해짐
- 외부함수가 return으로 종료가 되어 스코프 참조를 못할 것 같지만 내부 함수가 외부 함수의 scope를 참조할 수 있음
var outer = function(){
     var time = 0;

     return function(){
          return time++;
     }
}

var inner = outer();
inner(); // 0, innerVO - outer VO scope chain - time
inner(); // 1
inner(); // 2
inner(); // 3

var inner2 = outer();

inner2(); // 0

 

 
- var로 for문에 i를 선언할 경우 i는 전역 변수가 되고, arr에 푸쉬된 함수들은 실행할 때 i를 참조하는데, 전역변수 i를 참조하기때문에 3이 세번 출력됨
var arr = [];

for(var i=0; i<3; i++){
    arr.push(function () { console.log(i) });
}

for(var j=0; j

 

 
- for문의 i를 let으로 선언할 경우 함수가 참조하는 값의 i는 블록 레벨 스코프의 i, 함수가 존재하는 한 i는 지속적으로 생존
var arr = [];

for(let i=0; i<3; i++){
     arr.push( function () { console.log(i) } );
}

for(var j=0; j

 

 
- 아래는 arr[j](익명함수) 내부임, 스코프 정보를 보면 block 프로퍼티가 있음
block-level-closure.jpg

 

 

5) 전역객체의 프로퍼티

- var로 전역변수 선언한다면 window 객체의 프로퍼티가 됨 : 변수가 함수에서 var로 선언되지않고

 

var isGlobal = true;

console.log(window.isGlobal); // true

 

 

 

 

- let으로 전역변수를 선언하면 window 객체 프로퍼티가 되지않음 

 

let isGlobal = false;

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

 

 

 

 

[const]

- 변수 선언 키워드

- 읽기 전용을 만듬 

- let과 마찬가지로 블록 레벨 스코프를 가짐

- let과의 차이점이 있음

 

1) let은 값 재할당은 가능하지만, const는 재할당하지못함

 

let a = 10;

a = 20;

 

const b = 10;

b = 20; // Uncaught TypeError: Assignment to constant variable

 

 

 

 

 

2) const로 선언된 객체 : 객체 주소값이 변수에 바인딩되면 변수에 바인딩된 주소값을 바꿀 수 없음

 

const jinbro = {};

jinbro.name = 'jinbro';

 

 

jinbro = {}; // 새로운 객체 할당, 불가 Uncaught TypeError: Assignment to constant variable

 

- 값(값, 객체주소)을 재할당(변경)하는 것은 불가하나, 객체주소가 가리키는 객체의 프로퍼티 변경은 가능함

 

 

3) 바인딩되는 값을 변경하지않는 경우에는 우선적으로 const를 사용해라

 

 

[더 할 것]

- immutable object : Object.freeze

 

 

[참고자료]

- MDN, let : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

- poiemaweb, block-level scope : http://poiemaweb.com/es6-block-scope

- MDN, const : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

이 게시물을
목록
쓰기 태그