[JavaScript] 전역과 지역 변수 및 함수에 대하여

안녕하세요! 오늘은 자바스크립트의 전역과 지역 변수 및 함수에 대해 공부하고자 합니다.

 

여기서 잠시!! 이 글을 읽기 위해서는 함수에 대한 이해도가 어느정도 필요합니다.

그래서 만약 전 글을 읽지 않으셨거나 함수에 대해 잘 모르신다면 이 글을 읽고 와주세요!!

---

본격적으로 전역변수와 지역변수를 알아보기 전에 몇 가지 용어를 정리해보겠습니다.

먼저 전역변수와 지역변수의 개념을 이해하기 위해서는 함수 스코프의 이해가 필요합니다.

함수 스코프란?

스코프(Scope)의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킵니다.

✓ 스코프는 변수 또는 함수의 유효 범위를 의미합니다.

✓ 지역 변수는 스코프 영역에서 선언한 변수를 가리킵니다. 스코프 영역에서만 사용할 수 있습니다.

✓ 지역 함수 스코프 영역에서 선언한 함수를 가리킵니다. 스코프 영역에서만 호출할 수 있습니다.

 

이렇게 몇가지 용어를 정리해보았습니다. 

---

그럼 이제 전역변수와 지역변수의 개념과 차이에 대해 알아보도록하겠습니다.

전역변수와 지역 변수의 개념과 차이

전역변수는 자바스크립트 어디에서든 사용할 수 있는 변수이고, 지역 변수는 함수 스코프에서만 사용할 수 있는 변수입니다. 다음은 전역변수와 지역 변수를 선언하는 기본형입니다. 

var 변수명; // 전역 변수

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

 

예제를 살펴보도록 하겠습니다.

 

코드

var score = 10;

function myFnc(){
	var score = 50;
    // 함수 스코프에서는 지역 변수 데이터를 가져옵니다.
    alert(score); // 50
}

myFnc();

alert(score); // 10;
// 함수 스코프 밖에서는 전역 변수 데이터를 가져옵니다.

다음과 같이 함수 스코프에서 선언한 변수는 지역변수이며 함수 안에서만 사용할 수 있습니다.

따라서 함수 스코프에서 score값을 50으로 변경해도 함수 스코프 밖의 score 값은 10을 출력합니다.

 

결과

myFnc()의 score 결과

스코프 밖에서의 score 결과

---

이제 전역함수와 지역함수의 차이에 대해 알아보도록 하겠습니다!

전역 함수와 지역 함수의 차이

전역 함수는 자바스크립트 어디에서든 사용할 수 있는 함수이고, 지역 함수는 함수 스코프에서만 사용할 수 있는 함수입니다. 다음은 전역 함수와 지역 함수를 선언하는 기본형입니다.

// 전역 함수
function 함수명1(){
	console.log("코드..1");
}

function 함수명2(){
	// 지역 함수
	function 함수명3(){
		console.log("코드..2");
	}
}

예제 코드를 살펴보겠습니다.

 

코드

function myFnc() {
	alert("전역 함수");
}

function outerFnc() {
	function myFnc() {
    	alert("지역 함수");
    }
    myFnc(); // 지역 함수 호출
}

outerFnc();
myFnc();	// 전역 함수 호출

함수 스코프에서 선언된 함수는 지역 함수가 되어 함수 스코프에서만 호출할 수 있습니다.
따라서 스코프 밖에서 myFnc() 함수를 호출하면 함수 스코프에서 선언한 지역 함수가 아닌 전역 함수가 실행되어 '전역 함수'라는 경고 창이 나타납니다.

 

결과

outerFnc()함수안의 myFnc() 결과

myFnc() 결과

---

이렇게 전역변수, 지역변수 그리고 전역 함수와 지역 함수에 대해 알아보았는데요. 알아보면서 굳이 이렇게 힘들게 전역과 지역을 나눠서 써야 되나..?라는 궁금증이 생기실 수 있습니다. 이제부터 그 궁금증을 해결하기 위해 전역과 지역을 나누는 이유에 대해 알아보도록 하겠습니다.

전역과 지역을 나누는 이유

그 이유는 바로 프로그램을 개발할 때 전역(Global)과 지역(Local)을 나누면 충돌을 피할 수 있기 때문입니다.
방송국에 비유를 하면서 설명드리도록 하겠습니다!

방송은 전국 방송과 지역 방송으로 나눈 것을 생각해 볼 수 있습니다. 전국 방송 송출 신호는 전국에서 시청할 수 있지만 지역 방송은 그 지역에서만 시청할 수 있습니다. 예를 들어 지역 방송의 경우 같은 MBC채널이라도 강원도에서는 강원 뉴스가 나오고 경기도에서는 경기 뉴스가 나옵니다.
만약 이렇게 나누지 않는다면 전국 방송과 지역 방송이 충돌하게 될 것입니다!!

 

개발도 마찬가지 입니다. 프로젝트의 규모가 크면 여러 명의 개발자가 투입되는데, 만약 같은 이름의 전역 변수나 전역 함수를 사용하면 충돌이 발생합니다. 또한 다른 개발자가 이미 개발해 놓은 라이브러리나 플러그인의 변수 또는 함수 이름과 자신이 사용하는 변수나 함수의 이름이 같은 경우에도 충돌이 발생할 수 있습니다.

 

한 프로젝트에 2명의 개발자가 투입되어 1명은 GNB메뉴, 다른 1명은 TAB 메뉴를 제작했다고 가정해보겠습니다.
이때 개발자 간의 의견 조율이 이루어지지 않아 같은 이름의 함수를 만드렴 어떻게 되는지 살펴볼까요?

 

코드

// 개발자 A
var num = 100;
function menu() {
	num += 100;
    alert(num);
}
menu();

// 개발자 B
function menu() {
	alert(num);
}

개발자 A는 당연히 200이 출력될 것이라 예상했지만 다음과 같이 100이 출력되었습니다.
개발자 B가 만든 함수명이 같아서 개발자 A가 만든 함수는 제거되고 개발자 B가 만든 함수가 호출 된 것입니다.

 

결과화면

---

즉시 실행 함수

만약 개발자 A와 B가 지역 함수를 사용하여 함수를 선언했다면 함수가 충돌하는 불상사를 피할 수 있었을 것입니다. 그러면 지역 함수 선언에 사용하면 효과적인 즉시 실행 함수의 사용법에 대해 간략하게 살펴보고 이런 충돌 문제에 대한 해결 방법을 알아보겠습니다. 다음은 즉시 실행 함수의 기본형입니다. 이렇게 하면 함수 선언과 동시에 함수를 호출 할 수 있습니다.

(function() {
	console.log("코드");
}());

(function() {
	var 변수명;	// 지역 변수
    
    function 함수명() { // 지역 함수
    	console.log("코드");
    }
}());

 

다음은 개발자 A와 B가 즉시 실행 함수에 지역 변수와 지역 함수를 선언하여 충돌을 방지한 예제입니다. 

 

코드

(function() {
	var num = 100;	
    function menu() { 
    	num += 100;
        alert(num);
    }
    menu();
}());

(function() {
	var num = 100;	
    function menu() { 
        alert(num);
    }
}());

다음과 같이 개발자 A가 예상한 값(200)이 정상적으로 출력되는 것을 확인할 수 있습니다.

 

결과화면

 

 

이렇게 오늘 전역과 지역 변수 및 함수의 개념과 차이 그리고 사용하는 이유에 대해 알아보았습니다!!

이해가 잘 안되는 부분이 있거나 잘못된 설명이 있으면 댓글로 알려주세용!!