[JavaScript] Uncaught ReferenceError: Cannot access 'X' before initialization

 

오류 발생 경로

// 입력값 받기
let value = prompt('답을 맞춰보세요!');
if(value === '' || value === null) alert('입력된 값이 없습니다.');
else numberBaseball(value);

// 입력값 콘솔에 찍기
const numberBaseball = value => {
  console.log(value)
};

 

위와 같이 코드를 작성한 후 prompt에 값을 입력했을 때, numberBaseball 함수에서 value값이 콘솔에 찍히지 않고 아래와 같은 오류가 발생했다.

 

 

 

---

오류 내역

Uncaught ReferenceError: Cannot access 'numberBaseball' before initialization

 

 

 

---

오류 원인

• let 또는 const로 선언된 변수가 초기화되기 전에 액세스 되었기 때문이다.
• 즉, 사용자에게 prompt로 값을 입력받기 전에 numberBaseball 함수가 먼저 실행되어 버렸기 때문에 위에서 선언된 value 변수 자체가 만들어지지 않은 채 console.log가 실행된 것이다.

 

 

 

위와 동일한 에러는 다음과 같은 예시에서도 발생한다.

// num 변수가 생성되기도 전에 console.log가 num값을 찍으려고 하고 있다.
// ❌ ReferenceError: Cannot access 'num' before initialization
console.log(num);
let num = 2;

 

 

 

---

해결 방법

나의 의도는 사용자가 입력한 값을 value에 넣고, 그 값이 유효한 값인지(빈 값이나 null이 아닌지) 판단 후 numberBaseball 함수를 실행시키는 것이었으므로, prompt를 받는 부분부터 value값을 넘겨주는 부분이 numberBaseball 함수보다 '제일 먼저' 실행되어야 하므로 window.onload나 DOMContentLoaded로 감싸준다. (참고 자료에 var를 사용하면 된다는 글도 있었으나, var 사용은 지양하고 있으므로 해결 방법으로 기술하지 않는다.)

 

 

 

window.addEventListener('DOMContentLoaded', () => {
  // 입력값 받기
  let value = prompt('컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요!');
  if(value === '' || value === null) alert('입력된 값이 없습니다.\n새로고침을 눌러 다시 답을 입력해주세요!');
  else numberBaseball(value);
})

const numberBaseball = value => {
  console.log(value)
};

 

 

DOMContentLoaded

브라우저가 초기 HTML을 완전히 읽고 DOM 트리를 완성하는 즉시 발생한다.

 

 

 

---

[참고 자료]

https://plainenglish.io/blog/javascript-cannot-access-before-initialization

How to Fix the “Cannot access before initialization” Reference Error in JavaScript

https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event

DOMContentLoaded - Web API | MDN