JavaScript의 변수

 

 

 

 

 

 

 

자바스크립트에서 변수를 선언하는 방법과 각 변수의 특성에 대해 알아보자. 자바스크립트는 

'var',' let', 'const' 키워두룰 사용하여 변수를 선언할 수 있습니다.

---

1. var

'var' 키워드는 ES6 이전에 변수를 선언하는 유일한 방법이었습니다. 함수 스코르를 가지며, 변수 호이스팅(hoistiong)이 발생한다.

• 함수 스코프 : 'var'로 선언된 변수는 함수 내부에서만 유효합니다.
• 변수 호이스팅 : 변수가 선언되기 전에 사용할 수 있는 특성입니다.하지만 선언만 호이스팅되며, 할당은 호이스팅되지 않습니다.

 <script>
        function exmple() {
            console.log(hoistedVar);
            var hoistedVar = 'I am hoisted';
            console.log(hoistedVar);
        }
    </script>
    
    example();

---

2. let

'let' 키워드는 ES6(ECMAScript 2015)에서 도입되었으면, 블록 스코프를 가집니다. 변수 호이스팅은 발생하지만, 초기화되지 않은 생태에서는 사용할 수 없습니다.

• 블록 스코프 : '{}' 블록 내부에서만 유효합니다.
• 변수 호이스팅 : 선언은 호이스팅되지만, TDZ(Temporal Dead Zone)로 인해 초기화되기 전까지는 사용할 수 없습니다.

 <script>
        function example2(){
            let blockVar = 'I am block-scoped';
            console.log(blockVar);
        }
    </script>

    example();

---

3. const

'const' 키워드는 'let'과 마찬가지로 블록 스코프를 가지며, 상수를 선언하는데 사용됩니다. 선언과 동시에 초기화되어야 하며, 재할당이 불가능합니다.

• 블록 스코프 : '{}' 블록 내부에서만 유효합니다.
• 상수 선언 : 초기화 이후에는 값을 변경할 수 없습니다.

    <script>
        function example3(){
            const constantVar='I am constant'
            console.log(constantVar);
        }
    </script>

---

4. 변수 호이스팅

바자스크립트는 변수 선언을 함수나 블록의 최상단으로 끌어올립니다. 이를 변수 호이스팅이라고 합니다. 'var'는 선언만 호이스팅되며, 초기화는 호이스팅되지 않습니다. 'let'과 'const는 선언은 호이스되지만, TDZ에 의해 초기화 전에는 접근할 수 없습니다.

 <script>
        function hoistingExmple(){
            console.log(hoistedVar)//undefined
            var hoistedVar = 'Hoisted';

            let hoistedVar  = 'Not hoisted'
        }
    </script>

    hoistingexample();

---

5. 변수 스코프

변수 스코프는 변수가 접긍 가능한 번위를 의미합니다. 'var'는 함수 스코프를 가지며, 'let'과 'const'는 블록 스코프를 가집니다. 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없고, 블록 내부에서 선언된 변수는 블록 외부에서 접근할 수 없습니다.

<script>
        function scopeExmple(){
            if(true){
                var functionScoped = 'Function scoped';
                let blockScoped = 'Block Scoped';
                const blockScopedConst = 'Block scoped constant';
                console.log(functionScoped);
                console.log(blockScoped);
                console.log(blockScopedConst);
            }
            console.log(functionScoped)
        }

        scopeExmple();

 

정리

자바스크립트에서 변수를 선언하는 방법은 'var', 'let', 'const'키워드가 있습니다. 'var'는 함수스코프를 가지며 호이스팅이 발생합니다. 'let'과 'const'는 블록 스코프를 가지며, 호이스팅이 발생하지만 초기화 전에는 접근할 수 없습니다. 'const'는 상수로 선언되며, 재할당이 불가능합니다. 변수를 올바르게 선언하는 것은 자바스크립트 프로그래밍의 중요한 부분입니다.

---

*호이스팅(Hoisting)

 - 호이스팅은 자바스크립트의 기본 동작 중 하나로, 변수와 함수 선언이 실제 코드 실행 전에 상단으로 끌어올려지는 현상을 말합니다. 하지만, 호이스팅은 선언만 끌어올려지며, 초기화는 끌어올려지지 않습니다.

 

*스코프(Scope)

- 스코프는 변수가 접근할 수 있는 유효 범위를 의미합니다. 자바스크립트에는 전역 스코프와 지역 스코프가 있습니다.

• 전역 스코프(Global Scope): 전역 스코프에 선언된 변수는 코드 어디서나 접근할 수 있습니다. 전역 변수는 브라우저 환경에서는 'window' 객체의 속성이 됩니다.
• 지역 스코프(Local Scope): 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근할 수 있습니다. 'var'는 함수 스코프를 가지며, 'let'과 'const'는 블록 스코프를 가집니다.