[JavaScript] 변수의 종류(var, let, const)

https://tadaktadak-it.tistory.com/74?category=1024177 

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

1. 변수의 종류

• var : 자바스크립트의 기본 변수로 초기에 만들어진 변수(원조격)
• let : 나중에 추가된 변수로 블록 범위 변수이다.
• const : 나중에 추가된 변수로 블록 범위이면서 상수이다.
• var, let, const 차이점
  1. 중복선언 가능 여부
  2. 재할당 가능 여부
  3. 변수사용 범위(스코프 유효범위)

2. var

- 자바스크립트의 기본 변수로 초기에 만들어진 변수(원조격)
- 변수의 선언 및 사용 범위는 전연(함수)범위이다.
- 전역 변수, 지역 변수를 구별하지 않는다.
- 재(중복) 선언 O, 재할당 O

<script>
    // 1. 중복 선언
    var va = 10;
    console.log("첫번째 var 변수 선언 및 초기화(10) : " + va); // 10
    
    var va = 20;
    console.log("두번째 var 변수 선언 및 초기화(20) : " + va); // 20
    
    var va;
    console.log("세번째 var 변수 선언 및 초기화(X) : " + va); // 20

    var va1;
    console.log("네번째 var 변수 선언 및 초기화(X) : " + va1); // 20

    // 2. 재할당
    var vb = 10;
    vb = 20;
    console.log("var 변수 재할당 : " + vb) // 20
</script>

3. let

- 나중에 추가된 변수로 블록 범위 변수이다.
- 변수의 선언 및 사용 범위는 로컬(블록) 범위
- 재(중복) 선언 X, 재할당 O

<script>
    // 1. 중복 선언
    let la = 10;
    console.log("첫번째 let 변수 선언 및 초기화(10) : " + la); // 10

    // 중복 선언이 불가능하다.
    // let la = 20;
    // console.log("두번째 let 변수 선언 및 초기화(20) : " + la)

    // 2. 재할당
    let lb = 30;
    lb = 40;
    console.log("let 변수 재할당 : " + lb) // 40
</script>

4. const

- 나중에 추가된 변수로 블록 범위이면서 상수이다.
- 변수의 선언 및 사용 범위는 로컬(블록) 범위이다.
- 재(중복) 선언 X, 재할당 X ---> 상수
- 즉, 자바스크립트에서 사용하는 상수 선언 방식이다.

<script>
    // 1. 중복 선언
    const ca = 10;
    console.log("첫번째 const 변수 선언 및 초기화(10) : " + ca); // 10

    // 중복 선언이 불가능하다.
    // const ca = 20;
    // console.log("두번째 const 변수 선언 및 초기화(20) : " + ca);

    // 2. 재할당
    // const
    const cb = 10;
    // cb = 20;    // 재할당 불가(오류)
    console.log("const 변수 재할당 : " + cb);
</script>

5. 스코프(Scope)

- 변수에 접근할 수 있는 범위
- 변수의 생명주기
- 변수의 유효 범위

- var는 전역 범위이고 let과 const는 블록( { } ) 범위이다.

<script>
    // 스코프 : 전역변수 vs 지역변수
    if(true) {
        var var1 = "123";
        let var2 = "456";
        const var3 = "789";
        
        console.log(var1);
        // console.log(var2);   // 오류
        // console.log(var3);   // 오류
    }
</script>