10 개의 일반적인 JavaScript 버그 및이를 피하는 방법 - 최고의 JavaScript 프로그래머조차도

최고의 자바 스크립트 프로그래머조차도 실수를 저 지르게됩니다. 때로는 이러한 실수로 인해 프로그램에서 원하는 결과를 얻지 못하고 때로는 프로그램이 전혀 실행되지 않을 수도 있습니다. 다음은 모든 레벨의 JavaScript 프로그래머가 흔히 범하는 10 가지 일반적인 실수입니다.

평등 혼란

x 는 y 입니까? x 는 사실입니까? 평등의 문제는 JavaScript의 핵심이며 매우 혼란스럽게 보일 수 있습니다. 조건문과 연산자 (if, && 등), equals 연산자 (==) 및 strict equals 연산자 (===)와 같이 JavaScript의 세 영역을 중심으로합니다.

더 많은 코딩을 복잡하게하기 위해 대입 연산자 (=)는 대부분의 사람들이 등호라고 부르는 것과 비슷하게 보입니다. 속지 마라!

할당 오용 방지

할당 연산자는 오른쪽 피연산자를 왼쪽 피연산자에 할당합니다. 예:

var a = 3;

이 명령문은 a라는 새 변수에 값 3을 제공합니다.

피연산자 는 프로그램의 모든 것입니다. 연산자는 (+, -, *, / 등)은 동사와 비슷하지만 -language의 명사와 비슷하다고 생각하십시오.

할당 연산자는 오른쪽에 표현식이있을 수도 있습니다.이 표현식은 평가 된 다음 왼쪽의 변수에 할당됩니다.

언어의 초보자가 실수로 비교를 위해 실수를하는 경우가 있습니다. 예를 들면 다음과 같습니다.

if (a = 4) {…}

이 코드는 예상 한대로 실행되지 않습니다. a의 값을 4와 비교하십시오.

같은 함정을 피하십시오.

0 == '0'

언제든지 프로그래밍에 소비하는 사람들은 따옴표 안에있는 숫자가 실제로 숫자가 아님을 알고 있습니다. 그러나 == 연산자는 두 값을 비교하기 전에 같은 유형으로 만들 것이므로 동일한 것으로 간주합니다. 이것은 추적하기 어려운 모든 종류의 문제로 이어질 수 있습니다.

parseInt (0) = -

== parseInt ("0")

이 문장도 true로 평가되지만, 관련된 부두교 마술은 없습니다. strict equals (===)와 strict not equals (! ==)는 예상했던대로 정확하게 수행됩니다.

0 === '0'

두 피연산자는 분명히 다른 유형이며 결과는 거짓입니다.

괄호가 맞지 않습니다.

프로그램이 더욱 복잡해지고 특히 JavaScript 객체로 작업 할 때 괄호가 쌓이기 시작합니다. 다음은 대괄호가 일치하지 않는 JavaScript 객체입니다.

{ "status": "OK", "results": [{ "id": 12, "title": "Dummies 용 JavaScript 코딩", "author": "Chris Minnick Eva Holland ","publication_date ":" ","summary_short ":" ""link ": {"type ":"리뷰 ","url ":" "link_text": "뉴욕 타임스 리뷰 읽기

Dummies 용 자바 스크립트 코딩}}, "award": [{ "type": "노벨상", "url": "",}]}

여기에서 문제를 볼 수 있습니까? 이런 일이 발생하면 훌륭한 코드 편집기가 매우 중요합니다! 숭고한 텍스트에는 시작 또는 끝 대괄호 옆에 커서를 놓으면 대괄호가 일치하는 것을 보여주는 기능이 있습니다.

숭고한 텍스트에서 대괄호를 강조 표시합니다.

일치하지 않는 따옴표

JavaScript에서는 작은 따옴표 나 큰 따옴표를 사용하여 문자열을 정의 할 수 있습니다. 그러나 JavaScript는 시작한 것과 동일한 유형의 인용 부호로 문자열을 끝내야한다는 규칙에 전혀 융통성이 없습니다. 또한 문자열을 둘러싼 따옴표와 같은 문자 인 따옴표와 아포스트로피를 살펴보십시오! 예:

var movieName = "Popeye"; // 오류! var welcomeMessage = '감사합니다, + firstName +', 자바 스크립트를 배우자! '// 오류!

누락 된 괄호

이 오류는 조건문, 특히 조건이 여러 개인 조건문에서 자주 발생합니다. 다음 예를 고려하십시오.

if (x> y) && (y <1000) {…}

여기서 수행하려는 것은 두 조건이 모두 맞는지 확인하는 것입니다. 그러나 실제로 여기서 세 가지 조건이 있으며, 모두 괄호가 필요합니다. 앞의 예제에서 빠진 점은 큰 && 조건을 둘러싼 괄호로, 대괄호 사이의 코드로 진행하려면 두 조건이 모두 참이어야한다는 것입니다.

올바른 것이므로이 진술은 다음과 같이 읽어야합니다.

if ((x> y) && (y <1000)) {…}

누락 된 세미콜론

JavaScript 문은 항상 세미콜론으로 끝나야합니다. 그러나 각 행을 자체 행에두고 세미콜론을 사용하지 않으면 세미콜론이있는 것처럼 코드가 실행됩니다. 코드가 여전히 실행 되더라도 세미콜론을 사용하지 않으면 코드를 재정렬하거나 두 문장이 같은 줄에 어떻게 든 끝날 때 문제가 발생할 수 있습니다.

이 오류를 방지하는 가장 좋은 방법은 항상 문장의 끝에 세미콜론을 사용하는 것입니다.

대소 문자 오류

JavaScript는 대소 문자를 구분합니다. 즉, 작성한 변수는 사용할 때마다 똑같이 대문자로 변환해야합니다. 또한 기능을 제대로 작동 시키려면 대문자로 변환해야합니다.

이 에러가 발생하는 가장 일반적인 장소 중 하나는 Document 객체의 getElementByld 메소드를 사용하는 것입니다.더 많은 문법적 의미를 갖기 때문에 getElementBylD라는 철자가 있다고 생각 하겠지만, 정확하지는 않습니다!

로드되기 전에 코드 참조

일반적으로 JavaScript 코드는 문서에 나타나는 순서대로로드되고 실행됩니다. 문서의 머리 부분에있는 스크립트에서 문서의 뒷부분에있는 HTML을 참조하면 문제가 발생할 수 있습니다.

HTML을로드하기 전에 참조하면 오류가 발생합니다.

문서. getElementById ("myDiv"). innerHTML = "이 div는 내 div입니다.";

이 div는 귀하의 div입니다. 이 코드는 자바 스크립트가 실행될 때 브라우저가 웹 페이지의 뒷부분에있는 id = "myDiv"인 div에 대해 아직 모르기 때문에 오류가 발생합니다.

이 문제를 피하기 위해 몇 가지 옵션이 있습니다.

직전에 자바 스크립트를 HTML 파일의 맨 아래에 놓습니다.

JavaScript 코드를 함수에 넣으십시오. 그런 다음 시작 본문 태그의 onload 이벤트 속성을 사용하여 함수를 호출 할 수 있습니다.
두 번째 방법을 사용하여 여기에서 문제가 해결되었습니다.

스크립트를 실행하기 전에 HTML이로드 될 때까지 기다리십시오.

function nameMyDiv () {document. getElementById ("myDiv").

이 div는 div입니다. 잘못된 변수 이름

예약어를 변수 이름으로 사용하는 것을 금지하는 것이 특히 어렵습니다.

흥미롭게도 JavaScript에는 60 개 이상의 예약어가 있으며 변수 이름으로 사용해서는 안되는 많은 다른 단어가 있습니다. 모든 예약어를 암기하는 대신 이러한 유형의 이름 지정 오류를 피하는 가장 좋은 방법은 단순히 예약어로 경로를 교차하지 않을 가능성이 높은보다 명쾌한 이름 지정 체계를 제안하는 것입니다.

예를 들어 name이라는 단어는 JavaScript의 예약어 중 하나입니다. 이름을 붙이는 것에 대한 습관이 생기면 firstName, lastName, dogName 및 nameOfTheWind와 같은 항목을 저장하는 변수의 이름을 지정합니다. 예약어와의 충돌을 완전히 피할 수 있습니다.

범위 오류