웹사이트 검색

JavaScript에서 'ReferenceError', 'SyntaxError' 및 'TypeError' 문제를 해결하는 방법

소개

JavaScript는 프론트엔드 및 백엔드 개발에 사용되는 프로그래밍 언어입니다. JavaScript로 작업할 때 오류 메시지를 해독하는 것이 다소 어렵게 느껴질 수 있습니다. 응용 프로그램 내에서 문제를 해결할 때 오류 메시지가 의미하는 바를 이해하는 것이 중요합니다. 다행스럽게도 최신 브라우저에는 이를 지원하는 디버깅 도구가 내장되어 있습니다. 각 브라우저는 시각적 표현과 관련하여 오류 메시지를 다르게 처리합니다. 그럼에도 불구하고 오류 메시지는 JavaScript 코드에서 무슨 일이 일어나고 있는지 알려줍니다.

이 자습서에서는 브라우저 환경에 나타나는 세 가지 일반적인 JavaScript 오류 유형인 ReferenceError, SyntaxError 및 TypeError에 대해 알아봅니다. 따라 하려면 JavaScript와 개발자 콘솔에 대해 이해하고 있어야 합니다.

JavaScript 개발자 콘솔 사용 방법 자습서에서 JavaScript에 대해 자세히 알아볼 수 있습니다.

다음 예는 완전하지 않으며 발생할 수 있는 일반적인 오류 메시지에 대한 입문서 역할을 합니다. 또한 예제의 오류 메시지는 Chrome 웹 브라우저에서 온 것입니다. Firefox 또는 Edge에서 받은 오류 메시지에는 약간 다른 메시지가 포함될 수 있지만 오류 유형은 동일합니다.

JavaScript 오류 유형 이해

JavaScript의 오류는 Error 개체를 기반으로 합니다. 발생한 오류 유형에 대한 정보로 채워진 기본 제공 개체이며 가능한 원인을 자세히 설명하는 메시지가 뒤따릅니다. 예를 들어 다음과 같은 오류가 발생할 수 있습니다.

VM170:1 Uncaught ReferenceError: shark is not defined
    at <anonymous>:1:1

이 오류 메시지를 분해하면 ReferenceError가 식별된 오류 유형임을 알 수 있습니다. 세미콜론 다음에는 오류를 설명하는 오류 메시지가 있습니다. shark is not defined. 이 메시지의 마지막 줄은 코드 1:1에서 오류가 발생한 위치를 자세히 설명합니다.

브라우저에서 오류가 발견될 때마다 오류 유형과 메시지가 문제를 나타냅니다. 이 정보를 사용하여 받은 오류 유형 및 메시지에 따라 코드를 디버그하는 방법을 결정할 수 있습니다.

ReferenceError 이해하기

아직 만들지 않은 변수에 액세스하려고 하면 ReferenceError가 발생합니다. 변수를 초기화하기 전에 호출할 때도 발생합니다.

정의되지 않은 변수와의 만남

예를 들어 console.log()를 실행하는 동안 변수 이름의 철자를 잘못 입력하면 ReferenceError가 발생합니다.

let sammy = 'A Shark dreaming of the cloud.';

console.log(sammmy);

Output
Uncaught ReferenceError: sammmy is not defined
    at <anonymous>:1:13

3개의 ms가 있는 변수 sammmy는 존재하지 않으며 정의되지 않습니다. 이 오류를 수정하려면 변수를 올바른 철자로 업데이트하고 명령을 다시 실행할 수 있습니다. 성공하면 오류 메시지가 표시되지 않습니다. 전반적으로 맞춤법 오류가 있는지 코드를 검토하면 정의되지 않은 변수 오류를 방지하는 데 도움이 될 수 있습니다.

변수가 선언되기 전에 접근하기

마찬가지로 코드에서 변수가 선언되기 전에 변수에 액세스하려고 하면 다음 오류가 발생할 수 있습니다.

function sharkName() {
    console.log(shark);

    let shark = 'sammy';
}

Output
VM223:2 Uncaught ReferenceError: Cannot access 'shark' before initialization
    at sharkName (<anonymous>:2:17)
    at <anonymous>:1:1

이 예에서 console.log(shark)는 shark 변수가 선언되기 전에 실행되어 오류가 발생합니다. 일반적으로 변수에 액세스하기 전에 먼저 변수를 선언하는 것이 좋습니다.

참고: let 및 const 선언이 작동하는 방식 때문에 선언이 호이스팅되지만 이전 예제에서는 현재 액세스할 수 없습니다. 이와 같은 경우 let 및 const 변수는 '임시 데드 존'이라고 하는 곳에 들어갑니다. 이를 방지하려면 범위 시작 부분에 let 및 const 변수를 선언하십시오.

예제 코드를 수정하려면 console.log() 명령을 실행하기 전에 shark 변수를 선언하십시오.

function sharkName() {
    let shark = 'sammy';

    console.log(shark);
}

ReferenceError는 종종 변수 및 범위에 연결됩니다. 이 튜토리얼의 범위를 벗어나지만 JavaScript 튜토리얼에서 변수, 범위 및 호이스팅 이해에서 범위, 다양한 변수 유형 및 호이스팅에 대해 자세히 알아볼 수 있습니다.

SyntaxError 이해하기

JavaScript 인터프리터가 코드를 샅샅이 조사할 때 언어 사양을 따르지 않는 코드를 발견하면 SyntaxError가 발생할 수 있습니다. 이 경우 코드 실행이 중지되고 구문에 대한 메시지가 표시됩니다.

누락된 코드 인클로저

예를 들어, 함수를 작성할 때 코드를 묶기 위해 괄호 )를 잊어버린 경우 무엇을 했는지에 대한 매우 구체적인 메시지와 함께 SyntaxError를 받게 됩니다. 누락:

function sammy(animal) {
    if(animal == 'shark'){
        return `I'm cool`;
    } else {
        return `You're cool`;
    }
}

sammy('shark';

Output
Uncaught SyntaxError: missing ) after argument list

다행히 오류 메시지는 코드에서 누락된 요소를 지정합니다. 이 예에서 sammy 함수 호출에는 닫는 ) 괄호가 없습니다.

. . .

sammy('shark');

함수 끝에서 끝 중괄호 }를 생략하거나 배열에서 대괄호 ]를 생략해도 이 오류가 발생합니다. 함수, 배열 및 객체를 적절하게 닫고 있는지 확인하십시오.

동일한 변수 이름 선언

함수 매개 변수와 함수 본문 내에서 동일한 변수 이름을 사용할 때도 이 오류가 발생할 수 있습니다. 다음 예를 들어 보십시오.

function sammy(animal) {
    let animal = 'shark';
}

Output
VM132:2 Uncaught SyntaxError: Identifier 'animal' has already been declared

오류를 수정하려면 함수 본문 내에서 고유하고 구체적인 변수 이름을 만들어야 합니다. 예를 들어 animalType과 같은 새 변수 이름을 선언하면 본문 내에서 함수 매개변수와 let 변수 간의 충돌을 제거할 수 있습니다.

function sammy(animal) {
    let animalType = 'shark';
}

함수 본문 내에서 매개 변수를 변경하거나 사용하려는 경우 동일한 변수 이름으로 변수 선언을 사용하지 마십시오. 예를 들어 본문 내에서 let 선언을 제거할 수 있습니다.

function sammy(animal) {
    animal = 'shark';
}

함수 본문 내부 및 외부에서 변수로 작업할 때 이름을 고유하게 지정해야 합니다. 함수 매개 변수에 액세스할 때 let과 같은 변수 선언 없이 함수 본문 내에서 사용할 수 있습니다.

예상치 못한 토큰 식별

대괄호 ] 또는 중괄호 }가 누락된 것과 마찬가지로 때때로 코드에 작지만 중요한 추가가 필요할 수 있습니다. 예를 들어:

let sharkCount = 0;

function sammy() {
    sharkCount+;
    console.log(sharkCount);
}

Output
Uncaught SyntaxError: Unexpected token ';'

이 예제의 추가 요소는 함수 본문 내 sharkCount 뒤에 있는 + 더하기 기호입니다.

. . .
function sammy() {
    sharkCount++;
    console.log(sharkCount);
}

SyntaxError: 예기치 않은 토큰이 발생하면 더하기 기호(+)와 같은 추가 연산자나 누락된 연산자가 있는지 코드를 다시 확인하세요.

TypeError 이해하기

TypeError는 함수 또는 변수의 값이 예상치 못한 유형일 때 발생합니다. JavaScript 자습서의 데이터 유형 이해를 검토하여 다양한 JavaScript 데이터 유형에 대해 자세히 알아볼 수 있습니다.

객체에 배열 메서드 사용

일반적인 실수는 배열 메서드를 사용하여 개체를 반복하는 것입니다. 예를 들어 .map() 메서드는 배열에 고유한 메서드이기 때문에 개체를 루프 오버할 수 없습니다.

const sharks = {
    shark1: 'sammy',
    shark2: 'shelly',
    shark3: 'sheldon'
}

sharks.map((shark) => `Hello there ${shark}!`);

Output
Uncaught TypeError: sharks.map is not a function
    at <anonymous>:1:8

이전 예제를 수정하는 한 가지 옵션은 sharks 객체에서 객체 데이터 유형에 대해 작동하는 for...in 루프를 사용하여 값을 검색하는 것입니다.

const sharks = {
    shark1: 'sammy',
    shark2: 'shelly',
    shark3: 'sheldon'
}

for (let key in sharks) {
    console.log(`Hello there ${sharks[key]}!`);
}

또는 sharks 객체를 배열로 전환하여 .map() 메서드를 사용할 수 있습니다.

const sharks = ['sammy', 'shelly', 'sheldon'];

sharks.map((shark) => `Hello there ${shark}!`);

다른 배열과 개체를 작업할 때 다른 메서드를 잘못 사용하기 쉽습니다. 방법이 작업 중인 데이터 유형에 적합한 방법인지 다시 확인하십시오.

올바른 구조 분해 방법 사용

마찬가지로, 배열 해체를 사용하여 객체를 반복하려고 하면 TypeError가 발생합니다.

const shark = {
    name: 'sammy',
    age: 12,
    cloudPlatform: 'DigitalOcean'
}

const [name, age, cloudPlatform] = sharks;

Output
VM23:7 Uncaught TypeError: sharks is not iterable
    at <anonymous>:7:26

이 문제를 해결하는 한 가지 방법은 객체 구조 분해를 사용하여 객체 키를 기반으로 새 변수를 만드는 것입니다.

const shark = {
    name: 'sammy',
    age: 12,
    cloudPlatform: 'DigitalOcean'
}

const {name, age, cloudPlatform} = shark;

console.log(name);

Output
sammy

데이터를 구조화하는 방법에 따라 배열 또는 객체를 사용하는지 여부에 따라 적절한 메서드를 사용하여 값을 검색해야 합니다.

결론

이 자습서에서는 세 가지 일반적인 JavaScript 오류 유형, 일부 관련 메시지 및 일반적인 문제가 발생할 때 디버깅하는 방법에 대해 배웠습니다. 철저하지는 않지만 JavaScript와 브라우저가 함께 작동하여 코드의 문제를 나타내는 방법에 대한 통찰력을 얻었습니다.

이러한 방법을 적용하는 방법을 더 잘 이해하기 위해 JavaScript 배열 방법을 사용하는 방법에 대해 자세히 알아볼 수 있습니다.

또한 Google Chrome DevTools 및 Visual Studio Code 자습서로 JavaScript를 디버그하는 방법에서 Chrome Dev 도구로 디버깅하는 방법에 대해 자세히 알아볼 수 있습니다.