JavaScript 코드 디버깅 - 100일 중 20일

이 게시물은 시리즈의 일부입니다.

디버깅이란 무엇입니까?

디버깅은 코드를 살펴보고 문제를 찾고 수정하는 프로세스입니다.

오류 유형

코드의 문제는 세 가지 형태로 나타날 수 있습니다.

구문 오류는 코드가 언어 규칙에 따라 작성될 때 발생합니다. 이러한 오류로 인해 코드가 실행되지 않습니다.

런타임 오류는 코드를 실행할 때 코드가 예기치 않게 동작하는 경우입니다. 이러한 오류로 인해 프로그램 실행이 중지될 수 있습니다.

논리적 오류는 코드에서 예상하지 못한 결과를 얻은 경우입니다.

이 모듈에서는 JavaScript 콘솔을 사용하여 JavaScript 코드를 디버그하는 방법을 배웁니다.

JavaScript 콘솔을 사용하여 변수 값 확인:

console.log() 메서드는 괄호 안의 결과를 브라우저 콘솔에 기록합니다. Chrome과 FireFox에는 모두 DevTools라고도 하는 매우 강력한 브라우저 콘솔이 있습니다. Chrome과 FireFox 모두 F12 키를 눌러 DevTools를 연 다음 console 탭으로 이동할 수 있습니다. console.log("Hello World!")는 브라우저 콘솔에 Hello World!를 씁니다.

이 메서드를 코드에 넣어 프로그램을 디버깅하는 동안 변수의 출력을 볼 수 있습니다.

freeCodeCamp와 브라우저 콘솔의 차이점 이해:

나와 함께하는 친구들은 내가 이 100DaysOfCode 챌린지를 위해 FreeCodeCamp JavaScript 과정을 따르고 있다는 것을 알고 있습니다. FreeCodeCamp는 일부 JavaScript 수업에 대한 콘솔 창도 표시하는 온라인 코드 편집기를 제공합니다. 이 콘솔 창은 브라우저 콘솔 창과 약간 다르게 작동합니다.

브라우저 콘솔 창은 log() , warn() 및 clear() 등과 같은 모든 JavaScript 로그 메소드를 출력하지만 FreeCodeCamp 콘솔은 log() 메소드만 지원합니다. FreeCodeCamp 편집기는 코드를 변경할 때 실시간으로 콘솔에 기록합니다. 또한 코드가 실행될 때마다 FreeCodeCamp 콘솔이 지워집니다.

typeof를 사용하여 변수 유형 확인:

이것은 특히 다른 데이터 유형으로 작업할 때 디버깅에 유용할 수 있습니다. 다음 변수의 데이터 구조 또는 유형을 반환합니다.

console.log(typeof 7); // number
console.log(typeof "3"); // ntring
console.log(typeof ""); // ntring
console.log(typeof {}); // object
console.log(typeof []); // object

JavaScript는 6개의 변경할 수 없는 유형( Boolean , String , Number , Undefined , Null , Symbol (ES6에 추가됨) 과 하나의 변경 가능한 유형(Object)을 인식합니다. JavaScript에서 배열은 객체 유형으로 간주됩니다.