[자바스크립트] 변수의 범위(지역변수,전역변수),호이스팅

1) 변수의 범위(스코프,scope)

- 자바스크립트에서는 객체, 함수가 모두 변수(상수)이다.

- 변수의 범위는 변수가 접근할 수 있는 변수, 객체, 함수의 집합이다.

 

2) 지역변수

- 함수 내에서 선언된 변수이다.
- 지역 변수는 변수가 선언된 함수 내에서 유효하고 함수가 종료되면 메모리에서 사라진다.

function func1(x, y){   // x, y, sum은 지역변수
    ...
    let sum = 0;
}

console.log(x) // undefined

------------------------------
if(조건식){
    let x = 0;  // 지역변수
    ...
}

console.log(x) // undefined

 

3) 전역변수

- 함수의 외부에서 선언된 변수이다.

- 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야먄 메모리에서 사라진다.

 

let global = 0;

 

function func1(x,y){

   console.log(global); //사용가능

   ...

}

console.log(global); //사용가능

 

4) var의 사용했을 때의 지역변수,전역변수 차이점

    <script>
        'use strict';
        var num1 = 10; //전역변수
        
        function func1(){
            console.log(num1);
            num1 = 20; //전역변수 num1의 값을 재대입해줌 : 10에서 20으로 바뀜
        }
        func1(); //10
        console.log(num1); //20

        ///////////////////////////////
        var num2 = 30; //전역변수
        function func2(){
            var num2 = 40; //지역변수=>같은 이름의 전역변수를 사용하지 않게됨
            console.log(`num2 : ${num2}`);
        }
        func2();
        console.log(num2); //전역변수

        ///////////////////////////////
        var num3 = 50; //전역변수
        if(num3 == 50){ //true
            num3 = 100; //전역변수 num3값을 재대입한 것
            console.log(`num3 : ${num3}`);
        }
        console.log(num3); //전역변수
        
        ///////////////////////////////
        var num4 = 50; //전역변수
        if(num4 == 50){ //true
            var num4 = 100; //지역변수가 아니라 전역변수
            console.log(`num4 : ${num4}`);
            // num4 = 200; //전역변수가 200으로 재대입됨
            // console.log(`num4 : ${num4}`);
        }   
        console.log(num4); //전역변수

        ///////////////////////////////
        let num5 = 50; //전역변수
        if(num5 == 50){
            let num5 = 100; //지역변수 
            console.log(`num5 : ${num5}`);
        }   
        console.log(num5); //전역변수
    </script>

▶결론 : var는 if나 for문 내에서 선언했을 때, 전역변수로 선언된다.

 

5) 호이스팅(hoisting)이란?

- 함수 안에 있는 선언문들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언한다.

 

- 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효범위의 최상단에 선언한다.

- 호이스팅 대상은 var변수, 함수 선언식만 호이스팅이 일어난다.

- 자바스크립트 변수를 명확하게 쓰려면 호이스팅이 일어나지 않는게 좋다.