[JavaScript] Uncaught ReferenceError: fn is not defined at HTML Element onclick 원인 이유과 해결 방법

 

Uncaught ReferenceError: FuncName is not defined at HTML Element onclick


에러 메세지를 해석하자면 이렇다
"A 함수를 실행하라고 했는데 A 함수가 어딨는지 모르겠다."
간단히 말하자면 함수를 못 찾고 있다는 뜻이다.
함수를 찾지 못하는 이유는 여러 가지가 있을 수 있다.
에러가 나는 원인을 하나씩 알아보고 디버깅 방법을 알아보자.

 

1. 함수 이름에 오타가 있는 경우

아마 이 경우가 가장 흔하고 많을 것 같다.
개발자의 원수, 바로 오-탈자다.

예를 들어 내가 실행하라고 했던 함수는 ABC()인데
내가 만들어 놓은 함수는 ABc()인 경우다.

    > 함수 이름을 x() / z() 처럼 간단한 이름으로 바꿔보자.
    > 아니면 함수를 정의하는 곳과 부르는 곳에서 복붙을 해보자.
        직접 하나씩 치자면 실수가 나기 마련이다.

    <button onclick="z()">run</button>
    <script>
        function z() {
            alert('z');
        }
    </script>

 

2. 작은 따옴표 '' / 큰 따옴표 "" 짝이 안 맞는 경우

JavaScript에서는 문자열을 입력할 때 작은 따옴표나 큰 따옴표를 쓴다.

const apple = "red";

그런데 문자열 안에 작은 따옴표나 큰 따옴표 자체를 넣어야 하는 때도 있다.
이런 경우 특히 JavaScript에서는 작은 따옴표와 큰 따옴표를 섞어야 써야 한다.

const hi = "My name is 'Tom'";
const hello = 'Her name is "Joy"';

이렇게 이 둘을 섞어서 쓰다 보면 짝을 놓치기가 쉽다.
요즘에는 에디터가 잘 잡아주기는 하지만
완벽하게 잡아주는 것은 아니다.

따옴표 짝이 안 맞게 되면 script 내용 자체가 로드되질 않는다.
script 자체를 읽어오지 못한다.
Document Loaded (Ready) 이벤트에 alert를 걸어 보자.
alert가 실행되지 않는다면 script 전체가 로드 되지 않고 있는 상태다.

 

3. 중괄호 {} / 대괄호 [] 짝이 안 맞는 경우

script가 로드되 않는 경우는 하나 더 있다.
중괄호 대괄호 짝이 맞지 않는 경우다.
마찬가지로 Document Loaded (Ready) 이벤트로 아무 것도 실행되지 않는다.
script 내용 자체를 읽어오지 못했기 때문이다.
script 내용이 없으니 함수 이름을 잘 맞추어 놓았어도 실행이 되지 않는다.

JavaScript에서 객체를 표현할 때는 중괄호 {} 를 사용하고
배열을 표현할 때는 대괄호 [] 를 사용한다.

const obj = {apple: 'red', melon: 'green'};
const fruits = ['apple', 'melon'];

어디선가 중괄호와 대괄호 짝이 맞지 않는 곳이 있을 수 있다.
짝이 맞지 않으면 script 자체를 로드하게 되고, 함수도 찾을 수 없게 된다.
확인해 보자.

 

4. 리스트에서 요소와 요소 사이에 콤마 , 가 맞지 않는 경우

JavaScript에서 리스트를 정의할 때 요소와 요소 사이에는 콤마를 쓴다.

const O = ['apple', 'melon'];
const X = ['apple' 'melon'];
const X = ['apple',, 'melon'];

이 콤마가 중간에 더 있거나 없거나 하면 에러가 난다.
Unexpected token 에러로 알려주면 좋지만
에러 메세지가 아예 출력되지도 않고
script를 읽어오지 못하는 경우도 있다.

script 자체를 로드하지 못했으니 함수를 찾을 수 없다.
한번 확인해 보자.

 

5. 함수 정의 오류

JavaScript에서 함수를 정의할 때는 아래 두 방식을 쓸 수 있다.

// 1
function hello() {
    alert('hi');
}
// 2
const hello = function () {
    alert('hi');
}

직접 코드를 짤 때는 이런 실수를 잘 안 하지만,
구글 같은 데서 남의 코드를 복붙해 올 때는 (엣헴...)
이 둘을 섞어서 써 버리는 경우도 있다.
(다른 사람들은 모르겠지만 일단 나는 종종 그렇다.)

const function = hello() {
    alert('hi');
}

이렇게 정의해 버리면 함수 이름을 아무리 잘 맞추어 놓았어도
함수를 찾지 못하는 게 당연하다.
다시 한 번 확인해 보자.

 

-220712