JavaScript 오류에 대한 최종 가이드

JavaScript 오류에 대한 최종 가이드
오류 알림이 화면에 나타날 때, 그 알림이 전달하는 정보를 완전히 이해하시겠습니까?대부분의 입문급 개발자들은 복제 접착 방법에 익숙해져서 오류의 빠른 해결 방안을 찾으려고 하지만, 던지는 다양한 유형의 오류와 던지는 원인을 이해하면 더욱 좋은 개발자와 소프트웨어 엔지니어가 될 수 있다.그리고 우리는 복구가 필요한 것이 무엇인지, 디버깅이 필요한 것이 무엇인지 근본적으로 이해할 수 있다.
JavaScriptMDNWeb 문서에 따르면 6가지 종류의 JavaScript 오류가 있는데 경고까지 포함하면 7가지가 있습니다.본고에서 우리는 이 모든 문제들을 깊이 있게 연구하고 예시를 포함하며 경고와 오류 간의 차이를 해석할 것이다.

오류: 속성 "x"에 대한 액세스 권한이 거부되었습니다.
코드가 접근할 수 없는 대상에 접근하려고 시도할 때 이 오류가 발생합니다.

내부 오류: 너무 많이 귀속
함수를 너무 많이 호출하거나 귀속 함수가 기본이 부족할 때 이 오류를 발생시킵니다.일부 프로그래밍 언어는 실행할 수 있는 함수 호출 수량에 제한이 있기 때문에, 만약 함수에 기본적인 상황이 있다면, 이미 이 제한을 초과했을 가능성이 높다.

사정거리 오차
만약 어떤 값이 허용된 값의 집합이나 범위 내에 있지 않으면,range 오류가 발생할 수 있습니다.이 값을 포함하는 범위를 허용하지 않는 함수에 값을 매개 변수로 전달하려고 할 때, 보통 이 매개 변수를 던집니다.
다음은 그룹을 처리할 때 범위 오류가 발생한 예입니다.

let a = [];
a.length = a.length - 1;
// Uncaught RangeError: Invalid array length

참조 오류
JavaScript에서는 코드가 존재하지 않는 변수를 참조하려고 하면 참조 오류가 발생합니다.JavaScriptWeb 문서에 따라 코드에서 6가지 유형의 참조 오류가 발생할 수 있으며 각 유형마다 다릅니다.본고는 개발자가 가장 흔히 볼 수 있는 다섯 가지 참고 오류 예시를 중점적으로 소개한다.

정의되지 않은 변수
인용하기 전에 변수를 정의하는 것을 잊어버리는 것은 흔히 볼 수 있는 오류입니다. 이것은 새로운 개발자의 인용 오류를 촉발합니다.인용된 변수가 주석을 달면 이런 경우도 발생한다.

let firstName = "John"
let age = 23

console.log(lastName)
// Uncaught ReferenceError: lastName is not defined

let firstName = "John"
let lastName = "Smith"
let age = 23

console.log(lastName)
// returns Smith

범위
함수scope 내부에 정의된 변수는 함수 외부에 접근할 수 없습니다.우리는 범위를 한 나라를 관리하는 법률, 예를 들어 미국으로 볼 수 있다.샌프란시스코의 현지 법률은 마이애미에 적용되지 않는다.마이애미에 거주하는 마이애미 주민은 반드시 마이애미 법률을 준수해야 한다.
다음 함수에서, 우리는 문법 범위 밖의 값에 접근하려고 한다.

function nums() { 
    numA = 1
    numB = 2


    return numA + numB
  }


  console.log(numA); 

//   Uncaught ReferenceError: numA is not defined

우리는 전체 범위 내에서 변수를 정의함으로써 이 문제를 해결할 수 있다.

numA = 1
numB = 2

function nums() { 
  return numA + numB
}

console.log(nums()); 

// returns 3

엄격한 패턴
엄격 모드에서는 일반적인 기본 [경솔 모드] JavaScript 코드와 다른 의미 집합을 일부러 사용합니다.엄격한 모드에서 인코딩할 때 기억해야 할 것은 소리 없는 오류를 버퍼링 오류로 바꾸어 소리 없는 오류를 없애는 것이다."use strict"의 경우 JavaScript 문은 strict 모드를 사용합니다.문장 앞에서 호출하다.

function referenceErr(a){
    "use strict";
   foo = true;

   if(a == 0){
     return foo
   } else {
     return !foo
   }

  }


  console.log(referenceErr(1))

//   Uncaught ReferenceError: foo is not defined

자바스크립트 개발자로서 var, let, const를 사용하여 변수를 정의하는 것을 알고 있지만,strict 모드를 호출하지 않으면, 위의 예는 소리 없는 오류가 될 것입니다.

function referenceErr(a){
    "use strict";
   let foo = true;

   if(a == 0){
     return foo
   } else {
     return !foo
   }

  }


  console.log(referenceErr(1))
//   returns false

다시 성명한다
변수를 어떻게 재성명하는지 완전히 이해하지 못하면 인용 오류를 일으킬 수도 있다.

function redeclarations() {
    let declare = 1;
    if (true) {
      let declare = (declare + 1);   
    }
  }
  console.log(redeclarations())
// Uncaught ReferenceError: Cannot access 'declare' before initialization

위의 코드를 복원하려면, "let"을 "var"로 바꾸거나,if문에서 "let"을 완전히 생략해야 합니다.

function redeclarations() {
    let declare = 1;
    if (true) {
    declare = (declare + 1); 


    }
  }
  console.log(redeclarations())

SyntaxErrors
문법은 프로그래밍 언어가 어떻게 작성해야 하는지를 규정하는 규칙이다.모든 언어는 자신의 문법 규칙을 가지고 있다.우리는 그것들을 구어 중의 문법이나 문장부호로 상상할 수 있다.영어의 물음표(?)그리스어의 물음표(;)와 다르다.
우리는 우리가 문법 오류가 발생했을 때 프로그래밍 언어를 잘못 썼다고 추정할 수 있다.우리는 무의식중에 뭔가를 빠뜨렸을 수도 있고, 무의식중에 다른 언어의 문법을 사용했을 수도 있다. 이것은 개발자가 기술 창고를 늘릴 때 자주 발생하는 일이다.

흔히 볼 수 있는 문법 오류 및 복구 방법

괄호
괄호가 부족하거나 넘치는 것은 흔히 볼 수 있는 문법 오류의 원인이다.단락이 있으면 입력이 의외로 끝나는 문법 오류를 초래할 수 있고, 단락이 너무 많으면 의외의 표시를 초래할 수 있습니다.

function errors(a){

    if(a > 5){
      return true
    } else {
      return false
    // missing closing curly bracket


  }


  console.log(errors(5))
// Uncaught SyntaxError: Unexpected end of input

function errors(a){


    if(a > 5){
      return true
    } else {
      return false
    }


  }
//   one bracket too many below
} 


  console.log(errors(5))
// Uncaught SyntaxError: Unexpected token '}'

VS 코드와 다른 텍스트 편집기에서 몇 개의 확장자가 있습니다. 일치하는 괄호와 일치하지 않는 괄호를 추적해서 오류를 방지할 수 있습니다.컨트롤러의 오류는 오류가 발생한 코드 줄도 설명할 것입니다.

괄호
괄호와 마찬가지로 오른쪽 괄호와 일치하는 내용을 찾거나 화살표 함수의 매개 변수와 같은 괄호가 필요할 수도 있습니다.

const errors = a, b => {
    if(a + b == 5){
      return "equals"
    } else if (a + b > 5 ) {
      return "greater"
    } else {
      return "less"
    }
  }


  console.log(errors(1, 2))
//   Uncaught SyntaxError: Missing initializer in const declaration

우리는 상술한 함수의 문법을 정확하게 쓰기 위해 매개 변수 a와 b를 괄호 안에 묶어야 한다.

쉼표
대상의 쉼표를 잊어버리는 것은 또 다른 흔히 볼 수 있는 문법 오류 트리거이다.

let student = {
    name: "John",
    age: 23
    location: "Remote"
  }


  console.log(student.name)
//   Uncaught SyntaxError: Unexpected identifier

각 키 값은 뒤에 쉼표가 필요합니다.상술한 문제를 해결하는 방법은 23 뒤에 쉼표를 붙이는 것이다.

분점
또 다른 흔히 볼 수 있는 문법 오류 트리거는 for 순환과 같은 분호를 잊어버리는 것이다.

### let arr = [1, 2, 3, 4]


### for(let i =0; i < arr.length i++){


###   console.log(arr[i] * 2)


### }


### // Uncaught SyntaxError: Unexpected identifier

다국어 문법이 혼란스럽다
개발자가 JavaScript에서 서로 다른 언어의 문법을 사용하는 것은 의도적이든 무의식적이든 매우 흔하다.JavaScript의 규칙을 숙지하고 인코딩할 때 이 규칙들을 주의하는 것이 중요하다.
파이썬이 개발자의 주요 프로그래밍 언어라면 다음은 흔히 볼 수 있는 문법 오류입니다.

let arr = [1, 2, 3, 4]

for(i in length of arr){
  console.log(arr[i] * 2)
}

// Uncaught SyntaxError: Unexpected identifier

JavaScript 개발자로서 우리는 서로 다른 방식으로 순환 코드를 작성합니다.

let arr = [1, 2, 3, 4]

for(let i in arr){
  console.log(arr[i] * 2)
}

타자 오류
TypeError는 수행할 수 없는 작업을 수행하는 동안 발생한 오류를 나타내는 객체로, 대개 작업의 값이 예상한 유형이 아니기 때문입니다.
근데 장르가 뭐예요?최신 버전의 JavaScript 사양에 따라 9가지 데이터 및 구조 유형이 있습니다.그 중 여섯 가지는 기본 데이터 형식인 문자열, 숫자,bigint, 볼 값, 정의되지 않은 기호입니다. 만약null로 계산된다면, 때로는 일곱 가지입니다.작업 중에 TypeErrors가 트리거되는 이유를 이해하기 전에 JavaScript의 9가지 유형을 살펴보겠습니다.만약 우리가 유형을 어떻게 분류하는지 확실하지 않다면, 우리는 typeof 연산자를 사용할 수 있다.

undefined: 방금 설명한 변수에 대해 자동으로 정의된 값입니다.변수를 정의하는 것을 잊어버리거나 변수에 값을 추가할 때, 정의되지 않은 typeerror 값을 자주 얻을 수 있습니다.

블로형: 진짜나 가짜 값만 포함하는 논리적 데이터 형식.

번호: 디지털 데이터 유형.

문자열: 백핸드, 싱글 따옴표 또는 더블 따옴표 내의 문자열.

BigInt: 디지털 데이터 유형으로 다른 프로그래밍 언어에서bignums라고도 부른다.

Symbol: Symbol 함수를 호출하여 생성된 고유 식별자의 값을 나타냅니다.

대상: 하나의 구조 유형과'new'키워드로 만들 수 있는 거의 모든 것, 예를 들어 수조, 대상, 지도, 집합 등이다.

함수: 또 다른 비데이터 구조로 코드 세션으로 다른 코드 세그먼트에 호출될 수 있다.

null: 일반적으로 존재하지 않는 대상이나 주소의 의도적인 값을 나타낸다.

가장 일반적인 JavaScript 유형 오류 및 수정 방법
변경할 수 없는 값을 변경하거나 부적절한 방식으로 사용하면 형식 오류가 발생할 수 있습니다.매개 변수가 함수나 함수 내부의 연산자가 원하는 유형과 호환되지 않는 함수에 전달될 때도 이런 상황이 발생한다.

변경할 수 없는 값 변경
const 키워드를 사용하여 어떤 물건에 값을 부여할 때, 이것은 상수이며, 변하지 않는다는 것을 의미한다.상수 변수의 값을 변경하려고 하면 TypeError가 발생합니다.

const a = 5
a = "5"
// Uncaught TypeError: Assignment to constant variable.

우리는 '5' 문자열을 표시할 표지부의 이름을 간단하게 바꾸어서 이 문제를 해결할 수 있다.

const a = 5
const b = "5"

부적절한 방식으로 값을 사용하다
개발자는 또한 예상한 사용치를 확보해야 한다.다음 예에서 가필드가 instance of the Cat() 함수인지 확인하려고 할 때'Cat'과'가필드'가 반대로 표시됩니다.

function Cat() {}
function Dog() {}

let garfield = new Cat()

Cat instanceof garfield

// Uncaught TypeError: Right-hand side of 'instanceof' is not callable

우리는 양자의 순서를 수정함으로써 이 문제를 해결할 수 있다.

function Cat() {}
function Dog() {}

let garfield = new Cat()

garfield instanceof Cat

함수에 필요한 형식과 호환되지 않는 매개 변수
조작 코드를 작성할 때 개발자는 반드시 값을 사용하여 필요한 결과를 얻어야 한다.null의 값은 일부러 대상이 없다는 것을 나타낼 수 있지만, 다음에 그것을 사용하는 방식은 함수가 예상한 형식과 호환되지 않는 매개 변수로 사용되기 때문에 TypeError를 초래할 수 있습니다.

function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    }  else {
 return "Less than five"
    }
   }
   console.log(readingErrorsAreImportant(null))
   // Uncaught TypeError: Cannot read property 'length' of null

우리는 그것이 원하는 값 유형을 전달해서 이 문제를 해결할 수 있다.마치 하나의 수치 유형과 같다.

function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    }  else {
      return "Less than five"
    }
   }
   console.log(readingErrorsAreImportant(10))

우리에로
URI 오류는 전역 URI 처리 함수가 올바르게 사용되지 않을 때 발생하는 오류로, 매개 변수를 인코딩하거나 디코딩하지 못했습니다.

경고
오류와 달리 경고는 코드를 계속 실행하지만, 코드가 존재할 수 있는 잠재적인 함정을 설명하기 위해서입니다.몇 가지 다른 종류의 경고가 나올 수 있지만, 코드에서 원하지 않는 결과가 나오지 않도록 복구하는 것이 중요하다.