JavaScript의 유형 오류 대 참조 오류

다음은 JavaScript로 작업할 때 브라우저 콘솔에 항상 표시되는 두 가지 오류입니다.

다양한 JavaScript 오류가 있으며 Mozilla 문서 here. 에서 찾을 수 있습니다.

이 게시물에서는 TypeError와 ReferenceError의 차이점에 대해 구체적으로 알아보고 싶었습니다.


둘 다에 대한 간단한 예는 여기에서 볼 수 있습니다.



정말 무슨 일이 일어나고 있는지 보자...

참조 오류

변수를 만들 때 하는 일은 값이 있는 참조를 만드는 것뿐입니다.var a = "I'm a string" 는 변수 a 를 볼 때마다 값이 "I'm a string" 인 문자열을 보고 있음을 JS 컴파일러에 알립니다.

해당 변수 선언이 없으면 JS는 참조가 없기 때문에a 이를 발견했을 때 무엇을 해야 할지 알지 못하므로 오류가 발생합니다.

var a = "I'm a string";

console.log(a) // I'm a string
console.log(b) // Uncaught ReferenceError: b is not defined.

위의 예에서 JS는 a 를 발견했을 때 해야 할 일을 알고 있습니다. 그것은 b를 만났을 때 무엇을 해야할지 조금도 모르기 때문에 티시 핏과 ReferenceError를 던집니다.

유형 오류

A TypeError 는 ReferenceError 에서 그리 멀지 않습니다. JS 컴파일러는 변수를 사용하려고 시도하는 것이 의도된 방식이 아니라고 알려줍니다.

다음은 한 가지 예입니다.

var a = "I am a string";

console.log(a) // I am a string

console.log(a()) // Uncaught TypeError: a is not a function

오류 메시지는 깔끔하며 이 매우 간단한 예에서 무엇이 잘못되었는지 정확히 알려줍니다. 함수인 것처럼 a를 호출하려고 하지만 아직 낮은 문자열입니다.

당신이 찾고 있는 것은:

var a = function(){
    return "I am a string"
}

console.log(a()) // I am a string

정의되지 않은 속성을 읽을 수 없습니다.

이것은 일반적인 TypeError 제가 볼 때 매우 예방할 수 있기 때문에 해결하고 싶었습니다. 비동기 가져오기에 대한 null 검사가 누락된 경우를 자주 볼 수 있습니다. API를 호출하고 response.data.someProperty.anotherProperty 와 같은 것을 기대하고 response , response.data 및 response.data.someProperty 가 진실인지 확인하기 전에 response.data.someProperty.anotherProperty 에 액세스하려고 합니다.

다음은 잘못된 예입니다.

    function async doSomethingAsync(url){
        let response = await goFetchSomeData(url);
        let dataToLogToConsole = response.data.someProperty.anotherProperty;
        console.log(dataToLogToConsole);
    }
    // Uncaught TypeError: cannot read property 'someProperty' of `undefined`.

위의 예에서는 someProperty 속성에서 response.data에 액세스하려고 시도하지만 undefined 유형인 것 같습니다.

우리가 해야 할 일은 중첩된 속성에 액세스하기 전에 모든 상위 속성이 존재하고 진실한지 확인하는 것입니다.

위의 예에서는 TypeError 유형의 속성에서 데이터에 액세스하려고 하기 때문에 undefined가 발생합니다. JS 컴파일러는 이전 예제에서 문자열을 호출하려고 시도하는 것과 동일한 작업을 시도하는 것으로 보고 코드에서 의도한 대로 response.data 또는 a 유형을 사용하지 않습니다.

다음은 더 정확한 예입니다.

    function async doSomethingAsync(url){
        let response = await goFetchSomeData(url);

        if(response && response.data && response.data.someProperty){
            let dataToLogToConsole = response.data.someProperty.anotherProperty;
            console.log(dataToLogToConsole);
        }else{
            console.error('The data was not available');
        }
    }

이 예제는 중첩된 데이터를 기록하거나 오류를 콘솔에 기록합니다. 유형 오류가 발생하지 않습니다.

Tldr;

JS 오류는 경고하는 빨간색 문자로 콘솔에 표시될 때 위협적입니다. 종종 나는 이러한 오류를 얼마나 자주 보더라도 조금 놀라고 심장 박동수가 상승합니다.

실제로 오류가 말하는 내용을 확인한 다음 내 코드를 디버깅할 때 JS 오류는 도움이 되고 겁을 주지는 않습니다. 물론 때때로 실망스러울 수 있습니다.

즉, aReferenceError는 사용 중인 변수에 참조가 없음을 의미합니다. ATypeError는 변수 유형을 올바르게 사용하고 있지 않다고 알려줍니다. 당신이 그것에 대해 생각하면 그것은 매우 간단합니다.