자바스크립트 디버깅이란, 디버깅 수정 방법

자바스크립트에서 디버깅이란 무엇인지 알아보고, 디버깅 수정 방법에 대해서 알아보도록 하겠습니다.

디버깅이란

디버깅이란 코드를 작성하는 동안 오류가 발생할 수 있기 때문에 디버깅을 통해서 오류가 발생한 이유에 대해 알 수 있습니다. 이렇게 출력된 디버깅을 통해 코드를 수정할 부분을 알 수 있습니다.

 

 

디버깅 수정 방법 및 종류

구문 오류

대괄호, 세미콜론 또는 괄호 누락과 같이 코드 구문에 오류가 있는 경우 구문 오류가 발생합니다.

 

이러한 오류는 코드가 제대로 실행되지 못하게 하며 일반적으로 브라우저의 JavaScript 엔진에 의해 포착됩니다. 오류 메시지는 오류가 발생한 정확한 위치를 가리킵니다.

let number = 10;
if (number === 10 {
console.log("Number is 10");
}

이 코드 예제에서는 if 문에 닫는 괄호가 없습니다. 오류 메시지는 누락된 괄호가 있는 줄을 가리키며 오류를 "SyntaxError: missing ) after condition"으로 설명합니다.

 

이 오류를 수정하려면 if 문의 조건 뒤에 닫는 괄호를 추가하기만 하면 됩니다.

let number = 10;
if (number === 10) {
console.log("Number is 10");
}

 

유형 오류

유형 오류는 데이터 유형이 일치하지 않거나 객체 및 함수를 잘못 사용할 때 발생합니다. 코드가 계속 실행될 수 있기 때문에 이러한 오류를 포착하기가 더 어렵지만 출력은 예상과 다릅니다.

let name = "John";
let age = 30;
let result = name + age;
console.log(result);

이 코드 예제에서 result 변수에는 age와 연결된 name 값이 할당됩니다. 그러나 name은 문자열이고 age는 숫자이므로 유형 오류가 발생합니다. 오류 메시지는 오류를 "TypeError: can't convert number to string"으로 설명합니다.

 

이 오류를 수정하려면 연결하기 전에 숫자를 문자열로 변환해야 합니다.

let name = "John";
let age = 30;
let result = name + age.toString();
console.log(result);

 

참조 오류

참조 오류는 변수나 함수가 선언되거나 범위를 벗어나기 전에 참조될 때 발생합니다. 이러한 오류는 개발자가 실수로 변수 이름을 잘못 입력했거나 변수가 다른 범위에서 선언된 경우에 발생할 수 있습니다.

function sum(a, b) {
return a + b + c;
}
let result = sum(5, 10);
console.log(result);

 

이 코드 예제에서 함수 sum은 선언되지 않은 변수 c를 참조합니다. 오류 메시지는 오류를 "ReferenceError: c가 정의되지 않음"으로 설명합니다.

 

이 오류를 수정하려면 함수에서 사용하기 전에 c 변수를 선언해야 합니다.

function sum(a, b) {
let c = 0;
return a + b + c;
}
let result = sum(5, 10);
console.log(result);

 

논리적 오류

코드가 오류 없이 실행되지만 출력이 예상과 다를 때 논리적 오류가 발생합니다. 코드가 구문적으로 정확하고 오류 메시지가 발생하지 않기 때문에 이러한 오류를 포착하기 어려울 수 있습니다.

function calculateAverage(numbers) {
let sum = 0;
for (let i = 1; i < numbers.length; i++) {
sum += numbers[i];
}
return sum / numbers.length;
}
let numbers = [1, 2, 3, 4, 5];
let result = calculateAverage(numbers);
console.log(result);

 

이 코드 예제에서 calculateAverage 함수는 평균을 계산합니다.

728x90

먼저 sum이라는 변수를 선언하고 0으로 설정합니다. 그런 다음 for 루프를 사용하여 배열의 각 요소를 반복하고 각 요소를 전체 변수에 추가합니다. 마지막으로 전체 변수를 배열 길이로 나누어 평균을 구하고 결과를 반환합니다.

 

그러나 이 코드에는 잠재적인 오류가 있을 수 있습니다. 입력 배열이 비어 있으면 총 변수가 0으로 유지되고 0으로 나눗셈하면 NaN 값이 됩니다.

 

이러면 프로그램에서 예기치 않은 동작을 일으킬 수 있습니다. 이 문제를 방지하려면 함수 시작 부분에 배열이 비어 있는지 확인하는 검사를 추가하고, 비어 있으면 메시지 또는 적절한 값을 반환할 수 있습니다.

 

디버깅 팁

코드에서 예기치 않은 동작이나 오류가 발생하는 경우 문제의 원인을 식별하는 것이 중요합니다. NaN 값의 경우 console.log 함수를 사용하여 코드의 다양한 단계에서 값을 출력하면 유용합니다.

 

예를 들어 for 루프 뒤에 console.log 문을 추가하여 총 변수를 출력하고 0이 아닌지 확인할 수 있습니다.

 

또한 console.log 문을 추가하여 입력 배열의 길이를 확인하고 0이 아닌지 확인할 수 있습니다. 이를 통해 NaN 값의 소스를 식별하고 문제를 해결할 수 있습니다.