[JavaScript] 변수 선언 방식 (var/ let/ const)

var / let / const 란 무엇인가?

JavaScript 에서 변수 선언 시에 사용하는 예약어(키워드)

예약어(키워드) : 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들

1. var

ES6(ECMAScript6) 이전에 변수 선언 방식이다.

 

변수 선언 및 초기화 후에 값을 재할당할 수 있다.

 

동일한 변수명으로 중복 선언이 가능하다.

 

예시)

// 첫 번째 변수 선언 + 초기화
var a = 10;
console.log(a); // 결과값: 10

// 값 재할당
a = 20;
console.log(a); // 결과값: 20

// 두 번째 변수 선언 + 초기화
var a = 30;
console.log(a); // 결과값: 30

// 세 번째 변수 선언
var a;
console.log(a); // 결과값: 30

설명:

• var 로 선언한 변수는 중복해서 선언(+초기화) 가 가능하다. (에러가 발생하지 않음.)
  • 이 경우, 마지막에 할당된 값이 변수에 저장된다.
• 초기화 없이 선언만 한 경우에는 선언문 자체가 무시된다. (에러는 발생하지 않음.)

함수 레벨 스코프: 함수 내부에서 선언한 변수는 함수 내부에서만 참조가 가능하다.hello 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조 시 에러가 발생한다.

 

예시) 함수 내부에서 선언한 변수만 ‘지역변수’ 로 취급됨.

function hello() { 
    var a = 10; 
    console.log(a); 
} 

hello(); // 10 
console.log(a); // ReferenceError: a is not defined

예시) 함수를 제외한 영역에서 선언한 변수는 ‘전역변수’ 로 취급됨

if (true) {
    var a = 10;
    console.log(a); // 10
}
console.log(a); // 10

if문, for문, while문, try/catch 문 등의 코드 블럭{ ... } 내부에서 var로 선언된 변수는 전역변수로 취급되어 블럭 외부에서도 어디에서나 참조할 수 있다.

스코프 : 일반명사) 범위, 고유명사) 유효한 참조 범위

2. let

var 의 단점(중복 선언) 을 보완하기 위해 ES6(ECMAScript6) 에서 새로 등장한 변수 선언 방식이다.

 

변수 선언 및 초기화 후에 값을 재할당할 수 있다.

 

동일한 변수명으로 중복 선언이 불가능하다. (에러가 발생함.)

 

예시)

let a = 100;
console.log(a); // 결과값: 100

let a = 200;
console.log(a); // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가

a = 300;
console.log(a); // 300
// 값 재할당은 가능함.

 

블록 레벨 스코프 : 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.

 

예시) if문의 내부에서 let 으로 선언된 변수는 외부에서 참조되지 않는다.

if (true) {
    let a = 10;
    console.log(a); // 10
}
console.log(a); // ReferenceError: 'a' is not defined

예시) 함수 내부에서 let 으로 선언된 변수 또한 외부에서 참조되지 않는다.

function hello() {
    let a = 10;
    console.log(a); // 10
}

hello();
console.log(a); // ReferenceError: 'a' is not defined

 

3. const

let 과 동일하게 ES6(ECMAScript6) 에서 새로 등장한 변수 선언 방식이다.

 

let 처럼 동일한 변수명으로 중복 선언이 불가능하다. (에러가 발생함.)

 

let 과 다른 점은 변수를 처음에 한 번 선언하고 나면 값을 넣을 수 없다.

-> 값을 재할당하는 것이 불가능하다.

-> 보통 상수를 선언하는 키워드로 사용된다.

 

예시)

const a = 100;
console.log(a); // 결과값: 100

const a = 200;
console.log(a); // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가

const a = 300;
console.log(a); // 에러 발생
// Assignment to constant variable
// 값을 재할당하는 것도 불가

 

 

블록 레벨 스코프 : 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.

 

예시) if문의 내부에서 let 으로 선언된 변수는 외부에서 참조되지 않는다.

if (true) {
    const a = 10;
    console.log(a); // 10
}
console.log(a); // ReferenceError: 'a' is not defined

예시) 함수 내부에서 let 으로 선언된 변수 또한 외부에서 참조되지 않는다.

function hello() {
    let a = 10;
    console.log(a); // 10
}

hello();
console.log(a); // ReferenceError: 'a' is not defined

 

정리

• var / let / const 는 JavaScript 에서 변수 선언 시에 사용되는 키워드(예약어) 이다.
• var 는 ES6 이전부터 사용된 변수 선언 방식이다. 동일한 변수명으로 중복 선언이 가능하며, 값의 재할당이 가능하다.
• let / const 는 var 의 단점(중복 선언) 을 보완하기 위해 ES6 에서 새로 등장한 변수 선언 방식이다.
• let 은 동일한 변수명으로 중복 선언 시 에러가 발생하며, 값의 재할당이 가능하다.
• const 는 동일한 변수명으로 중복 선언 시 에러가 발생하며, 값의 재할당이 불가능하다.
• var 로 선언된 변수는 함수 레벨 스코프를 가지는데, 함수 내부에서 선언된 변수만 지역변수로 취급되며 그 외의 변수는 모두 전역변수로 취급된다.
• let / const 로 선언된 변수는 블록 레벨 스토프를 가지는데, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수까지도 지역변수로 취급된다.