1. 전역변수와 지역변수
"전역변수"는 자바스크립트 코드내의 어느곳에서나 접근할 수 있는 변수를 말합니다.
전역변수를 만드는 방법은 다음과 같습니다.
- 선언하지 않고 직접사용 합니다.
- var로 선언시 함수 밖에서 선언 합니다.
- let으로 선언시 블럭 밖에서 선언합니다.
※ 참조
전역변수는 실제로 전역 객체(global object)의 프로퍼티(Property)입니다. 전역객체는 자바스크립트를 웹브라우저에서 실행한다면 window 가 되고, Node.js에서 실행한다면 global이 됩니다.
// 함수 밖에서 선언된 전역 변수는 실제로 window객체의 property입니다.
name = "홍길동";
console.log(window.name); // "홍길동" 출력
"지역변수"는 정의된 블럭내에서만 사용할 수 있는 변수를 말합니다.
- var로 함수내에서 선언시 선언된 함수 내에서만 유효합니다.
- let로 블럭내에서 선언시 선언된 블럭 내에서만 유효합니다.
const로 선언하는 상수는 let과 동일한 변수 범위를 가집니다.
함수의 본문 내에서 지역 변수는 같은 이름을 가진 전역 변수보다 우선합니다. 전역 변수와 동일한 이름으로 지역 변수 또는 함수 매개변수를 선언하면 전역 변수가 숨겨집니다.
2. 변수 범위
변수를 선언하는 방법과 위치에 따라 프로그램내에서 변수가 사용될수 있는 범위가 결정됩니다. 일반적으로 함수의 바깥에서 선언하면 현재 문서의 전체에서 사용할 수 있으므로 이것을 "전역변수"라고 하고, 함수 안에서 선언을 하면 선언된 함수 안에서만 사용할 수 있으므로 이것을 "지역변수"라고 합니다.
하지만 변수의 선언 방식에 따라서 변수의 범위가 조금씩 달라집니다. 자세한 것을 알아봅시다.
- 선언 없이 바로 사용하였을 경우 어디에서 사용하든 상관없이 "전역변수"가 되어 버립니다.
name = "홍길동"; // 함수밖에서 만들었으므로 전역변수입니다.
function scope() {
console.log(name); // 전역변수는 문서 내의 어디서던 사용할 수 있습니다.
title = "변수범위"; // 함수안에서 만들었지만 선언없으므로 전역변수가 됩니다.
}
console.log(title); // 아직 만들어지지 않은 변수를 사용으로 오류 입니다.
scope(); // "홍길동" 출력
console.log(title); // "변수범위" 출력. 함수호출로 title이 전역변수로 만들어졌습니다.
결과)
홍길동
변수범위
- var 로 선언하는 경우 함수밖에서는 전역변수가 되고, 함수내에서는 "함수 레벨 지역변수"가 됩니다.
var name = "홍길동"; // 전역변수 입니다.
if(true) {
var x = 0; // var를 사용하므로 전역변수 입니다.
}
function scope() {
var title = "변수범위"; // 함수 범위의 지역변수 선언
if(true) {
var content = "변수의 유효 범위 내용"; // 함수 범위의 지역변수 선언
console.log(title);
}
console.log(content); // if 블록 안에서 선언된 변수이지만,
// var는 함수 범위이므로 호출 가능합니다.
}
console.log(name); // "홍길동" 출력
scope(); // "변수범위", "변수의 유효 범위 내용" 출력
console.log(title); // 에러. 블록내에서의 var 선언은 블록 밖에서 사용할 수 없습니다.
console.log(content); // 에러. 블록내에서의 var 선언은 블록 밖에서 사용할 수 없습니다.
결과)
홍길동
변수범위
변수의 유효 범위 내용
Uncaught ReferenceError: title is not defined
- let 으로 선언하는 경우 함수 밖에서는 전역변수가 되고, 함수나 "{ }" 로 둘러싸인 블록내에서 선언되면 블록 내에서만 유효한 "블록 레벨 지역변수"가 됩니다.
let name = "홍길동"; // 전역변수 입니다.
if(true) {
var x = 0; // let을 사용하므로 지역변수 입니다.
}
function scope() {
let title = "변수범위"; // 블록 범위의 지역변수 - 여기서는 함수 블록
if(true) {
let content = "변수의 유효 범위 내용"; // 블록 범위의 지역변수 - if 블록
console.log(title);
}
console.log(content); // 에러발생 if 블록 내에서 let으로 선언한 content는
// if 블록 내에서만 유효합니다.
}
console.log(name); // "홍길동" 출력
scope(); // "변수범위", Error 출력
console.log(title); // 에러.
console.log(content); // 에러.
결과)
홍길동
변수범위
Uncaught ReferenceError: content is not defined
- const 를 사용한 상수 선언은 let 과 동일한 변수 유효 범위를 가집니다. 함수 밖에서는 "전역변수"이고, 블록 내에서 선언되면 "블록 레벨 지역변수"가 됩니다.
3. 변수 호이스팅(Hoisting)
변수 호이스팅은 var 선언자로 변수를 선언할 경우 발생합니다. 변수를 선언하기전에 사용을하더라도 나중에 선언이 되면 에러가 발생하지 않고 미리 선언만 한 것처럼 "undefined"값을 가지게 되는 현상입니다.
변수가 끌어올려진다(hoisting)고 하는데, 자바스크립트는 변수를 위한 메모리를 미리 할당하므로 변수를 나중에 선언하더라도 미리 선언하고 사용하는 것처럼 동작합니다.
console.log(x); // undefined
var x = 3;
console.log(x); // 3
var myvar = "my value";
(function() {
console.log(myvar); // undefined
var myvar = "local value";
console.log(myvar); // local value
})();
console.log(myvar); // my value
결과)
undefined
3
undefined
local value
my value
위의 코드는 아래와 동일합니다.
var x;
console.log(x); // undefined
x = 3;
console.log(x); // 3
var myvar = "my value";
(function() {
var myvar;
console.log(myvar); // undefined
myvar = "local value";
console.log(myvar); // local value
})();
console.log(myvar); // my value
위 코드에서 함수내의 지역변수 myvar가 밖의 전역변수 myvar와 같은 이름을 사용하므로 함수내에서 전역변수 myvar는 가려져서 사용할 수 없게 됩니다.