[JavaScript] 선언 전에 호출한 변수와 함수의 차이점을 알아보자

오늘 변수와 함수를 선언 전에 호출 해보는 예제를 테스트 해 보던중 

궁금점이 생겼다.

 

우선 코드를 먼저 살펴보면

      document.write(hello());
      document.write(i);
      
      var i = "hi";
      
      function hello() {
        return "안녕 함수";
      }

 

var 변수와 함수를 선언 한 뒤

선언 이전에 변수와 함수를 불러내도록 입력하였다.

 

👉 결과

변수는 undefined 가 출력되고

함수는 정의된 실행문대로 출력이 되었다.

 

🤔 그런데 왜 똑같이 선언 전에 호출을 하였는데 변수는 아무것도 없고 함수만 있을까?

우선 변수가 undefined 인 이유 부터 살펴보자면

 

호이스팅 이라는 개념을 간단히 보자.

 

호이스팅이란 끌어 올리다 라는 뜻으로, 분석 단계에서 메모리에 저장된 변수 선언과 함수 선언을

최상단으로 끌어 올리게 된다.

 

이때 변수는 초기화 된 상태로 선언만 저장되기 때문에 

선언 이전에 불러낼 경우 값이 없는 상태인 undefined가 출력되는 것이다.

---

❓ 그러나 이때 var 변수가 아닌 let / const 변수라면

let 과 const 는 ES6에서 도입된 변수 선언 방식으로 TDZ 개념이 적용된다.

 

TDZ 란?

일시적 사각지대 라는 뜻으로,

변수가 선언된 이후 실행 컨텍스트가 변수의 초기화 지점에 도달하기 전까지의 구간이다.

 

따라서 분석단계에서 변수가 선언된 상태로 저장되고 실행 단계에서 변수를 초기화하기전까지의 구간을 

TDZ 라고 한다.

 

let 과 const는 이 구간에서 접근을 하게 될 경우 에러가 발생하게된다.

---

 

❓ 그렇다면 함수는 어떨까 ?

변수는 분석 단계에서 메모리에 저장 시 초기화되어 저장 되는 반면

 

함수는 전체 함수 정의가 메모리에 저장된다. 

 

따라서 실행 단계에서 선언 전에 호출 되어도 이미 함수 정의가 통째로 메모리에 저장되있는 상태기때문에

실행이 되어진다.

 

---

 

🤔 그렇다면 함수 안에서 선언 된 변수는?

 

      document.write(hello());          //문자열 정상 출력
      document.write(i);                //i is not defined 에러 

      function hello() {
        var i = 함수 안에 변수";
        return i;
      }

 

👉 hello 안에서 변수를 선언 한 뒤 return으로 반환 하면 정상적으로 변수의 값이 출력 된다.

let 으로 해도 가능하다.

 

hello() 함수의 값 자체가 return 값을 반환 받아 출력한 것이므로 가능하다.

 

또한 변수는 함수 내부에서 선언 되었기때문에 지역 변수가 된다.

그러니 당연히 함수 밖을 벗어나면 선언 자체가 사라지기 때문에 

is not defined 이 나온다.