본문 바로가기
JavaScript

지역변수와 전역변수

by 코딩 냠냠 2022. 7. 28.
728x90
반응형

지역변수/전역변수

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

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

예제1

함수 블록 { } 안에 있는 kor 변수는 전역변수 입니다.

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

예제2

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

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


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

var는 함수 블록 { }에서만 지역 변수가 존재하며 블록{ }이나 제어문 블록{ }에서는 지역 변수가 존재하지 않습니다.

예제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

불록{ } 안에서 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); //에러

예제3

<!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);
        var num2 = 70;
        if (num2 === 70 ) {
            let num2 = 80;
            console.log('전역' + num2);
        }
        console.log('전역' + num2);
    </script>
</head>
<body>
</body>
</html>
결과보기

'JavaScript' 카테고리의 다른 글

배열 객체 - join() / push() / pop()  (7) 2022.08.11
요소 선택  (7) 2022.08.06
함수에 대해 알아보기  (8) 2022.07.26
데이터 타입  (7) 2022.07.26
If문  (6) 2022.07.26

댓글


자바스크립트

Javascript

자세히 보기
html
css
광고 준비중입니다.
<