호이스팅

지금 해야하는 일은 ES6의 클래스 개념을 활용하여 js 프론트 개발 하는 것.
몇 가지 개념을 숙지해야 삽질을 줄일 수 있을 것 같다.

javascript... 싫다.. 하지만 해야해..

호이스팅

출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting

인터프리터가 변수 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화, let/const는 호이스팅 시 변수를 초기화 하지 않음.

• let/const가 호이스팅을 하지 않는 게 아님. 초기화되지 않은 상태로 참조할 경우 reference error 발생 가능.

"변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것.
따라서 변수 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.
단 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 다.

출처 : https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

• 좀 더 풀어 말하자면.. 코드를 실행하기 전 변수 또는 함수 선언이 해당 스코프의 최상단으로 끌어 올려지는 것 같은 현상을 의미한다. (실제 끌올x)
• 왜 일어나냐?
  js엔진은 코드 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다. 그 과정에서 모든 선언(var, let, const, function, class)를 스코프에 등록한다.
• 즉, 코드 실행전에 이미 선언이 저장되어 있기 때문에 선언문보다 참조/호출이 나와도 오류없이 동작한다. 그래서 선언이 파일 맨 위로 끌올된 것처럼 보임.
• 실행 컨텍스트란? 코드가 실행되기 위해 필요한 환경
• 스코프란? 유효 범위.

일반적

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

/*
결과: "제 고양이의 이름은 호랑이입니다"
*/```


##### js에서는 이것도 일반적이라는 것
```javascript
catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/```



- 선언만 호이스팅 대상이다.

```javascript
console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

console.log(num); // ReferenceError
num = 6; // 초기화

예는 호이스팅이 일어나서 에러 발생.

let foo = 1;
{
  console.log(foo);
  let foo = 2;
}```

내가 맞게 이해했나 모르겠지만 호이스팅 과정에서 이렇게 되지 않았나 추측
```javascript
let foo;
foo=1;
{
  let foo;
  console.log(foo); // 에러
  foo = 2;
}```



### js 변수의 유효 범위
- 블록 범위가 아니라 함수 범위
- 같은 함수면 마구 참고 가능함
- 블록 범위로 쓰고 싶으면 let
- 변수명 중복 선언 가능, 이 때 누굴 참조하냐? 호출했을 때 가장 가까이에 있는..(전역보다 지역)
- var 생략 가능


#### 유의할 점
```javascript
var cat;
cat = "meow";

이 경우, 메모리에 undefined 값을 가지는 cat이 먼저 할당된 후, 새로운 곳에 "meow"라는 값이 할당된다.

var cat = "meow";

이 경우는 메모리에 undefined 값을 가지는 cat이 먼저 할당된 이후에 이 메모리 공간이 지워지고 "meow"를 저장한다.