정의 및 사용 방법
var 선언문(statement)은 글로벌 스코프 또는 함수 스코프를 가지는 변수를 선언합니다.
같은 스코프에서 재선언 및 재할당이 가능합니다.
- 재선언 및 재할당 가능
- 같은 스코프 내에서 동일한 식별자로 변수를 다시 선언하거나 값을 바꿀 수 있습니다.
- 호이스팅(Hoisting) 발생
- 선언이 스코프의 최 상단 코드 위치로 끌어올려진 것처럼 동작합니다.
- 단, 변수가 선언된 위치보다 먼저 참조되면
undefined가 할당됩니다.
구문
var name1;
var name1 = value1;
var name1 = value1, name2 = value2;
var name1, name2 = value2;
var name1 = value1, name2, /* …, */ nameN = valueN;
nameN- 선언할 변수의 이름입니다. 이 이름은 자바스크립트에서 유효한 식별자이여야 합니다.
valueN-
옵션.
변수에 할당할 초깃값입니다. 이 값을 지정하지 않으면
undefined가 할당됩니다.
var의 주요 특징
var로 선언된 변수의 특징에 대해 자세히 살펴보겠습니다.
초기화 상관 없음
var로 선언된 변수에 초기화(변수 선언 시 값을 할당하는 것)는 상관 없습니다. 값을 할당해도 되고, 그렇지 않아도 됩니다. 값을 할당하지 않으면 참조 시 자바스크립트 엔진에서 자동으로 할당하는 초깃값인 undefined가 할당됩니다.
var a = 10;
console.log(a); // 출력: 10
var b;
console.log(b); // 출력: undefined
글로벌 스코프 또는 함수 스코프를 가지는 변수를 선언
- 함수 밖에서
var로 선언된 변수는 코드 전체에서 유효한 글로벌(전역) 스코프를 가집니다. - 함수 내에서
var로 선언된 변수는 해당 함수와 하위 함수 내에서 유효한 함수 스코프를 가집니다. if문이나for문 등 모든 블록({})은var로 선언된 변수의 스코프에 아무런 영향을 주지 않습니다.
var로 선언한 변수는 함수 밖에서 선언되었으면 글로벌에서 사용 가능(유효)하고, 함수 내에서 선언되었으면 해당 함수 내에서만 사용 가능(유효)합니다.
/* 글로벌(전역) 스코프 */
var globalVar = "글로벌 변수"; // 코드 전체 영역에서 유효한 변수임
function exampleFunction() {
/* 함수 스코프 */
var functionVar = "함수 내 변수"; // 함수 내 전체 영역에서 유효한 변수임
if (true) {
var blockVar = "블록 내 변수"; // if 문의 블록({}) 내에서 선언되었지만, 함수 내 전체 영역에서 유효함
console.log(functionVar); // 출력: "함수 내 변수"
console.log(blockVar); // 출력: "블록 내 변수"
}
// if 문의 블록({}) 내에서 선언되었지만, 함수 내 전체 영역에서 유효한지 확인
console.log(blockVar); // 출력: "블록 내 변수"
}
exampleFunction();
console.log(globalVar); // 출력: "글로벌변수"
console.log(functionVar); // ReferenceError 발생(함수 외부에서 유효하지 않음, functionVar is not defined)
재선언 및 재할당 가능
var로 선언된 변수는 같은 스코프 내에서 재선언(Redeclaration) 및 재할당(Reassignment)이 가능합니다.
이미 var로 선언된 변수의 값을 언제든지 새로운 값으로 변경할 수 있으며, 동일한 식별자(변수 이름)로 변수를 다시 선언해도 오류가 발생하지 않으며, 마지막에 할당된 값으로 덮어쓰게 됩니다.
/* 초기 선언 및 값을 할당 */
var myValue = 10;
console.log(myValue); // 출력: 10
/* 재할당 */
myValue = 20;
console.log(myValue); // 출력: 20 (값이 변경됨)
/* 재선언 (var를 다시 사용) */
var myValue = "Hello";
console.log(myValue); // 출력: "Hello" (오류 없이 다시 선언되고 값이 덮어쓰기 됨)
호이스팅(Hoisting) 발생
자바스크립트 인터프리터가 코드를 실행하기 전에 var로 선언한 변수는 실제로 작성된 위치와 상관없이 스코프의 최 상단 코드 위치로 끌어올려진 것처럼 동작합니다. 이러한 동작을 호이스팅(Hoisting, 끌어 올리기)이라고 합니다.
다만 선언된 변수만 올라가고, 선언 시 할당한 값은 원래 자리에 남습니다.
따라서, 실제 변수가 선언된 위치보다 먼저 참조되면 변수가 값이 할당되지 않았다는 의미로 자바스크립트 엔진에서 자동으로 할당하는 초깃값인 undefined가 할당됩니다.
/*
* 아래의 var myName으로 선언된 myName 변수가
* 스코프의 최 상단에 위치한 것처럼 호이스팅 됨
* 다만 선언된 변수만 올라가고,
* 선언 시 할당한 값은 원래 자리에 남게 됨.
*
* 선언 시 할당한 값이 없기 때문에
* 실제 변수가 선언된 위치보다 먼저 참조되면
* undefined로 초기화됩니다.
*/
/* 실제 변수가 선언된 위치보다 먼저 참조 */
console.log(myName); // 출력: undefined (선언만 호이스팅, 값은 undfined로 할당)
/* var로 선언한 변수의 위치 */
var myName = "John";
모듈(Module) 환경에서 var의 스코프
ES6 이후 import나 export 문을 사용하는 모듈 환경(.js 파일을 모듈로 불러오는 경우)에서는 var의 동작 방식에 중요한 변화가 생깁니다.
모듈은 파일을 단위로 독립적인 스코프를 가지기 때문에, 모듈 최상위 스코프에서 var로 선언해도 더 이상 글로벌(전역) 객체[window(브라우저) 또는 global(Node.js)]에 등록되지 않습니다. 모듈 환경에서는 함수 밖에서 선언해도, 전역 객체에는 추가되지 않고 모듈 내부에서만 유효합니다.
- 모듈 내부에서 함수 밖에 선언한
var변수는 모듈 전체에서 접근 가능(유효)하지만, 모듈 외부에서는 접근할 수 없습니다. - 모듈 내부에서 함수 내에 선언된
var변수는 함수 스코프를 유지합니다.
/* module.js */
var globalVar = "모듈 내부 글로벌 변수";
function exampleFunction() {
var functionVar = "함수 내 변수";
console.log(functionVar); // 출력: "함수 내 변수"
}
console.log(globalVar); // 출력: "모듈 내부 글로벌 변수"
// 모듈 외부에서 globalVar 접근 시
// 브라우저: window.globalVar → undefined
// Node.js: global.globalVar → undefined
주의할 점
var로 선언하는 변수는 같은 스코프 내에서 변수를 중복해서 선언하는 것을 허용하며, 값도 재할당할 수 있습니다. 또한, 함수 내에서 선언하지 않으면 글로벌(전역) 스코프를 가지게 됩니다.
이러한 특징들은 변수 선언에 있어 유연함을 가지지만, 엄격한 코드를 작성해야 하거나, 개발자들간의 협업 또는 외부 라이브러리를 사용할 때 변수끼리의 충돌이나, 덮어쓰기 등의 위험을 가질 수 있습니다.
다음은 var 사용 시 발생할 수 있는 구체적 문제와, 현대 자바스크립트에서 권장하는 안전한 대체 방식을 함께 살펴봅니다.
글로벌 변수 오염
var 로 선언한 변수는 글로벌(전역) 스코프에서도 선언할 수 있습니다. 이로 인해 변수의 범위가 예상치 못하게 글로벌로 퍼질 수 있고, 다른 스크립트나 라이브러리와 변수 이름 충돌이 발생할 수 있습니다.
// script1.js
var sharedVar = "값1";
// script2.js
var sharedVar = "값2";
console.log(sharedVar); // 출력: "값2" → script1의 값이 덮어써짐
재선언 및 재할당 문제
같은 스코프 내에서 var 로 선언한 변수는 재선언 및 재할당이 가능합니다. 이로 인해 의도치 않은 값 변경이나 논리적 버그가 생길 수 있습니다.
var count = 1;
var count = 2; // 같은 스코프에서 재선언 가능
count = 3; // 재할당 가능
console.log(count); // 출력: 3
현대 자바스크립트 권장 사항
자바스크립트 var, let, const의 차이점를 참고하세요.
호환성
| 문 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
Node.js
|
|---|---|---|---|---|---|
var
|
1 | 12 | 1 | 1 | 0.10 |
명세서
| 명세서 사양 | |
|---|---|
var
|
ECMAScript® 2026 Language Specification #sec-variable-statement |