지역변수/전역변수

지역변수/전역변수

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

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

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

예시1

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

예제1에서 함수 블록{}안에 있는 kor 변수는 전역 변수입니다. 따라서 getScore() 함수를 호출하게 되면 kor 변수 값이 90에서 100으로 바뀌게 됩니다.

예시2

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

예제2에서는 함수 블록{}안의 kor 변수를 var로 정의하였습니다. 함수 블록{}안에서 var로 선언된 변수는 지역 변수가 되며 함수 블록{}밖의 전역 변수 kor과 다른 별도의 변수가 됩니다.

함수 블록{}안에 지역 변수는 반드시 var로 선언해주어야 하며 함수의 지역 변수는 함수 블록{}밖에서 사용 할 수 없습니다.

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

블록{} 안에서 let과 const로 선언된 변수는 예제처럼 블록{}의 지역 변수로 인식합니다.

예시1

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

let num = 10;
{
    let num = 20; // num은 지역 변수입니다.
    console.log(num); // 20
}
console.log(num); // 10

const num = 10;
{
    const num = 20; // num은 지역 변수입니다.
    console.log(num); // 20
}
console.log(num); // 10

예시2

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

let num = 10;
if (num === 10) {
    let sum = 20; // 지역 변수
}
console.log(sum); //에러

제어문 블록{}안에서 let으로 선언된 변수는 지역 변수이기 때문에 제어문 블록{}밖에서 호출할 수 없습니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>변수의 범위</title>
    <script>
        // 함수의 전역변수
        var sum1 = 10;
        function add1() {
            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);
    </script>
</head>
<body>
</body>
</html>

결과 확인하기

검사자모드 -> console에서 확인하기
전역20
전역40
전역30
전역60
전역80
전역70

var, let, const 비교 정리

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

'Javascript' 카테고리의 다른 글

배열 메서드 (9)	2022.08.11
요소 선택 (7)	2022.08.06
함수 (11)	2022.07.26
조건문 (12)	2022.07.25
데이터 타입 (8)	2022.07.25

코터틀

지역변수/전역변수