JavaScript let 설명: let, var, const의 차이점 (초보자부터 중급자용 가이드)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. 소개

JavaScript에서의 변수 선언은 프로그래밍의 가장 기본적인 개념 중 하나입니다. 최근 몇 년 동안 var, let, const라는 세 가지 다른 선언 키워드가 일반적으로 사용되기 시작하면서, 각 상황에 적합한 것을 선택하는 것이 중요해졌습니다.

이 기사에서는 “javascript let” 키워드에 초점을 맞추고 ** let의 특성과 사용법, 그리고 var와 const와의 차이점**을 명확히 설명합니다. 내용은 초보자에서 중급 개발자를 대상으로 하며, 기본 개념부터 실전 사용법까지 다룹니다.

우리의 목표는 독자들이 let을 언제, 왜 사용해야 하는지 정확히 이해할 수 있도록 돕는 것으로, 안전하고 효율적이며 유지보수 가능한 JavaScript 코드를 작성할 수 있게 하는 것입니다.

2. JavaScript 변수 선언 방법 개요

JavaScript에서 변수는 데이터를 일시적으로 저장하는 데 사용됩니다. 변수를 선언하기 위해 세 가지 주요 키워드가 있습니다:

• var: 오래된 JavaScript에서 사용된 전통적인 변수 선언 방법
• let: ES6 (ECMAScript 2015)에서 도입된 블록 스코프 변수 선언
• const: ES6에서 도입된 상수 선언 키워드

이 키워드들은 각각 다른 특성을 가지므로, 목적과 맥락에 따라 적절한 것을 선택하는 것이 중요합니다.

아래 표는 그들의 기본 특징을 요약한 것입니다:

이 표에서 보듯이, let은 블록 스코프를 지원하고 재할당을 허용하는 유연한 변수 선언으로 널리 사용되며, 많은 현대 JavaScript 시나리오에 적합합니다.

3. let이란 무엇인가? — 기본 사용법

let은 ES6에서 도입된 새로운 변수 선언 키워드입니다. 주로 다음과 같은 특성을 가집니다.

1. 블록 스코프를 가짐
2. 재할당을 허용함
3. var와 호이스팅 동작이 다름

3.1 let의 기본 구문

다음 코드는 let을 사용한 변수 선언의 기본 방법을 보여줍니다.

let x = 10;  // Declare variable x and assign the value 10
x = 20;      // Reassignment is allowed
console.log(x); // Output: 20

이 예에서 보듯이, let은 선언 후 값을 변경할 수 있습니다. 이는 const와 다르며, let을 유연한 데이터 관리에 적합하게 만듭니다.

3.2 블록 스코프의 특성

let은 블록 스코프를 가지기 때문에, 선언된 블록 내에서만 유효합니다.

{
  let y = 30;  // Declared inside the block
  console.log(y); // Output: 30
}
console.log(y); // Error: y is not defined

이렇게 하면 변수 y는 블록 밖에서 참조할 수 없어 오류가 발생합니다. 이는 의도하지 않은 전역 오염을 방지하고 더 안전한 변수 관리를 가능하게 합니다.

3.3 호이스팅 동작

let은 호이스팅되지만, 선언 전에 접근하려 하면 오류가 발생합니다.

console.log(z); // Error: Cannot access 'z' before initialization
let z = 50;

이 동작은 호이스팅 시 undefined로 초기화되는 var와 대조됩니다. 오류를 피하기 위해 항상 선언 후에 let을 사용하세요.

4. var와 let의 차이점

JavaScript에서 var 또는 let을 사용하여 변수를 선언할 수 있지만, 이 둘 사이에는 여러 중요한 차이점이 있습니다. 이 섹션에서는 스코프, 재선언, 호이스팅 동작에 초점을 맞추고, 구체적인 예시와 함께 차이점을 자세히 설명합니다.

4.1 스코프 차이

주요 차이점 중 하나는 var는 함수 스코프를 가지며, let은 블록 스코프를 가진다는 것입니다.

함수 스코프 예시 (var)

function exampleVar() {
  if (true) {
    var a = 10; // Variable declared inside the function
  }
  console.log(a); // Output: 10
}

exampleVar();

블록 스코프 예시 (let)

function exampleLet() {
  if (true) {
    let b = 20; // Valid only within the block
  }
  console.log(b); // Error: b is not defined
}

exampleLet();

이 차이 때문에 let은 의도하지 않은 변수 재정의나 덮어쓰기를 방지하는 데 더 적합합니다.

4.2 재선언 허용 여부

var은 동일한 스코프 내에서 재선언할 수 있지만, let은 재선언을 허용하지 않습니다.

var를 사용한 재선언 예시

var x = 10;
var x = 20; // Redeclaration is allowed without issues
console.log(x); // Output: 20

let을 사용한 재선언 예시

let y = 10;
let y = 20; // Error: Identifier 'y' has already been declared
console.log(y);

이 특성으로 인해 let은 동일한 변수를 실수로 여러 번 선언하는 실수를 방지하는 데 도움이 됩니다.

4.3 호이스팅 차이

호이스팅은 JavaScript에서 변수와 함수 선언을 해당 스코프의 최상단으로 이동시키는 메커니즘입니다.

var를 사용한 호이스팅 예시

console.log(z); // Output: undefined
var z = 30;

let을 사용한 호이스팅 예시

console.log(w); // Error: Cannot access 'w' before initialization
let w = 40;

4.4 사용 요약

var은 이전 코드나 하위 호환성이 필요한 경우에 사용되며, let은 현대적인 코드에서 더 안전한 스코프 관리를 위해 사용됩니다.

비교 표

5. const와 let의 차이

JavaScript에서 const는 let과 함께 자주 사용되는 또 다른 변수 선언 방법입니다. 이 섹션에서는 let과 const의 차이를 자세히 살펴보고 각자의 적절한 사용 방법을 설명합니다.

5.1 const란?

const는 재할당할 수 없는 변수를 선언하는 데 사용되는 키워드입니다.

기본 구문

const pi = 3.14; // Declare a constant
pi = 3.14159;    // Error: Assignment to constant variable.

이 예시에서 pi의 값은 선언 후 변경할 수 없으며, 재할당을 시도하면 오류가 발생합니다.

5.2 let과 const의 차이

5.3 재할당 및 재선언 비교

let을 사용한 재할당 예시

let count = 1;  // Initialization
count = 2;      // Reassignment is allowed
console.log(count); // Output: 2

const를 사용한 재할당 예시

const maxCount = 10;
maxCount = 20; // Error: Assignment to constant variable.

위 예시에서 보듯이 let은 변경되는 값에 적합하며, const는 고정된 값에 가장 적합합니다.

5.4 객체와 배열에 대한 중요한 주의사항

const는 재할당을 방지하지만, 객체의 속성과 배열의 요소는 여전히 수정할 수 있습니다.

객체 예시

const user = { name: "Taro" };
user.name = "Jiro"; // Modifying properties is allowed
console.log(user.name); // Output: "Jiro"

user = { name: "Saburo" }; // Error: Reassignment is not allowed

배열 예시

const numbers = [1, 2, 3];
numbers.push(4); // Adding elements is allowed
console.log(numbers); // Output: [1, 2, 3, 4]

numbers = [5, 6, 7]; // Error: Reassignment is not allowed

5.5 실전 사용 예시

const를 사용해야 하는 경우:

1. 상수나 절대 변경되지 않는 값

   const TAX_RATE = 0.1;
   

2. 객체 또는 배열에 대한 참조를 고정할 때

   const CONFIG = {
     apiUrl: "https://example.com/api",
   };
   

let을 사용해야 하는 경우:

1. 값이 동적으로 변경되어야 할 때

   let count = 0;
   count++;
   

2. 루프 내에서 증가되는 변수

   for (let i = 0; i < 10; i++) {
     console.log(i);
   }
   

6. let을 사용할 때와 주요 고려사항

JavaScript는 var, let, const라는 세 가지 변수 선언 옵션을 제공합니다. 그중에서 let은 특정 상황에서 특히 유용한 역할을 합니다.

이 섹션에서는 let을 사용할 때와 주의해야 할 주요 사항을 설명합니다.

6.1 let의 권장 사용 사례

.1. 블록 스코프가 필요할 때 let은 블록 스코프를 가지므로 조건문과 반복문 안에서 변수를 안전하게 관리할 수 있습니다. 예시: 조건 블록 내부에서 변수 관리

if (true) {
  let message = "Hello, World!";
  console.log(message); // Output: Hello, World!
}
console.log(message); // Error: message is not defined

2. 값을 동적으로 업데이트해야 할 때 const는 재할당을 허용하지 않지만, let은 값이 동적으로 변하는 상황에 적합합니다. 예시: 반복문 안에서 변수 관리

   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total += i;
   }
   console.log(total); // Output: 15
   

3. 임시 값을 저장할 때 함수 내부에서 짧게만 사용되는 변수는 let을 사용하면 코드 가독성과 유지보수성이 향상됩니다. 예시: 함수 내부의 로컬 변수

   function calculateDiscount(price) {
     let discount = 0.1; // Temporary discount rate
     return price * (1 - discount);
   }
   console.log(calculateDiscount(1000)); // Output: 900
   

6.2 let 사용 시 유의사항

1. 변수 초기화에 주의 let 변수를 선언하기 전에 접근하면 오류가 발생합니다. 예시: 초기화 전에 접근

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

2. 호이스팅 동작 이해 let도 호이스팅되지만 “Temporal Dead Zone (TDZ)” 안에서는 접근할 수 없습니다. 예시: TDZ 동작

   if (true) {
     console.log(b); // Error: Cannot access 'b' before initialization
     let b = 20;
   }
   

3. 스코프 경계 인식 같은 블록 안에서 동일한 이름으로 변수를 다시 선언할 수 없습니다. 예시: 재선언 오류

   let c = 10;
   let c = 20; // Error: Identifier 'c' has already been declared
   

4. 전역 오염 방지를 위해 let 사용 var를 사용하면 전역 스코프에 영향을 줄 위험이 커지지만, let은 그 위험을 줄여줍니다. 예시: 전역 변수와 로컬 변수 간 충돌 방지

   let d = 50; // Global variable
   function test() {
     let d = 30; // Local variable
     console.log(d); // Output: 30
   }
   test();
   console.log(d); // Output: 50
   

7. FAQ 섹션 (자주 묻는 질문)

이 섹션에서는 JavaScript let과 관련된 흔한 질문과 답변을 정리합니다. 실무에서 마주치는 문제와 해결 방법을 구체적인 예시와 함께 설명합니다.

Q1: 왜 let을 사용해야 하나요?

A:
let을 권장하는 이유는 다음과 같습니다.

1. 블록 스코프: let은 변수 스코프를 블록으로 제한하므로 의도치 않은 변수 덮어쓰기를 방지합니다.
2. 재선언 방지: 같은 스코프 내에서 재선언이 허용되지 않아 버그 발생 위험이 줄어듭니다.
3. 호이스팅 안전성: let은 Temporal Dead Zone (TDZ) 안에서 오류를 발생시켜, 선언 전에 변수를 접근하는 실수를 쉽게 감지할 수 있습니다.

Q2: var를 사용할 때 어떤 문제가 발생하나요?

A:
var는 오래된 코드와의 호환성을 제공하지만 다음과 같은 문제점이 있습니다.

1. 스코프가 너무 넓음: 함수 스코프만을 가지므로 블록 내부에서 선언된 변수가 의도치 않게 외부에서 접근될 수 있습니다.

   if (true) {
     var x = 10;
   }
   console.log(x); // Output: 10
   

2. 재선언 허용: 같은 이름의 변수를 여러 번 선언할 수 있어 실수로 변수가 덮어써질 위험이 있습니다.

   var y = 20;
   var y = 30; // Overwriting occurs
   

3. 호이스팅 동작: var로 선언된 변수는 undefined로 초기화되어 선언 전에 접근이 가능해 예기치 않은 동작을 초래할 수 있습니다.

   console.log(z); // Output: undefined
   var z = 50;
   

Q3: let과 const 중 어떻게 선택해야 하나요?

A:
기본적인 선택 기준은 다음과 같습니다.

• const: 값이 변하지 않아야 하거나 상수처럼 사용할 경우.
• let: 값이 변할 수 있거나 동적으로 업데이트가 필요한 경우.

예시:

const TAX_RATE = 0.1;
let price = 1000;
price = price * (1 + TAX_RATE); // Price calculation

데이터의 성격에 따라 적절한 키워드를 선택하면 코드가 더 표현력 있고 이해하기 쉬워집니다.

Q4: 초기화 전에 let에 접근할 때 ReferenceError가 발생하는 원인은 무엇인가요?

A:
let으로 선언된 변수는 호이스팅되지만, “Temporal Dead Zone (TDZ)” 내에서는 접근할 수 없습니다.

Example:

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

Solution:
변수를 선언하고 초기화할 때 함께 하며, 코드 순서에 주의를 기울이세요.

8. 결론

이 기사에서 우리는 JavaScript 변수 선언의 let에 대해 철저히 설명했습니다. 기본 사용법, var 및 const와의 차이점, 실전 예제, 그리고 자주 묻는 질문에 대한 답변을 다루었습니다.

아래는 논의된 주요 포인트의 간결한 요약입니다.

8.1 let의 주요 특징

1. 블록 스코프를 가짐:

• let은 블록 ( {} ) 내에서만 유효합니다.
• 이는 의도하지 않은 변수 덮어쓰기를 방지합니다.

1. 재할당 허용:

• 값이 동적으로 변경되는 루프와 조건부 로직에 적합합니다.

1. 재선언 불가:

• 중복 선언을 방지하여 코드 안전성을 향상시킵니다.

1. 호이스팅 동작:

• 선언은 호이스팅되지만, 초기화 전에 변수에 접근하면 TDZ로 인해 오류가 발생합니다.

8.2 다른 선언 방법과의 비교

8.3 let이 가장 유용한 곳

let은 다음 시나리오에서 특히 효과적입니다.

• 조건문과 루프: 값이 동적으로 변경될 때 사용됩니다.

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  

• 함수 내부의 로컬 변수: 임시 값을 저장하는 데 이상적입니다.

  function calculateTotal(price) {
    let discount = 0.1;
    return price * (1 - discount);
  }
  

• 동적 상태 관리: 사용자 입력이나 애플리케이션 상태에 따라 값이 변경될 때 유용합니다.

  let userInput = prompt("Please enter your name:");
  console.log(`Hello, ${userInput}!`);
  

8.4 모범 사례와 주의사항

1. 선언 전에 변수에 접근하지 마세요: 호이스팅 관련 오류를 방지하기 위해 변수를 일찍 선언하세요.
2. 재할당이 필요할 때만 let을 사용하고, const를 우선하세요: 이는 코드 명확성과 안전성을 향상시킵니다.
3. 스코프 관리를 유의하세요: 의도하지 않은 접근이나 충돌을 피하기 위해 항상 변수 스코프를 고려하세요.

8.5 최종 요약

let은 현대 JavaScript 프로그래밍에서 변수 선언을 위한 유연하고 안전한 선택입니다.

• 레거시 코드에만 var을 사용하세요; 새 프로젝트에서는 let 또는 const를 선호하세요.
• 변경되는 값에는 let을, 고정된 값에는 const를 사용하여 가독성과 신뢰성을 향상시키세요.

8.6 다음 단계

배운 내용을 실제 코드로 실험해 보세요. 다음 주제들도 다음 학습 단계로 도움이 될 수 있습니다.

1. JavaScript 데이터 타입과 타입 변환 – 데이터 관리에 대한 이해를 심화하세요.
2. 함수와 스코프 심화 – 고급 스코프 제어와 함수 설계를 마스터하세요.
3. ES6 이후 기능 개요 – 현대 JavaScript 기능을 탐구하세요.