자바스크립트 클래스 - 호이스팅

자바스크립트 클래스(Class) - 호이스팅(Hoisting)

[1]: 함수 레벨 스코프 vs 블록 레벨 스코프

var a = 123; // 전역변수
console.log(a);

{
var a = 333; // 전역변수 --> 함수 레벨 스코프, var 키워드는 중복이 허용. 호이스팅 O, 함수가 아닌 변수 선언은 모두 전역.

}
console.log(a);
function A() {
var a = 333; // 전역변수 --> 함수 레벨 스코프, var 키워드는 중복이 허용. 호이스팅 O, 함수가 아닌 변수 선언은 모두 전역.
}
console.log(a);

[2]: 호이스팅

끌어올리기(scope)
js는 기본적으로 모든 선언문(var, let, const, function, class)를 --> 호이스팅
호이스팅 == 스코프 안의 어디에서든 변수 선언은 최상위에서 선언한 것과 동일하다!!

var 키워드와 let, const 키워드로 선언한 변수가 차이가 있다.
var(함수레벨 스코프) / let(블록레벨 스코프)
var => 함수 내부에 선언한 변수는 모두 지역변수
let => 블록 내부에 선언한 변수는 모두 지역변수

console.log(testA); // 참조 에러 x -> undefined ... 호이스팅
var testA =3 ;

==> 호이스팅시 아래와 같은 방식으로 코드를 해석
/
var testA
console.log(testA);
testA = 3 ;
/

console.log(testB); // ERR ... 호이스팅은된다.. 근데 왜..? --> 'Temporary Dead Zone'
// err msg : Cannot access 'testB' before initialization
let testB;

function sayHello() {
return name // 에러를 뱉지 않는것 --> name이 호이스팅되었다는것(선언)
}
let name = 'hi' // 블록내부가 아니기 때문에 전역
console.log(sayHello()) // hi

자바스크립트는 총 3단계를 걸쳐서 변수를 생성
1. 선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다.
2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다, 이때 할당되는 값은 undefined다.
3. 할당(Assignment): 변수 객체에 값을 할당한다.

var는 호이스팅시 선언 + 초기화 까지 된다.!! 즉 선언과 동시에 undefined가 할당이된다.
let, const 는 호이스팅시 선언만된다.!!! 즉 초기화가 이루어지지 않는다.==> 이 단계에서 TDZ에 들어가는 것이다.
=> 너, 선언은 되었는데, 메모리 할당이 안되어있네..?

[3]: 클래스 호이스팅

console.log(Person); //Cannot access 'Person' before initialization
// let, const 와 같은 에러.. 호이스팅시 선언만되고 초기화(메모리할당)되지 않음.
class Person {
}

var str1 = 'Hello, world';

const testFun = function() {
console.log(str1); // undefined ... var는 함수레벨 스코프.. 호이스팅은됨 (선언 + 초기화)
var str1 = 'Hello, korea';
};

let str2 = 'Hello, world';

const testFun2 = function() {
// console.log(str2); // Cannot access 'str2' before initialization ... let 블록레벨 스코프.. 호이스팅은됨 (선언)
let str2 = 'Hello, korea';
};
testFun2();

• 클래스 상속

  	class Parent {}
  	class Child extends Parent{} // 이렇게 상속하면 문제없음
  	class Child2 extends Parent2{} // err발생 --> 초기화 reference error(참조 에러) 발생
  	class Parent2 {}