JavaScript 오류의 5가지 일반적인 원인(및 이를 방지하는 방법)

by

JavaScript(JS)는 유비쿼터스하고 유연하며 널리 사용되는 프로그래밍 언어입니다. 하지만 대부분의 개발자를 짜증나게 만드는 오류와 버그가 발생하기 쉽습니다.

JS는 대부분의 웹 애플리케이션의 클라이언트 측에서 사용자 상호 작용을 강화하는 데 광범위하게 사용됩니다. JavaScript가 없으면 웹상의 모든 것이 생명이 없고 자극적이지 않을 수 있습니다. 그럼에도 불구하고, 언어의 썰물과 흐름은 때때로 개발자로 하여금 그 언어와 애증의 관계를 갖도록 만듭니다.

JavaScript 오류로 인해 응용 프로그램이 예기치 않은 결과를 생성하고 사용자 경험에 해를 끼칩니다. UBC(University of British Columbia)의 연구에서는 JavaScript 오류 및 버그의 근본 원인과 영향을 알아보기 위해 노력했습니다. 연구 결과는 JS 프로그램의 성능을 손상시키는 몇 가지 일반적인 패턴을 발견했습니다.

다음은 연구원들이 발견한 것을 보여주는 원형 차트입니다.

이 블로그 게시물에서 우리는 연구에서 강조된 JavaScript 오류의 일반적인 원인 중 일부(그리고 우리가 매일 접하는 다른 오류)와 애플리케이션이 실패할 가능성을 줄이는 방법을 설명할 것입니다.

DOM 관련

DOM(Document Object Model)은 웹 사이트의 상호 작용에서 중요한 역할을 합니다. DOM 인터페이스를 사용하면 웹 페이지의 콘텐츠, 스타일 및 구조를 조작할 수 있습니다. 일반 HTML 웹 페이지를 대화형으로 만들거나 DOM을 조작하는 것이 JavaScript 프로그래밍 언어가 출시된 바로 그 이유입니다.

따라서 Node.js와 같은 백엔드 JavaScript 기술의 도입에도 불구하고 DOM으로 작업하는 것은 여전히 ​​언어가 하는 일의 큰 부분을 형성합니다. 따라서 DOM은 JavaScript 애플리케이션에 버그와 오류를 도입하는 중요한 수단입니다.

JavaScript 버그 보고서 연구에서 DOM 관련 문제가 68%로 대부분의 결함에 책임이 있다는 사실이 밝혀진 것은 놀라운 일이 아닙니다.

예를 들어, 일부 JavaScript 프로그래머는 일반적으로 DOM 요소가 로드되기 전에 참조하는 실수를 하여 코드 오류를 발생시킵니다.

<!DOCTYPE html>
<html>
<body>
        <script>        
	document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
    </script>
    <div id="container"></div>
    </body>
</html>

위의 코드를 Chrome 브라우저에서 실행하면 개발자 콘솔에서 볼 수 있는 오류가 발생합니다.

JavaScript 코드는 일반적으로 문서에 나타나는 순서에 따라 실행되기 때문에 오류가 발생합니다. 따라서 브라우저는 코드가 실행될 때 참조된

요소를 인식하지 못합니다.

이러한 문제를 해결하기 위해 다양한 접근 방식을 활용할 수 있습니다. 가장 간단한 방법은

를 스크립트 태그의 시작 부분에 배치하는 것입니다. jQuery와 같은 JavaScript 라이브러리를 사용하여 DOM이 액세스되기 전에 먼저 로드되도록 할 수도 있습니다.

<!DOCTYPE html>
<html>
<body>
     <div id="container"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>        
		document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
    </script>    
</body>
</html>

구문 기반

구문 오류는 JavaScript 인터프리터가 구문적으로 잘못된 코드를 실행하지 못할 때 발생합니다. 응용 프로그램을 만들고 인터프리터가 JavaScript 프로그래밍 언어의 표준 구문과 일치하지 않는 토큰을 관찰하면 오류가 발생합니다. JavaScript 버그 보고서 연구에 따르면 이러한 오류는 언어의 모든 오류 중 12%를 차지합니다.

괄호가 없거나 일치하지 않는 대괄호와 같은 문법적 실수는 JavaScript에서 구문 오류의 주요 원인입니다.

예를 들어 여러 조건을 처리하기 위해 조건문을 사용해야 하는 경우 필요에 따라 괄호를 제공하지 않아 구문 결함이 발생할 수 있습니다.

다음 예를 살펴보겠습니다.

if((x > y) && (y < 77) {
        //more code here
   }

예, 조건문의 마지막 괄호가 없습니다. 위의 코드에서 실수를 눈치채셨나요?

수정합시다.

if ((x > y) && (y < 77)) {
        //more code here
    }

이러한 구문 오류를 방지하려면 JavaScript 프로그래밍 언어의 문법 규칙을 배우는 데 시간을 투자해야 합니다. 광범위한 코딩 연습을 통해 문법적 실수를 쉽게 찾아내고 개발된 응용 프로그램과 함께 제공하는 것을 피할 수 있습니다.

정의되지 않은/null 키워드의 부적절한 사용

일부 JavaScript 개발자는 undefined 및 null 키워드를 올바르게 사용하는 방법을 모릅니다. 실제로 연구에 따르면 키워드의 부적절한 사용은 전체 JavaScript 버그의 5%를 차지합니다.

null 키워드는 일반적으로 존재하지 않는 값을 나타내기 위해 변수에 할당되는 할당 값입니다. 놀랍게도 null도 JavaScript 객체입니다.

다음은 예입니다.

var codeJS = null;

console.log(codeJS);
      //output is null

console.log(typeof codeJS);
     //output is object

반면에 undefined는 이미 선언된 변수나 다른 속성에 할당된 값이 없음을 나타냅니다. 또한 선언된 것이 없음을 의미할 수도 있습니다. undefined는 그 자체의 유형입니다.

다음은 예입니다.

var codeJS;

console.log(codeJS);
      //output is undefined

console.log(typeof codeJS);
     //output is undefined

흥미롭게도 등호 연산자와 항등 연산자를 사용하여 null 및 정의되지 않은 키워드를 비교하는 경우 후자는 동일한 것으로 간주하지 않습니다.

console.log(null==undefined);
//output is true

console.log(null===undefined);
//output is false

따라서 null 및 정의되지 않은 키워드의 올바른 사용법을 아는 것은 JavaScript 프로그램에 버그를 도입하는 것을 방지하는 데 도움이 될 수 있습니다.

정의되지 않은 메서드

JavaScript에서 버그가 발생하는 또 다른 일반적인 원인은 사전 정의를 제공하지 않고 메서드를 호출하는 것입니다. UBC 연구원들은 이 실수가 모든 JavaScript 오류의 4%를 초래한다는 것을 발견했습니다.

다음은 예입니다.

var coder = {
      name: "Peter",
      age: 27,
      speak() {
      console.log(this.name);
  }
};
coder.speakNow();

다음은 Chrome 개발자 콘솔에 표시되는 오류입니다.

위의 오류는 호출된 함수 speakNow()가 JavaScript 코드에 정의되어 있지 않기 때문에 발생합니다.

return 문의 잘못된 사용

JavaScript에서 return 문은 해당 값이 출력될 수 있도록 함수의 실행을 중지하는 데 사용됩니다. 잘못 사용하면 return 문은 응용 프로그램의 최적 성능을 손상시킬 수 있습니다. 연구에 따르면 return 문을 잘못 사용하면 JavaScript 애플리케이션의 모든 버그 중 2%가 발생합니다.

예를 들어, 일부 JavaScript 프로그래머는 일반적으로 return 문을 잘못 깨는 실수를 범합니다.

JavaScript 문을 두 줄로 나누면 여전히 필요한 출력을 얻을 수 있지만 return 문을 깨는 것은 응용 프로그램에 재앙을 불러일으킵니다.

다음은 예입니다.

function number(n) {
    var add = 5;
    return;
    n + add;
     }
console.log(number(10));

위의 코드를 실행하면 Chrome 개발자 콘솔에 정의되지 않은 오류가 표시됩니다.

따라서 JavaScript 코드에서 return 문을 깨뜨리지 않아야 합니다.

결론

클라이언트 측 JavaScript 프로그래밍 언어는 최신 웹 응용 프로그램의 기능을 강화하기 위한 탁월한 광범위한 기능과 함께 제공됩니다. 그러나 언어를 작동시키는 단점을 이해하지 못하면 응용 프로그램의 성능이 저하될 수 있습니다.

뿐만 아니라, 자바스크립트 개발자 애플리케이션의 성능 문제를 해결하고 버그와 오류를 신속하게 감지하기 위한 다양한 도구가 필요합니다.

따라서 포괄적인 테스트 도구 모음을 사용하여 웹사이트 성능을 저하시키는 이상 현상을 자신 있게 식별할 수 있습니다. 사이트의 성능을 개선하고 최적의 사용자 경험을 달성하는 데 필요한 것입니다.

오류 없는 JavaScript 프로그래밍을 즐기십시오!

Alfrick Opidi가 작성한 기사