Hoisting

1. Hoisting(호이스팅)

변수 선언 방식에는 var, let, const 총 세가지가 있다.
이 중에 var는 호이스팅이라는 개념에 의해 다음과 같은 문제가 발생한다.

만약 아래코드와 같이 변수를 선언하기만 하고 값을 할당하지 않으면 변수 선언에 의해 확보된 메모리 공간은 비어있는 것이 아닌 undefined라는 값이 암묵적으로 할당되어 초기화 된다.

var score;

• 값의 재할당. 재할당이란 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.
  값을 재할당할 수 없다면 변수가 아니라 상수라 한다.
  var을 이용해 변수에 값을 재할당하면 기존의 값이 있던 메모리 공간을 지우고 할당하는 것이 아닌 새로운 공간을 확보하여 값을 할당하기 때문에
  아무도 사용하지 않는 쓰레기 값들이 생겨나는데 이런 쓰레기값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.
  단, 언제 해제될지는 예측할 수 없다.

  "가비지 콜렉터" : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능을 말한다. 더 이상 사용되지 않는 메모리란 간단히 말하자면 어떤
  식별자도 참조하지 않는 메모리 공간을 의미한다. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수를 방지한다.

2. 호이스팅 예제

console.log(child)
var child = "철수" // 호이스팅 됨

console.log(child2)
const child2 = "영희" // 호이스팅 되지만, TDZ에 들어가서 접근 불가

console.log(child3)
let child3 = "훈이" // 호이스팅 되지만, TDZ에 들어가서 접근 불가

hello()
function hello(){
    console.log("안녕하세요!!")
}

코드를 입력했을 때 자바스크립트 코드는 인터프리터에 의해 한줄씩 순차적으로 실행되므로 console.log가 가장먼저 실행되고
순차적으로 다음 코드를 실행할것 처럼 보이지만, 자바스크립트 고유의 특징인 "변수 호이스팅"에 의해 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하여
console.log에는 undefined가 출력된다.

const , let 도 var의 방식과 같이 호이스팅이 되지만
처음 변수를 선언하는 곳을
TDZ(Tempral Dead Zone) 으로 지정해 접근을 못하게 해서
처음 console.log에 undefined가 출력되지 않는다.

3. 중복선언 예제

var child = "철수"
var child = "영희"
console.log(child) // "영희"가 출력된다.

const child2 = "철수"
const child2 = "영희"
console.log(child2) // Uncaught SyntaxError: Identifier 'child2' has already been declared

let child3 = "철수"
let child3 = "영희"
console.log(child3) // Uncaught SyntaxError: Identifier 'child3' has already been declared

function hello(){
    console.log("안녕하세요!!")
}
function hello(){
    console.log("반갑습니다@@")
}
hello() // "반갑습니다@@"가 출력된다.

4. 함수 호이스팅+중복선언 예제

hello() // "반갑습니다@@"가 충력된다.
function hello(){
    console.log("안녕하세요!!")
}

function hello(){
    console.log("반갑습니다@@")
}

5. 이상적인 함수 작성법

TDZ를 지정하는 것으로 예상치 못한 호이스팅 문제를 피해야한다.
변수는 위에서 언급한 let, const를 사용하면되고,
함수는 아래와 같이 작성해주는 것이 줗다.

hello()
const hello = () => {
    console.log("안녕하세요~~")
}