JavaScript 오류에 대한 최종 가이드
27642 단어 codenewbiewebdevjavascript
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 연산자를 사용할 수 있다.
가장 일반적인 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 처리 함수가 올바르게 사용되지 않을 때 발생하는 오류로, 매개 변수를 인코딩하거나 디코딩하지 못했습니다.
경고
오류와 달리 경고는 코드를 계속 실행하지만, 코드가 존재할 수 있는 잠재적인 함정을 설명하기 위해서입니다.몇 가지 다른 종류의 경고가 나올 수 있지만, 코드에서 원하지 않는 결과가 나오지 않도록 복구하는 것이 중요하다.
Reference
이 문제에 관하여(JavaScript 오류에 대한 최종 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/careerkarma/the-ultimate-guide-to-javascript-errors-1n6j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)