🐱‍🐉 block scope

TDZ

TDZ : Temporal Dead Zone (임시 사각지대)
이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간

호이스팅

위에서 부터 아래로 코드를 읽는 식으로 따라야하는데, 소스코드가 너무 길어서 실수로 밑에서 선언한 변수를 써먹으려고 했을 때 어떠한 오류도 뿜지 않고 그냥 넘어간다. 근데 개발자 입장에서는 오류를 찾기 편리해야 좋다.

console.log(a);

var a = 1;

그래서 이것을 방지하기 위해서 ES6가 나온 것이다.

• 기존 var : (1) 변수명만 위로 끌어올리고 (2) undefined를 할당한다.

• ES6 let & const : 블록 스코프이다. 블록 안에서만 작동한다. 변수명만 위로 끌어올리고 끝이다.

This ?

var value = 0;

var obj = {
	value: 1,
    setValue: function() {
    this.value = 2; // ⭐ this === obj
    (function() {
    	this.value = 3 // ⭐ this === window 바로 함수를 실행 했기 때문이다.       
    })();
  }
}

obj.setValue(); // 3
console.log(value); // 2
console.log(obj.value); // undefined

그냥 함수를 즉시 실행 했을 때는 window를 가르킨다. 그리고 그냥 value를 호출할 때는 obj의 2를 출력한다.
하지만, 이 값들을 모두 같은 this를 바라보게 하고싶다면 ??

1. this를 변수에 담아 재사용

var value = 0;

var obj = {
	value: 1,
    setValue: function() {
    this.value = 2;
    
    ⭐var self = this;
    
    (function() {
    	⭐self.value = 3 
    })();
  }
}

obj.setValue(); 
console.log(value); // 0
console.log(obj.value); // 3

2. call/apply

var value = 0;

var obj = {
	value: 1,
    setValue: function() {
    this.value = 2;
    (function() {
    	this.value = 3;
    }).call(this);
  }
}

obj.setValue(); 
console.log(value); // 0
console.log(obj.value); // 3

참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

3. block scope

var value = 0;

var obj = {
	value: 1,
    setValue: function() {
    this.value = 2;
    {
    	this.value = 3;
    }
  }
}

obj.setValue(); 
console.log(value); // 0
console.log(obj.value); // 3

외부에 있는 변수와 별개로 분리된 어떤 스코프가 필요하다. 하지만 this를 쓰고 싶으면 블록 스코프 { } 감싸서 사용하면 된다. 블록스코프 안에 있는 것은 this 바인딩을 아예 하지 않는다.

⭐ 함수 스코프와 차이점이라면 this 바인딩을 하려면 전역객체로 사용했는데, 블록 스코프는 아예 밖에 있는 this 바인딩을 그대로 사용한다. === (var value = 0;)