[javaScript] 변수 var, let, const에 대해

 

출처 : chatGPT 이미지 출력

변수?

변수란 "하나의 값을 저장할 수 있는 메모리 공간이자 값을 나타내는 문자나 문자들의 집합이며 실행 중인 컴퓨터 프로그램에서, 임의의 값을 저장한 메모리 주소에 대응한다." 라고 위키피디아에서 정의하고 있다.

 

좀 풀어서 말해보면 컴퓨터에서 데이터는 메모리 공간에 존재하는데 2진수로 처리되어 있으며 메모리와 대응되는 메모리 주소가 존재한다.

결국 변수 이름(식별자)는 메모리에 저장된 값의 주소를 가리키는 이름과 같다. 결국 식별자는 값이 아니라 메모리주소를 기억하고 있다.

 

변수를 사용하려면 선언이 필요한데 이때 js에서는 var, let, const 키워드를 사용한다.

각 키워드들에 대해서 알아보자

 

* Scope (스코프) : 변수와 식별자가 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효범위 (참조 유효범위)

* 호이스팅 (hoisting) : 변수 선언이 스코프의 맨 위로 끌어올려진 것처럼 동작하는 자바스크립트의 특징  (스코프 단위로 적용)

 

 

 

---

 

 

javaScript의 변수 키워드

var 키워드

1) 변수의 중복 선언이 허용된다.

var a = 1;
var b = 1;

var a = 2;
var b;

console.log(a);
console.log(b);

콘솔탭 출력결과

1) 위 코드를 실행해보면 a값은 2가 출력되고 b값은 1이 출력된다.

2) var 키워드로 선언한 변수는 동일한 식별자로 중복 선언하여 사용이 가능하다.

3) 위 예시 코드를 보면 변수 a는 1로 할당 했다가 중복 선언으로 값이 2가 된 결과를 볼 수 있다.

4) 변수 b는 다르게 동작하는데 선언만하고 초기화문이 없는 변수는 무시되어 처음 값인 1이 출력된다.

 

2) 함수 레벨 스코프에서 지역변수로 적용된다.

var a = 1;

if(true) {
	var a = 2;
}

console.log(a); // 2가 출력된다.

콘솔탭 출력결과

1) 위 if문의 블록 레벨 스코프에서 var 키워드는 전역 변수로 적용되어 변수 a의 값은 2가 출력된다.

 

var a = 1;

function foo(){
	var a = 2;
    console.log(a); // 2
}
foo()
console.log(a) // 1

함수 레벨 스코프 콘솔탭 출력결과

1) 위 코드의 경우 함수 블록에서 지역 스코프로 인정되므로 foo함수 안에서는 2가 출력된다.

2) 함수 밖 콘솔에서는 글로벌 변수 a값인 1이 출력되는 모습을 볼 수 있다.

 

3) 호이스팅 (선언 + 초기화 한번에 진행)

console.log('첫 번째 ' + a); // undefined

var a = 1;

console.log('두 번째 ' + a); // 1

호이스팅 관련 콘솔 결과

1) 위 var 변수 선언은 자바스크립트 런타임 이전에 실행되어 마치 맨위에서 실행된 것처럼 보이는 호이스팅 현상이 발생한다.

2) var 키워드는 런타임 이전에 선언과 동시에 undefined로 초기화하기 때문에 위 콘솔에서 undefined가 출력된다.

3) 아래 콘솔 a에서는 1이 출력된다.

 

 

let 키워드

1) 재선언 불가능

 

재선언 불가능

1) let 키워드로 선언된 변수는 같은 스코프내에서 재선언이 불가능하다.

2) 위 이미지에서 재선언 시 이미 선언되었다는 에러가 발생한다.

3) 재할당은 가능하다.

 

2) 블록 레벨 스코프 적용

let a = 1;

if(true){
    let a = 2;
    let b = 3;
    console.log(a); // 2
}

console.log(a); // 1
console.log(b); // b is not defined

출력 결과

1) 첫 번째 콘솔에서는 if문 블록의 a값인 2가 출력된다. (let은 블록 스코프)

2) 두 번째 콘솔에서는 글로벌 변수 a값인 1이 출력된다.

3) 세 번째 콘솔에서는 if문 안에 변수 b가 있으므로 레퍼런스 에러 b is not defined 에러가 발생한다.

 

 

3) 호이스팅 발생 (TDZ 발생)

console.log(a); // Uncaught ReferenceError: a is not defined
// TDZ (temporal dead zone) 일시적 사각지대 : 스코프 시작 지점에서 변수를 참조할 수 없는 구간

let a; // 초기화 단계 진행 (undefined로 초기화)

console.log(a); // undefined

a = 1; // 할당 단계

console.log(a); // 1

1) var 키워드는 런타임 이전에 선언과 초기화(undefined)가 동시에 이루어진다

2) let 키워드는 런타임 이전에 선언만 이루어지고 변수 선언문에서 초기화가 이루어진다.

3) 같은 스코프내에서 변수를 참조할 수 없는 구간인 TDZ 일시적 사각지대 구간이 발생한다.

4) 할당문에서 할당이 진행된다.

 

 

const 키워드

1) 재선언 불가능

재선언 불가능

var, let 키워드와 다르게 const 키워드는 재선언이 불가능하다.

 

 

2) 재할당 불가능

재할당 불가능

let 키워드는 재할당이 가능하나 const는 재할당이 불가능하다.

 

 

3) 선언과 초기화

const c; // Uncaught SyntaxError: Missing initializer in const declaration

const d = 1; // 선언과 동시에 초기화해야 한다

1) const 의 경우 선언과 동시에 초기화를 진행해야 한다.

2) let 키워드와 마찬가지로 블록 레벨 스코프를 가지며 변수 호이스팅도 발생한다. (TDZ 발생)

 

 

4) 상수

const car = { 
  brand: 'BMW',
}

car.brand = 'Benz'; // 객체의 값 생성, 삭제, 변경은 가능하다

console.log(car); // Benz

const 키워드 변수의 객체 값은 변경 가능

1) const 키워드 변수는 재할당이 되지 않는다.

2) 재할당이 불가능하지만 객체를 할당한 경우 값은 변경할 수 있다.

3) 객체 값은 변경되더라도 변수에 할당된 참조 값은 그대로이기에 가능하다.

 

 

 

정리

 

구분 항목	var	let	const
스코프(Scope)	함수 스코프 (Function Scope)	블록 스코프 (Block Scope)	블록 스코프 (Block Scope)
재선언 가능 여부	가능	불가능	불가능
재할당 가능 여부	가능	가능	불가능 (단, 객체는 내부 변경 가능)
호이스팅(hoisting)	선언이 위로 끌어올려짐 (초기값은 undefined)	선언만 호이스팅됨 (TDZ 존재)	선언만 호이스팅됨 (TDZ 존재)
초기화 여부	선언과 동시에 초기화 안 해도 됨	선언과 동시에 초기화 안 해도 됨	반드시 선언과 동시에 초기화 필요
대표 사용 예	예전 JS 코드 / 함수 내부 임시 변수	일반적인 변수	상수, 변경되지 않아야 하는 참조값

 

---

 

 

참고자료

https://ko.wikipedia.org/wiki/%EB%B3%80%EC%88%98_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)

변수 (컴퓨터 과학) - 위키백과, 우리 모두의 백과사전

https://www.yes24.com/Product/Goods/92742567

모던 자바스크립트 Deep Dive - 예스24

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

📚 var / let / const 차이점 정리 (변수 호이스팅)