[JavaScript] 스코프, 호이스팅, 변수의 선언 방식

1. 스코프(scope)와 호이스팅(hoisting)

• 스코프(scope)
  - 변수에 접근할 수 있는 범위
  - 변수의 생명주기
  - 변수의 유효 범위
  { }
• 호이스팅(hoisting)
  - 변수나 함수의 선언이 어디에 있든 상관없이 다른 코드들보다 가장 먼저 끌어올려져서 실행되는 특징
  
  - 변수는 선언 단계, 초기화 단계, 할당 단계 이 세 가지를 거친다.
  var num = 10;
  ① 선언 단계 : 공간 확보
  ② 초기화 단계 : undefined 넣기
  ③ 할당 단계 : 10이 대입
  - 선언 단계가 무조건 맨 처음에 실행된다는 것이 호이스팅이다.

2. 변수의 선언 방식

var 변수명 = 값;

let 변수명 = 값;

const 상수명 = 값;

- 변수의 선언 방식으로는 var, let, const 세 가지가 있음

• var
  

  <script>
      var a = "hello";
      console.log(a); // hello
      
      var a = "bye";
      console.log(a); // bye
      
      a = "good";
      console.log(a); // good
  </script>

  - var는 같은 이름의 변수를 재선언 할 수 있음, 코드가 길어지면 변수 하나하나를 기억하기 힘들기 때문에 중요한 데이터를 담는 변수였다면 큰 오류가 발생
  - var는 제어문 영역에서의 지역변수와 전역 변수의 구별이 되지 않음
  
  

  <script>
      num = 10;
      var num;
      console.log(num) // 10
  </script>

  - 위에 코드를 실행해도 호이스팅으로 인해 선언 단계가 먼저 실행됨
  
  - 위와 같이 암묵적인 오류가 있기에 잘 사용하지 않는다.
  - 이러한 암묵적인 오류 허용을 하기 싫다면 <script> 바로 아래에 'use strict'를 작성하여 엄격 모드로 해석하면 됨
• let
  - 이론적으로는 호이스팅이 되지만 실제로는 되지 않음
  - 재선언 불가능, 재할당(대입) 가능
  
  

  <script>
      let b = "hello";
      console.log(b); // hello
      
      let b = "bye";
      console.log(b); // 오류
      
      b = "good";
      console.log(b); // good
  </script>

• const
  - 재선언 불가능, 재할당 불가능
  - 자바에서 상수와 같은 역할을 함
  
  

  1 2 3 4 5 6 7 8 9 10

  <script>     const c = "hello";     console.log(c); // hello          const c = "bye";     console.log(c); // 오류          c = "good";     console.log(c); // 오류 </script>