객체구조분해할당 주의사항

function f1(){
   title;
}
f1();

위코드가 실행되면 Uncaught ReferenceError: title is not defined 에러가발생하면서 스크립트는 중단된다.

title변수에 접근하는데 title변수가 가리키는 메모리번지가 없으므로 에러가 발생한다.


함수f1의 코드블럭내 변수는 지시자에의해 정의되어야 메모리가 확보된다.

{
   title, 
   width, 
   height
}

여기서 사용된 중괄호는 코드블럭이며 바로 실행된다. 위 함수코드와 같이 title변수가 가리키는 메모리에접근하지만 존재하지 않아 에러가 발생한다.

let title, width, height;
{
   title, 
   width, 
   height
};

변수들이 선언되어있어 메모리확보되어 있어 에러가 발생하지 않는다.

let title=1;
{ title };

이것은 간편객체선언 표현식인데 참조하는 변수가 없으니 객체는 생성은 되었지만 참조되지않아 바로 가비콜렉션대상이 되는 것이다.

let title, width, height;
{
   title, 
   width, 
   height
};

이 표현식또한 위와같이 임시객체선언문이다.

let title, width, height;
{ title, width, height} = {title: "Menu", width: 200, height: 100};

임시객체에 새로운 객체를 할당하는 표현식이고 임시객체는 소멸된다.

let title, width, height;
({title, width, height} = {title: "Menu", width: 200, height: 100});

소괄호로 묶으면 엔진은 {title, width, height}을 객체생성표현식으로 평가하지 않고 title,width,height를 식별자로 평가하는데 이미 선언된 변수이므로 에러가 발생되지 않고 변수로 인식한다.

이제 엔진은 객체구조분해할당으로 처리한다.

if(true){
	let num = 1;
    function f1(){
        console.log(1);
    }
}
console.log(num); // 에러

while (true) {
    function f2(){
        console.log(2);
    }
    break;
}

f1();
f2();

코드블럭내 let 지역변수는 호이스팅되지 않으며 let 지시자를 만나기전까지 접근되지 않는다.

코드블럭내(함수코드블럭제외) 함수는 호이스팅되어 접근이 가능하다.
엄격모드에서는 호이스팅되지 않는다.