본문 바로가기
Javascript

지역변수 / 전역변수

by 코딩대원 2022. 7. 28.

전역 변수와 지역 변수

변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나누어진다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있다.

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

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

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

함수 블록 {} 안의 kro 변수를 var로 정의하였다. 함수 블록{}안에서 var로 선언된 변수는 지역 변수가 되며
함수 블록{} 밖의 전역 변수 kor과 다른 별도의 변수가 된다. 지역변수는 함수블록{}밖에서 사용X

{
    function getScore() {
        var kor = 100;
        console.log(kor); // 100
    }
    getScore();
    console.log(kor); //에러
}

블록{}에 의해 변수의 범위가 달라지는 것을 변수의 scrope라고 한다. 전역 변수는 블록{} 내외에서
사용할 수 있기 때문에 동일한 이름으로 덮어 써질 수 있는 문제점이 있다. 이런 이유로 지역변수가 전역변수보다 안전하다.

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

var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에서는 지역변수가 존재X
ES6에서 새로 추가된 let과 const는 블록{}이나 제어문 블록{}에서도 지역변수를 선언가능O

{
    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
}

블록{} 안에서 let과 const로 선언된 변수는 위와 같이 블록{}의 지역 변수로 인식.

{
    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); 에러
}
var는 전역 변수로 존재하기 때문에 위와 같이 sum 변수를 블록{} 밖에서도 호출O
But 제어문 블록{} 안에서 let으로 선언된 변수는 지역 변수이기 때문에 제어문 블록{} 밖에서 호출할 수 없다.
{
    // 함수의 전역변수
    var sum1 = 10;
    function add1(){
        sum = 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 num = 60;
    }
    console.log('전역' + num1);
    let num2 = 70;
    if (num2 === 70) {
        let num2 = 80;
        console.log('지역 + num2');
    }
    console.log('전역' + num2);
}
결과 확인하기

'Javascript' 카테고리의 다른 글

배열 객체 join() / push() / pop()  (5) 2022.08.11
요소 선택  (7) 2022.08.06
함수  (9) 2022.07.26
데이터 타입  (8) 2022.07.26
조건문  (8) 2022.07.26

댓글


HTML
CSS

JAVASCRIPT

자세히 보기