Uncaught ReferenceError: Cannot access 'onClick' before initialization

자바스크립트로 eventListner 코드를 작성시 아래와 같은 에러가 발생했다.

 document.querySelector('button').addEventListener('click', onClick);
       
const onClick = () => {
	console.log('버튼 클릭');
	//return undefined; // 가 숨겨져 있는 거랑 같음
}

Uncaught ReferenceError: Cannot access 'onClick' before initialization

초기화 전에 'onClick'에 액세스할 수 없습니다.라고 해석된다.
왜 이런 현상이 발생할까?

원인

이는 const로 선언된 onClick() 함수의 호이스팅 현상에 의해 선언부가 스코프의 맨 위로 끌어올려졌지만 할당값은 호이스팅 되지 않았기 때문에 발생한다.
const onClick = ...의 변수가 메모리에 할당되지만, 초기화되지 않아서 사용할 수 없는 상태가 되어 (=TDZ에 들어간 상태) addEventListener에서 함수를 호출시 에러가 발생한다.

그렇다면 호이스팅과 TDZ란 무엇인지 짚고 넘어가보자.
아래는 이전에 TDZ에 대해 포스팅한 글이다.

TDZ란?

변수가 선언된 위치부터 초기화 될때까지의 영역을 말한다. const, let으로 선언된 변수들은 TDZ의 영향을 받는다. 변수가 선언되었지만 아직 초기화 되지 않은 상태에서 해당 변수에 접근하게 되면 TDZ에러가 발생한다.

해결방안

onClick 함수를 먼저 선언 후 addEventListener에서 사용해야 한다.
이렇게 수정하게 되면 함수 선언부가 먼저 호이스팅 되고 초기화 됨으로써 TDZ에러가 발생하지 않고, addEventListener에서 onClick 함수를 올바르게 찾아 사용할 수 있게 된다.

const onClick = () => {
    console.log('버튼 클릭');
}

document.querySelector('button').addEventListener('click', onClick);