#16 자바스크립트(JavaScript) - 지역 변수와 전역 변수

안녕하세요 여러분! 에이블디 입니다!

 

이번 시간에는 지역 변수와 전역 변수에 대해 배워보도록 하겠습니다!

 

프로그램을 만들다 보면 함수 하나로도 프로그램을 만들 수는 있겠지만 대부분 여러 개의 함수를 사용해서 기능을 구현하곤 하는데요, 예를 들어 함수 A, B, C가 있다고 가정하고 함수 A의 실행 결괏값을 다른 함수에서도 사용할 수 있게 하려면 '전역 변수'로 지정해야 하고, 함수 A 안에서만 사용하는 변수라면 '지역 변수'로 지정해서 사용하면 됩니다.

 

글보다는 코드로 직접 보며 이해하는 게 빠르겠죠?

지역 변수부터 이해하고 가보도록 할게요.

바로 코드를 볼까요?

var number = 1; // 전역 변수
areaTest();

console.log(number);


function areaTest() {
    var number = 10; // 지역 변수
}

사실, 지역 변수와 전역 변수의 네이밍은 헷갈리지 않게 네이밍을 겹치지 않게 작성해야 좋지만, 이해를 돕기 위해 지역 변수와 전역 변수의 이름을 똑같이 지어주었습니다.

 

지역 변수는 함수 안에서 선언하고 함수 안에서만 사용하는 변수입니다.

함수를 선언할 때 지역 변수를 선언하려면 var와 함께 변수 이름을 지어주면 됩니다.

변수 이름 앞에 var를 작성하지 않으면 함수 안에서 변수를 선언했어도 동일한 이름의 변수가 함수 밖에 전역 변수로 선언되어 있을 때 전역 변수로 인식하게 됩니다.

 

그럼 위의 코드를 살펴볼까요?

areaTest() 함수 밖에 number 변수가 1의 값을 가지고 있고, areaTest() 함수 안에 변수 number에는 10의 값을 가지고 있도록 선언이 되어있네요.

이때 areaTest() 함수 안에 있는 number 변수에 var를 함께 선언해 주었기 때문에 함수 안에서만 사용할 수 있는 지역 변수로 인식이 되는데요, 이렇게 되면 areaTest() 함수 안에서는 값을 10을 가지고 있지만 함수 밖을 벗어나게 되면 값이 무효가 됩니다.

그래서 콘솔 로그에는 전역 변수가 가지고 있는 값인 1이 출력이 되게 되는데요, 한번 확인해 볼까요?

 

 

지역 변수가 전역 변수에 영향을 주지 않고 전역 변수의 값 1이 출력되는 것을 볼 수 있습니다.

 

코드를 좀 더 디테일하게 짜 볼게요.

var number = 1;
areaTest();

console.log("전역 변수의 값 : " + number);


function areaTest() {
    var number = 10;
    console.log("지역 변수의 값 : " + number);
}

 

지역 변수가 전역 변수에 영향을 주지 못하고 지역 변수는 지역 변수의 값을, 전역 변수는 전역 변수의 값을 출력하는 걸 확인할 수 있습니다.

 

이번엔 areaTest() 함수 안의 number변수를 변형시켜 볼게요.

var를 제거하고 지역 변수에서 전역 변수로 인식시키도록 해보겠습니다.

코드는 아래와 같습니다.

var number = 1;
areaTest();

console.log(number);


function areaTest() {
    number = 10;
}

그럼 이번엔 areaTest() 함수 안에 있는 변수 number가 전역 변수로 인식되어 콘솔에 10이 찍히는지 확인해볼까요?

 

 

areaTest() 함수 안의 number변수가 전역 변수로 인식이 되어 number변수의 값이 10으로 바뀐 것을 확인할 수 있습니다!

 

 

오늘은 지역 변수와 전역 변수에 대해 알아보았는데요! 이해가 잘 안 가신다면 직접 코드를 수정해보고 짜보기도 하면서 이해해 보셨으면 좋겠습니다!

 

그럼 여러분 다음 시간에 또 만나요!