지역함수와 전역함수

자바스크립트 전역변수 / 지역변수

변수는 함수블록 {}을 기준으로 변수의 선언 위치에 따라 전역변수와 지역변수로 나누어 진다.

전역변수 : 전역 변수는 함수 블록 {} 밖이나 안에서 자유롭게 사용 가능
지역변수 : 지역 변수는 함수 블록 {} 내에서만 사용 할 수 있다.

▶︎ 전역변수와 지역변수 선언 위치

전역 변수	지역 변수
var 변수;      function 함수 () { }	function 함수 () {      var 변수; }

---

01. 전역변수 예시 문제

kor 변수의 값을 90에서 100으로 바꾸기

{
    var kor = 90;
    function getScore() {
       kor = 100; //전역변수
       console.log(kor);
    }
    getScore();
    console.log(kor);
}

결과 보기

100
100

kor 변수는 함수 블록 안에 있기 때문에 전역 변수이다.
따라서 getScore() 함수를 호출하게 되면 kor 변수의 값이 90에서 100으로 바뀌게 된다.

02. 전역변수 예시 문제

kor 변수의 값을 90에서 100으로 바꾸기

const func(){
     document.write("실행문");
}
func();

{
    var kor = 90;
    function getScore() {
       var kor = 100; //지역변수
       console.log(kor);
    }
    getScore();
    console.log(kor);
}

결과 보기

100
90

kor 변수가 그대로 90으로 출력 된 이유는 함수 블록 {} 안에서 kor 변수를 var로 다시 정의했기 때문이다.
이 때 기존 kor 변수와 함수 블록 {} 안의 kor변수는 서로 다른 별도의 함수가 되기 때문에 변수의 값이 바뀌지 않은 것이다.

함수 블록 안의 지역 변수는 반드시 var로 정의해야 한다. 또한 지역 변수는 함수 블록 밖에서는 사용할 수 없다.
이렇게 블록{}에 의해 변수의 범위가 달라지는 것을 변수의 스코프(Scope)라고 한다.

---

함수 레벨 스코프와 블록 레벨 스코프

var는 함수 블록 {} 안에서만 지역 변수가 존재하며 블록 {}이나 제어문 블록 {}에서는 지역 변수를 선언하지 못한다.
그러나 es6에서 새로 추가된 let과 const는 블록 {}이나 제어문 블록 {}에서도 지역 변수를 선언할 수 있다.

{
    var num = 10;
    {
        var num = 20;   //num은 전역 변수
        console.log(num);
    }
    console.log(num);
}

결과 보기

20
20

함수 블록{}이 아니라서 지역변수로 인식하지 못한다.

{
    //let으로 선언한 경우
    let num = 10;
    {
        let num = 20;   // 지역 변수
        console.log(num);
    }
    console.log(num);

    // const로 선언한 경우
    const num = 10;
    {
        const num = 20;   // 지역 변수
        console.log(num);
    }
    console.log(num);
}

결과 보기

20
10

이처럼 블록{} 안에서 let과 const로 선언된 변수는 지역 변수로 인식된다.
마찬가지로 제어문 블록{}일 경우에도 var는 전역변수이기 때문에 제어문 {} 밖에서도 호출이 가능하지만 let과 const는 지역변수라서 제어문 {} 밖에서는 호출이 불가하다.

전역변수와 지역변수 예시 문제

함수 블록{}과 블록{}의 변수를 출력하시오

{
    //함수의 전역변수
    var sum1 = 10;
    function add1() {
        var sum1 = 20;
    }
    add1();
    console.log('전역'+ sum1);

    //함수의 지역변수
    var sum2 = 30;
    function add2() {
        var sum2 = 40; 
        console.log('지역' + sum2)
    }
    add2();
    console.log('전역'+ sum2);

    //블록의 지역변수
    var num1 = 50;
    if( num1 === 50) {
        var num1 = 60;
    }
    console.log('전역' + num1);

    let num2 = 70;
    if( num2 === 70) {
        let num2 = 80;
        console.log('지역' + num2);
    }
    console.log('전역' + num2);
}

결과 보기

전역10
지역40
전역30
전역60
지역80
전역70
console.log()는 크롬 개발자 도구를 통해 값을 확인할 수 있다.

---

var, let, const 비교

변수 범위	변수 선언	특징
함수 레벨 스코프	var	변수를 중복해서 선언할 수 있다. 함수 블록{} 내에서만 지역변수가 존재한다.
블록 레벨 스코프	let	같은 블록{}에서는 이미 선언한 변수를 중복해서 선언할 수 없다. 블록{}, 제어문 블록{}에서도 지역 변수가 존재한다.
	const	같은 블록{}에서 이미 선언한 변수를 중복해서 선언할 수 없고, 저장 된 값을 변경할 수 없다. 블록{}, 제어문 블록{}에서도 지역 변수가 존재한다.