[책] 자바스크립트 코드 레시피 278 - 220일차

정보/에러/경고 출력하기

• 자바스크립트의 실행 결과를 확인하고 싶을 때
• 상태에 따라 콘솔 사용을 분류하고 싶을 때

구문

console.log(값); // 로그 표시
console.info(값); // 정보 표시
console.warn(값); // 경고 표시
console.error(값); // 에러 표시

설명

콘솔은 동작 확인을 위한 로그와 경고, 에러를 표시하는 로그 등 상태에 따라 네 종류의 명령이 있습니다. 사용 분류를 통해 로그 종류를 콘솔 패널에서 쉽게 확인할 수 있으며, 종류에 따라 문자색으로 구분이 가능합니다.

console.log('로그 표시');
console.info('정보 표시');
console.warn('경고 표시');
console.error('에러 표시');

예를 들어 구글 크롬 개발자 도구에서는 log와 info를 검은색, warn을 노란색, error를 빨간색 문자로 표시합니다. 권하지 않는 조작은 console.warn()으로 표시하고, 프로그램이 의도하지 않은 동작 등은 console.error()로 나타내도록 분류하여 사용하면 좋습니다.

---

객체 구조 출력하기

• 깊은 계층의 데이터 요소를 확인하고 싶을 때

구문

console.dir(객체); // 객체 구조 출력
console.table(객체); // 객체 구조

설명

객체와 배열을 사용하여 깊은 계층의 데이터를 다룰 때, 데이터를 효과적으로 출력하여 확인하기 위해서 console.dir()과 console.table()을 사용할 수 있습니다. console.dir()은 객체의 구조를 출력합니다.

const myObject = {
  id: 2,
  name: '사자'
};
console.dir(myObject); // 개발자 도구에서 확인하면 객체를 확인할 수 있습니다.

const myArray = [
  { id: 100, name: '사자', age: 25, },
  { id: 200, name: '여우', age: 30, },
  { id: 300, name: '사슴', age: 35, },
];
console.table(myArray); // 데이터가 표로 출력됩니다.

---

에러 파악하기

• 프로그램 실행 중 발생한 에러를 파악하고 싶을 때

구문

console.log(객체);

설명

상수에 값을 재대입하거나 undefined.myValue와 같이 존재하지 않는 값에 액세스를 시도하면 에러(예외)가 발생합니다. 개발자 도구에서 에러를 확인해봅시다.

const a = 10;
console.log(`상수의 a의 값은 ${a}입니다.`);
a = 20;
console.log(`다음 작업을 실행합니다.`);