전역 변수와 지역 변수

1. 전역 변수와 지역 변수

변수는 함수 블록{ }을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나뉨

• 전역 변수 : 함수 블록{ } 밖이나 안에서 자유롭게 사용 가능
• 지역 변수 : 함수 블록{ } 내에서만 사용할 수 있음

 

1) 전역 변수 ・ 지역 변수의 선언 위치

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

=====전역 변수 선언=====
var kor = 90;
function getScore() {
    kor = 100;    //전역 변수; getScore() 함수를 호출하게 되면 kor 변수 값이 90에서 100으로 바뀜
    console.log(kor);    //100
}
getScore();    
console.log(kor);    //100

=====지역 변수 선언=====
var kor = 90;
function getScore() {
    var kor = 100;    //지역 변수
    console.log(kor);    //100
}
getScore();
console.log(kor);    //90; 함수 블록{} 밖의 전역 변수 kor는 지역 변수 kor와 별도의 변수
/*함수 블록{} 안의 지역 변수는 반드시 var로 선언해야함. 지역 변수는 함수 블록{} 밖에서 사용할 수 X*/

 

[TIP] 변수의 scope : 함수 블록{ }에 의해 변수의 범위가 달라지는 것

* 유의) 전역 변수는 함수 블록{ } 내외에서 사용할 수 있기 때문에, 자칫 동일한 이름으로 덮어 쓰일 수 있음. 따라서 전역 변수 보다는 지역 변수가 더 안전함

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

 

 

2) 함수 레벨 스코프(function level scope)와 블록 레벨 스코프(block level scope)

• var : 함수 블록{ } 내에서만 지역 변수를 선언할 수 있음. 그 외의 블록에서 var가 선언된다면 그건 전역 변수 
• 블록{ } ・ 제어문 블록{ }에서는 지역 변수가 존재하지 않음 → 새로 추가된 let ・ const : 블록{ } ・ 제어문 블록{ } 내에서도 지역 변수를 선언할 수 있음

=====전역 변수 선언 var _블록{}===== 
var num = 10;
{
    var num = 20;    //num : 전역 변수
    console.log(num);    //20
}
console.log(num);    //20

=====지역 변수 선언 let _블록{}=====
let num = 10;
{
    let num = 20;    //num : 지역 변수
    console.log(num);    //20
}
console.log(num);    //10

=====지역 변수 선언 const _블록{}=====
const num = 10;
{
    const num = 20;    //num : 지역 변수
    console.log(num);    //20
}
console.log(num);    //10

=====전역 변수 선언 var _제어문 블록{}=====
var num = 10;
if (num === 10) {
    var sum = 20;    //전역 변수
}
console.log(sum);    //20

=====지역 변수 선언 let _제어문 블록{}=====
let num = 10;
if (num === 10) {
    let sum = 20;    //지역 변수
}
console.log(sum);    //에러
/*var : 제어문 블록{} 내에서 전역 변수만 존재함(지역 변수X). 따라서 변수 sum을 제어문 블록{} 밖에서도 호출 가능*/
/*let : 제어문 블록{} 내에서 let으로 선언된 변수는 지역 변수임. 따라서 제어문 블록{} 밖에서 호출 불가능*/

 

① var, let, const 비교 정리

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

 

 

3) 클로져(Closure)

일반적으로 함수 내 지역 변수는 함수 밖에서 참조할 수 없지만, 클로져는 함수 내 지역 변수를 함수 밖에서도 참조할 수 있게 해줌

function add() {
    var n = 0;
    return ++n;
}
console.log(add());    //1
console.log(add());    //1
/*add() 함수를 호출할 때마다 n = 0이 되어 같은 결과 값을 return함
add() 함수를 호출할 때 지역 변수 n값을 0으로 초기화하지 않고 이전에 연산된 값으로 참조해야할 때 클로져를 사용함*/

function add() {
    var n = 0;
    return function() {
        return ++n;
    }
}
var increase = add();    //var increase = function() {return ++n;}
console.log(increase());    //1
console.log(increase());    //2
/*add() 함수의 function() {return ++n} 을 increase 변수로 return 시켜주면 increase 변수는 익명 함수가 됨
→ add() 함수에서 연산된 지역 변수 n값을 increase() 함수에서 지속적으로 참조할 수 있게 만들어 줌*/

 

 

 

 

 

출처 : ⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦