const /let

JavaScript 변수 선언 방식 정리

변수 선언 키워드

let

• 용도:변할 수 있는 값을 선언할 때 사용
• 블록 내부에서만 유용
• 특징: 재할당 가능, 재선언 불가능
• 예시: let count = 1; count = 2; (유효)

const

• 용도: 변경되지 않는 상수나 재할당이 필요 없는 변수에 사용 (변하지 않는 값을 선언할 때 사용)
• 블록 내부에서만 유용
• 특징: 재할당 불가능, 재선언 불가능
• 참조 타입: 객체나 배열의 내부 값은 변경 가능하지만 참조 자체는 변경 불가
• 예시: const PI = 3.14; (재할당 시 오류)

var (레거시)

• 용도: ES6 이전의 변수 선언 방식
• 특징: 재할당 가능, 재선언 가능, 함수 스코프
• 단점: 블록 스코프를 무시하여 예상치 못한 동작 발생 가능

 

 

예시 1 ) 유효성 검사에서의 let / const

 let response = await api(
              data,
              isLoggedIn
            );

            let retryCount = 0;
            const maxRetries = 10;

            // //에러시 실행
            while (
              retryCount < maxRetries &&
              (!response.response ||
                !response.response.hasOwnProperty("answer") ||
                !response.response.answersssss)
            ) {
              response = await api(
                data,
                isLoggedIn
              );
              retryCount++;
            }

            if (retryCount >= maxRetries) {
              setShowErrorPopup(true);
              return;
            }

• let으로 작성해야 유효성 검사를 할 수 있음
• const로 작성시 const는 변하지 x

 

예시2 ) 

// ... existing code ...
let response = await InterviewXPersonaInterviewModeratorRequest(data, isLoggedIn);

let questionList = response.response; //응답 반환하는 부분 (질문 받아옴)
let retryCount = 0;
const maxRetries = 10;

while (
  retryCount < maxRetries &&
  (!response || !response.response || response.response.length !== 5)
) {
  // 페르소나 인터뷰 생성 API 수정 예정
  response = await InterviewXPersonaInterviewModeratorRequest(data, isLoggedIn);
  retryCount++;
  questionList = response.response;
}
// ... existing code ...

 

- > response 변수는 let으로 선언되었는데, 이는 while 루프 내에서 값을 재할당해야 하기 때문.

- const로 선언된 변수는 재할당이 불가능하므로, API 호출을 반복하면서 응답을 업데이트해야 하는 이 상황에서는 let 키워드가 적합

- 마찬가지로 questionList와 retryCount도 값이 변경되어야 하므로 let으로 선언

- 특히 retryCount는 루프가 반복될 때마다 증가해야 하고, questionList는 새로운 응답에 따라 업데이트되어야 함

반면 maxRetries는 상수 값으로 루프 내에서 변경되지 않기 때문에 const로 선언

 

스코프와 호이스팅

블록 스코프 (Block Scope)

• 정의: 중괄호 {} 내에서만 변수가 유효한 범위
• JavaScript에서 블록은 if문, for문, while문, 함수 등의 중괄호로 둘러싸인 코드 영역
• 적용: let과 const는 블록 스코프를 따름
• 예시:

{
  const x = 10; // 블록 내에서만 접근 가능
  let y = 20;   // 블록 내에서만 접근 가능
  var z = 30;
}
// x와 y는 여기서 접근 불가

// console.log(x); // 오류: x는 정의되지 않음
// console.log(y); // 오류: y는 정의되지 않음
console.log(z);    // 30 (var는 블록 스코프를 무시)

 

 

호이스팅 (Hoisting)

• 정의: 변수와 함수 선언이 코드 실행 전 스코프 최상단으로 끌어올려지는 현상
• var 호이스팅: 선언과 동시에 undefined로 초기화됨

console.log(a); // undefined (오류 없음)
var a = 5;
console.log(a) // 5

 

• let/const 호이스팅: 선언은 호이스팅되지만 초기화는 원래 위치에서 이루어짐

// console.log(b); // ReferenceError
let b = 5;

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

권장 사항

• 기본적으로 const를 사용하여 변수를 선언
• 값이 변경되어야 하는 경우에만 let 사용
• var 사용은 지양 (예상치 못한 동작 방지)

 

 

 

[Javascript] var, let, const 차이와 사용법

[Javascript] var, let, const 차이와 사용법