본문 바로가기
프론트엔드/JavaScript

[JS] var, let, const 특징

shs00925 2024. 10. 20. 22:56
728x90

JavaScript의 변수 선언: var, let, const

JavaScript에서는 변수를 선언할 때 var, let, const를 사용할 수 있습니다. 이들은 각기 다른 스코프(범위)와 특성을 가지며 코드의 동작 방식에 영향을 미칩니다. 아래는 각각의 특징과 사용 방법을 정리한 내용입니다.

 

 

var

var는 ES6 이전의 기본 변수 선언 방식입니다. 하지만 스코프 문제와 호이스팅(hoisting) 특성으로 인해 주의해서 사용해야 합니다.

 var의 스코프 (범위)

  • var는 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 변수는 해당 함수 안에서만 유효합니다.
  • 함수 외부에서 선언된 var 변수는 전역 변수가 되어 프로그램 전체에서 접근할 수 있습니다.
var hello = 'hello';  // 전역 변수

function func() {
    var world = 'world';  // 함수 내부 변수
    console.log(hello + ' ' + world);  // "hello world"
}

console.log(hello);  // "hello"
console.log(world);  // 에러: world is not defined (함수 외부에서는 접근 불가)

 

 

var의 중복 선언과 재할당

  • 중복 선언이 허용됩니다.
  • 변수 값 재할당도 가능합니다.
var text = 'hello world';
var text = 'hello';  // 중복 선언 가능
text = 'hi';  // 재할당 가능
console.log(text);  // "hi"

 

 

 

var의 호이스팅

호이스팅이란 JavaScript 엔진이 변수나 함수 선언을 스코프의 최상단으로 끌어올리는 메커니즘입니다.
var 변수는 선언이 끌어올려지지만, 초기화는 되지 않으므로 undefined 상태가 됩니다.

console.log(text);  // undefined
var text = 'hello world';

// JavaScript 내부적으로 이렇게 처리됨:
var text;
console.log(text);  // undefined
text = 'hello world';

 

var의 문제점: 블록 스코프 무시

var는 블록({}) 내부에 선언해도 해당 블록을 무시하고 함수나 전역 스코프에 포함됩니다.

var count = 1;
var message = 'hi';

if (count === 1) {
    var message = 'hello';  // 블록 외부에서도 접근 가능
    console.log(message);  // "hello"
}
console.log(message);  // "hello" (문제 발생)

 

let

let은 ES6에서 도입된 변수 선언 방식으로, 블록 스코프(block scope)를 가집니다.

블록 스코프

블록 스코프란 {}로 감싸진 코드 블록 안에서만 변수가 유효한 것을 의미합니다.

let count = 1;

if (count === 1) {
    let message = 'hello';  // 블록 내부에서만 유효
    console.log(message);  // "hello"
}
console.log(message);  // 에러: message is not defined

let의 호이스팅

  • let도 선언이 호이스팅되지만, 초기화되지 않은 상태로 남아 사용하기 전에 참조하면 에러가 발생합니다.
  • 이를 "일시적 사각지대(Temporal Dead Zone, TDZ)"라고 부릅니다.
console.log(text);  // ReferenceError: text is not defined
let text = 'hello';

let의 중복 선언과 재할당

  • 중복 선언이 허용되지 않습니다.
  • 재할당은 가능합니다.
let text = 'hello';
// let text = 'world';  // 에러: 중복 선언 불가
text = 'hi';  // 재할당 가능
console.log(text);  // "hi"

 

const

const는 상수(constant)를 선언하는 데 사용되며, 선언된 변수의 값을 변경할 수 없습니다.

 

const의 특성

  • 재선언 불가, 재할당 불가
  • 선언과 동시에 초기화가 필수입니다.
const pi = 3.14;
console.log(pi);  // 3.14

pi = 3.14159;  // 에러: 재할당 불가

const와 블록 스코프

const는 블록 스코프를 가지며, 블록 외부에서는 접근할 수 없습니다.

const count = 1;

if (count === 1) {
    const message = 'hello';
    console.log(message);  // "hello"
}
console.log(message);  // 에러: message is not defined

 

const로 선언한 객체와 배열의 변경

객체나 배열의 참조(주소) 자체는 변경할 수 없지만, 내부 속성은 변경할 수 있습니다.

const arr = [1, 2, 3];
arr[0] = 99;  // 가능 (배열의 요소 변경)
console.log(arr);  // [99, 2, 3]

// arr = [4, 5, 6];  // 에러: 재할당 불가

const obj = { name: 'Alice' };
obj.name = 'Bob';  // 가능 (객체의 속성 변경)
console.log(obj);  // { name: 'Bob' }

 

 

var, let, const 비교

특성 var let const
스코프 함수 스코프 블록 스코프 블록 스코프
중복 선언 가능 불가능 불가능
재할당 가능 가능 불가능
초기화 필수 아니요 아니요 예
호이스팅 선언만 호이스팅 (초기화: undefined) 호이스팅 (TDZ로 에러) 호이스팅 (TDZ로 에러)

 

 

결론 및 권장 사항

  • var 대신 let과 const를 사용하는 것을 권장합니다.
  • 값이 변하지 않는 경우에는 const를 사용하고,
    변수의 값이 변경될 가능성이 있는 경우에만 let을 사용하세요.
  • 이러한 패턴을 통해 코드의 가독성과 예측 가능성을 높일 수 있습니다.
const MAX_USERS = 100;  // 상수 선언 (변경 불가)
let userCount = 0;      // 변경 가능 변수

userCount++;
console.log(userCount);  // 1

이처럼 let과 const의 적절한 사용은 코드의 안정성을 높이고, 예기치 않은 버그를 줄이는 데 도움이 됩니다.

728x90

티스토리툴바