이런, 또 해냈습니다: JavaScript의 일반적인 오류 디버깅

많은 개발자들이 잘 알고 있듯이 JavaScript 코드를 작성하는 것은 어려울 수 있으며 때로는 완전히 겁이 날 수 있습니다. 업무를 진행하다 보면 필연적으로 오류가 발생하고, 그 중 일부는 자주 반복되기도 합니다. 초보 개발자를 대상으로 작성된 이 기사에서는 이러한 오류와 해결 방법에 대해 설명합니다. 명확성을 위해 함수, 속성, 객체의 이름은 다음에서 따왔습니다. 인기있는 노래. 이 모든 것은 일반적인 실수를 수정하는 방법을 빠르게 기억하는 데 도움이 됩니다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 실기 코스 "모바일 개발자 PRO".

TypeError: 속성이 정의되지 않았습니다.

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

위의 예제 코드에서는 Uncaught TypeError: Cannot read property 'lucky' of undefed 오류가 발생합니다. 문제는 girl 개체에 name 속성이 있지만 명명된 속성이 없다는 것입니다. 그리고 girl.named 속성은 정의되어 있지 않으므로 공식적으로 존재하지 않으므로 액세스할 수 없습니다. 그러나 girl.named.lucky를 girl.name으로 바꾸면 모든 것이 작동하고 프로그램은 Lucky를 반환합니다.

속성에 대해 자세히 알아볼 수 있습니다. 여기를 읽으십시오..

TypeError를 해결하는 방법

TypeError는 프로그래머가 특정 유형과 일치하지 않는 데이터에 대해 작업을 수행하려고 할 때 발생합니다. 예를 들어 .bold() 사용, 정의되지 않은 속성 요청, 실제로 함수가 아닌 함수 호출 등이 있습니다.

따라서 girl()을 호출하려고 하면 Uncaught TypeError: yourVariable.bold는 함수가 아니며 girl은 함수가 아닙니다. 실제로 함수가 아니라 호출되는 객체이기 때문에 오류가 발생합니다.

오류를 제거하려면 변수를 연구해야 합니다. 그럼 여자란 무엇인가? girl.name이 뭐죠? 코드를 분석하거나, console.log, 디버거 명령을 사용하여 변수를 표시하거나, 콘솔에서 변수 이름을 호출하여 확인할 수 있습니다. 변수에 포함된 데이터 유형에 대해 연산이 가능한지 확인해야 합니다. 맞지 않으면 조건을 추가하거나 try..catch 블록을 추가하는 등 변경하고 작업 실행을 제어할 수 있습니다.

스택 오버플로

Baby One More Time(Britney Spears입니다)이라는 노래의 가사 작성자를 믿는다면, 이 문맥에서 hit라는 단어는 가수가 다시 부름을 받고자 하는 욕구를 의미합니다. 노래 - 번역가의 메모). 이러한 욕구가 실제 생활에서의 통화 횟수 증가로 이어질 수도 있습니다. 하지만 프로그래밍에서 이는 호출 스택이 오버플로되면 오류를 일으킬 수 있는 재귀입니다.

오류는 다음과 같습니다.

오류: 스택 공간 부족(Edge)
내부 오류: 재귀가 너무 많습니다(Firefox)
RangeError: 최대 호출 스택 크기가 초과되었습니다(Chrome).

개발자가 재귀에서 기본 사례를 고려하지 않거나 코드가 의도한 사례를 처리하지 않는 경우 스택 오버플로가 발생합니다.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

이 경우 stillBelieve는 false가 될 수 없으므로 매번 oneMoreTime이 호출되지만 함수는 완료되지 않습니다.

두 명의 친구에게 의지하기 시작하면 외로움이 줄어들고 전화를 기다릴 필요가 없습니다.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

시스템이 오류 메시지를 생성하지 않지만 JavaScript 코드가 실행되는 페이지가 단순히 정지되는 무한 루프가 있는 경우를 예로 들 수 있습니다. 이는 while 루프에 종료 조건이 없을 때 발생합니다.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

다음과 같이 문제를 해결할 수 있습니다.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

무한 루프 및 재귀 디버깅

무한 루프 문제가 발생하는 경우 Chrome이나 Edge에서는 탭을 닫고 Firefox에서는 브라우저 창을 닫아야 합니다. 그런 다음 코드를 주의 깊게 분석해야 합니다. 문제를 찾을 수 없다면 루프나 함수에 디버거 명령을 추가하고 변수 값을 확인하는 것이 좋습니다. 결과가 예상한 결과와 일치하지 않으면 이를 교체합니다. 이 작업은 쉽게 수행할 수 있습니다.

위의 예에서는 함수나 루프의 첫 번째 줄에 디버거를 추가해야 합니다. 그런 다음 Chrome에서 디버그 탭을 열고 범위 내 변수를 분석해야 합니다. 다음 버튼을 사용하면 각 반복마다 변경 사항을 추적할 수 있습니다. 이 모든 작업은 쉽게 수행할 수 있으며 대부분의 경우 문제가 발견됩니다.

이 모든 것에 대한 자세한 내용은 여기에서 읽을 수 있습니다(크롬용) 그리고 여기 (파이어폭스용).

구문 오류

JavaScript에서 가장 일반적인 오류 중 하나는 SyntaxError입니다. 텍스트 편집기 확장을 사용하면 이를 방지하는 데 도움이 됩니다. 예를 들어 Bracket pair Colorizer는 코드의 괄호를 다양한 색상으로 표시하고 Prettier 또는 유사한 분석 도구를 사용하면 오류를 빠르게 찾을 수 있습니다. SyntaxError의 가능성을 줄이는 가장 좋은 옵션은 최소한의 중첩입니다.

댓글로 공유해주세요: 실수를 방지하거나 신속하게 감지하고 제거하기 위해 무엇을 하시나요?

Skillbox는 다음을 권장합니다.

• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".
• 온라인 코스 "0의 C# 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com