[JavaScript] const, var , let 변수 선언 차이점

반응형

 

JavaScript에서 const, let, var는 변수를 선언할 때 사용하는 키워드 이다.

 

 

const, let, var 이 셋은 선언된 변수가 어떻게 동작하는지에 따라 중요한 차이점이 있으며, 간단하게 각각의 설명과 차이점을 알아보자.

 

 

var: 전통적인 방식의 변수 선언

var는 JavaScript에서 가장 오래된 변수 선언 방식이며, 말이 좋아 전통적인 방식이라 하지 고였다고 보면된다 .. ES6 이전의 모든 코드에서 사용되었으며. var의 주요 특성을 알아보자.

 

var의 주요 특징:

• 함수 스코프(Function Scope): var는 함수 내부에서만 스코프를 가지며, 함수 외부에서 선언되면 전역 스코프에 속하게 된다.
• 호이스팅(Hoisting): var로 선언된 변수는 호이스팅되어, 해당 변수가 선언된 위치에 상관없이 함수나 스크립트의 맨 위로 끌어올려진다. 변수를 선언하기 전에 참조할 수 있게 만든다. 그러나 초기화는 호이스팅되지 않으므로 값은 undefined가 된다.

함수 스코프와 호이스팅의 개념을 정리해논 글이다. 한번쯤 봐보면 좋을 것 같다.

2024.08.26 - [JavaScript] - [JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

[JavaScript] 호이스팅(Hoisting) 과 스코프(Scope)란?

 

console.log(a);  // undefined
var a = 5;
console.log(a);  // 5

 

 

var는 중복 선언이 가능하다. 

var a = 5;
var a = 10;
console.log(a);  // 10

 

문제점이 보일 것 이다.

• 전역 오염: 전역 스코프에서 선언된 var 변수는 어디서든지 접근 가능해 전역 변수를 너무 많이 생성할 수 있으며, 의도치 않은 재정의 등의 문제를 일으킬 수 있다.
• 예측 불가한 스코프: var는 블록 스코프를 지원하지 않아서, if문이나 for문 안에서 선언된 변수가 블록 외부에서도 접근 가능하게 되며, 이렇게 되면은 코드의 가독성이 너무 안좋아지고 안정성에 문제를 일으킬 수 있다.

 

let: 블록 스코프를 가진 변수 선언

let은 ES6(ECMAScript 2015)에서 도입된 새로운 변수 선언 방식으로, var의 단점을 보완하기 위해 나타났다.

 

let의 주요 특징

• 블록 스코프(Block Scope): let은 함수뿐만 아니라 블록(중괄호 {}) 내부에서만 유효함. 그리고 블록 스코프란, if, for, while 같은 제어문 내에서 선언된 변수가 그 블록을 벗어나면 사라진다는 뜻이다.

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

 

호이스팅은 되지만 초기화되지 않음: let으로 선언된 변수도 호이스팅되지만, var와는 달리 변수가 실제로 선언되기 전에는 사용할 수 없으며, 이 기간을 일시적 사각지대(TDZ, Temporal Dead Zone) 라고 부른다.

아주 중요한 개념인거 같아서 정리한 글이 있는데 한번쯤 봐주면 좋을 것 같다.

2024.08.26 - [JavaScript] - [JavaScript] TDZ(Temporal Dead Zone)란?

[JavaScript] TDZ(Temporal Dead Zone)란?

console.log(a);  // ReferenceError: Cannot access 'a' before initialization
let a = 5;

 

중복 선언 불가: var는 중복 선언이 가능하지만 let은 같은 스코프 내에서 let으로 선언된 변수를 중복 선언할 수 없다.

let a = 5;
let a = 10;  // SyntaxError: Identifier 'a' has already been declared

 

이러한 let을 살펴봤을떄의 장점은 

 

• 명확한 스코프: 블록 스코프를 지원함으로써, 변수의 생명주기가 블록 내로 한정되므로 의도치 않은 변수 접근이나 값 변경을 방지할 수 있다.
• 호이스팅과 관련된 오류 방지: let은 선언 전에 접근할 수 없도록 해주어, 코드의 예측 가능성과 안전성을 높여준다.

 

const: 상수 선언 (블록 스코프)

const 또한 ES6에서 도입된 키워드로, 상수(변경할 수 없는 값)를 선언할 때 사용한다. 하지만  "상수" 개념은 약간 다르다 한번 알아보자.

const 주요 특징

• 블록 스코프(Block Scope): let과 마찬가지로, const는 블록 스코프를 가진다. {}로 둘러싸인 블록 내부에서만 유효하며, 블록을 벗어나면 접근할 수 없다.
• 값 변경 불가: const로 선언된 변수는 재할당이 불가능히며, 한 번 선언된 변수는 다른 값으로 다시 초기화할 수 없다.

const a = 5;
a = 10;  // TypeError: Assignment to constant variable.

 

 

호이스팅은 되지만 초기화되지 않음: let과 마찬가지로 const도 호이스팅되지만, 선언 전에 사용할 수 없고 일시적 사각지대(TDZ) 에 걸리게 된다.

console.log(a);  // ReferenceError: Cannot access 'a' before initialization
const a = 5;

 

객체와 배열의 변경: const는 원시 값(숫자, 문자열, 불리언 등)에 대해서는 값을 변경할 수 없지만, 객체나 배열의 경우에는 그 내부의 속성이나 요소는 변경할 수 있다. 이게 무슨 말이냐면, 객체나 배열의 참조는 불변하지만, 내부 값은 변할 수 있다라는 말이다.

const array = [1, 2, 3];
array.push(4);  // 정상 작동: [1, 2, 3, 4]
console.log(array);

const object = { a: 1 };
object.a = 2;  // 정상 작동: { a: 2 }
console.log(object);

• 불변성 보장: const를 사용함으로써 값이 변경되지 않는다는 사실을 보장할 수 있으며, 코드의 안정성을 높이고, 의도치 않은 변수 재할당을 방지함.
• 블록 스코프: const도 let처럼 블록 스코프를 가지며, 이를 통해 변수의 생명주기를 보다 정확하게 제어할 수 있다.

 

var,let,const에 특징 표이다.

특징	var	let	const
스코프	함수 스코프 or 전역 스코프	블록 스코프	블록 스코프
호이스팅	가능 초기값은 undefined	가능 하지만 TDZ로 인해 사용불가능	가능 하지만 TDZ로 인해 사용불가능
중복선언	가능	불가능	불가능
값 변경	가능	가능	불가 (객체 속성이나 배열 요소는 사용 가능)
재할당	가능	가능	불가능