[JavaScript] 변수 선언하기(var, let, const)

🔻변수 선언하기🔻

1. var

• BOM, DOM, ES6 버전에서 사용한다.
• function-scoped 성격을 지닌다.
• 제어문을 자기 영역으로 인식을 못한다.
• 상수 선언이 불가능하다.
• 중복 선언이 가능하다.

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

a를 중복 선언을 한 뒤 console.log로 찍어보면 20으로 나온다.

 

2. let

• ES6(ECMAScript 2015)에서 생성되었다.
• block-scoped 성격을 지닌다.
• block-scoped : 함수와 제어문을 자신의 영역으로 인식한다.
• 중복 선언이 불가능하다.
• 변수를 지원하는 키워드이다.

    <script>
        let a = 10;     //전역변수

        function m1() {
            let b = 20;     //지역변수(m1)
        }

        m1();
        console.log(b);     //Uncaught ReferenceError: b is not defined

    </script>

함수 m1에서 선언된 b는 함수 밖에서 호출하면 'Uncaught ReferenceError: b is not defined' 에러가 발생한다.

 

    <script>
        let a = 10;     //전역변수
        
        if (a>0) {
            let c = 30;     //지역변수(if)
            var d = 40;     //전역변수
        }

        console.log(d);
        console.log(c);     //Uncaught ReferenceError: c is not defined

    </script>

조건문 내에서 선언된 c는 조건문 내에 있는 지역변수이기에 조건문 밖에서 호출하면 'Uncaught ReferenceError: c is not defined' 에러가 발생한다.

 

    <script>
        let a = 10;     //전역변수
        let a = 50;         //Cannot redeclare block-scoped variable 'a'.

    </script>

let으로 선언한 지역변수는 재선언이 불가능하다.

 

 

3. const

• ES6(ECMAScript 2015)에서 생성되었다.
• block-scoped 성격을 지닌다.
• block-scoped : 함수와 제어문을 자신의 영역으로 인식한다.
• 중복 선언이 불가능하다.
• 상수(final 변수)를 지원하는 키워드이다.

    <script>
        const PI = 3.14;
        PI = 5.28;

        console.log(PI);    //Assignment to constant variable.
    </script>

상수는 변경이 불가능하여 수정하면 'Assignment to constant variable.' 에러가 발생한다.

 

 

const list = document.getElementById('list');

수정할 일이 없는 변수는 const로 선언한다.

 

const list = document.getElementById('list');

list.setAttribute('title', '풍선 도움말');
list.innerText='홍길동';

const list는 document.getElementById('list') 의 메모리 주소를 참조하고있으므로 list의 속성이나 데이터는 변경할 수 있다.

 

 

 

let, const가 등장하면서 var은 잘 사용하지 않는다.