Blog

도입

JavaScript 개발 중 가장 흔히 마주치는 에러 중 하나가 ‘ReferenceError: variable is not defined’ 입니다. 이 에러는 선언되지 않은 변수를 참조하려 할 때 발생하며, 초보자부터 숙련자까지 누구나 경험하는 문제입니다. 올바른 해결법을 알면 쉽게 해결할 수 있습니다.

에러 설명

ReferenceError는 JavaScript 엔진이 코드에서 참조하려는 변수나 함수를 찾을 수 없을 때 발생하는 런타임 에러입니다. 이 에러는 변수가 선언되지 않았거나, 스코프 밖에서 접근하려 할 때, 또는 호이스팅 문제로 인해 발생합니다. 브라우저 콘솔이나 Node.js 환경에서 즉시 확인할 수 있어 디버깅이 비교적 쉬운 편입니다.

주요 원인 3가지

1. 변수 선언 누락

가장 일반적인 원인으로, 변수를 선언하지 않고 사용하는 경우입니다. var, let, const 키워드 없이 변수를 사용하면 발생합니다.

2. 스코프 문제

변수가 다른 스코프에서 선언되어 현재 위치에서 접근할 수 없는 경우입니다. 함수 스코프, 블록 스코프의 차이를 이해하지 못할 때 발생합니다.

3. 호이스팅 관련 문제

let과 const는 Temporal Dead Zone으로 인해 선언 전에 접근하면 ReferenceError가 발생합니다. var와 달리 초기화되지 않은 상태로 호이스팅되기 때문입니다.

해결법 5가지

1. 변수 선언 확인

변수를 사용하기 전에 반드시 선언했는지 확인합니다.

// 잘못된 예
console.log(myVariable); // ReferenceError

// 올바른 예
let myVariable = 'Hello';
console.log(myVariable); // 'Hello'

2. 스코프 범위 조정

변수를 적절한 스코프에서 선언하거나 전역 스코프로 이동시킵니다.

// 잘못된 예
function test() {
  let localVar = 'local';
}
console.log(localVar); // ReferenceError

// 올바른 예
let globalVar = 'global';
function test() {
  console.log(globalVar); // 'global'
}

3. 조건부 접근 사용

변수가 정의되었는지 확인 후 사용합니다.

if (typeof myVariable !== 'undefined') {
  console.log(myVariable);
} else {
  console.log('변수가 정의되지 않음');
}

4. try-catch 문 활용

에러를 잡아서 적절히 처리합니다.

try {
  console.log(undefinedVariable);
} catch (error) {
  console.log('에러 발생:', error.message);
}

5. 선언 순서 조정

변수를 사용하기 전에 선언하도록 코드 순서를 조정합니다.

// 잘못된 예
console.log(myVar); // ReferenceError
let myVar = 'value';

// 올바른 예
let myVar = 'value';
console.log(myVar); // 'value'

예방법

ESLint나 TypeScript 같은 정적 분석 도구를 사용하여 선언되지 않은 변수 사용을 미리 감지할 수 있습니다. ‘use strict’ 모드를 활용하면 암묵적 전역 변수 생성을 방지할 수 있습니다. 코드 리뷰 시 변수 선언과 스코프를 특별히 확인하고, 일관된 네이밍 컨벤션을 따르는 것이 중요합니다.