ECMAScript, Console 객체

테스트나 에러 확인, 진행 상황 체크 등을 위해 자주 사용하는 console 객체의 함수에 대해 정리해본다.

1. 로그 기본

안드로이드의 로그캣과 마찬가지로 info, log, warn, error가 있다. 이 중 warn은 노란색, error는 붉은색으로 표시된다.

console 함수의 파라미터로 객체를 전달하면 JSON 형태로, 배열을 전달하면 배열 전체가 출력된다. 

또, 여러개의 인자를 전달하면 '　'(공백-띄어쓰기)로 구분하여 출력한다. 

// 기본적인 사용
console.info('This is a info message');
console.log('This', 'is a log message'); // console.log == console.debug (둘은 같은 함수다)
console.warn('This is a warn message');
console.error('This is a error message');

2. 스타일

로그에도 CSS 스타일을 적용할 수 있다. 적용하고자 하는 문자열 앞에 %c를 입력하고 마지막 인자로 CSS 스타일을 전달하면 된다.

여러개의 인자를 전달하는 경우에는 스타일을 적용할 수 없다.

// CSS 스타일이 적용된 로그
const option = 'font-size: 16px; color: red; background-color: black; padding: 12px';
console.log('%chello world', option);

3. 로그 그룹

펼치거나 접을 수 있는 그룹 형태로 로그를 출력할 수 있다. 그룹이 열린 형태로 출력되는 것이 기본 값이며, groupCollapsed 함수를 이용하면 닫힌 형태로 출력할 수 있다.

당연하게도 그룹 안에 그룹을 선언하면 하위 그룹으로 출력된다.

// 첫 번째 그룹 메시지
console.group('First group');
console.log('group1-log');
console.error('group1-error');
console.groupEnd();

// 두 번째 그룹 메시지
console.groupCollapsed('Second group');
console.error('group2-error');
console.groupEnd();

4. 타이머

코드의 실행 시간을 측정할 때 편리하게 사용할 수 있는 함수다. 

매번 Date.now()와 같은 함수를 호출하고 변수에 저장하는 번거로운 작업을 할 필요가 없다!

// 타이머
console.time('my-timer'); // 시작-종료할 타이머 이름. 입력하지 않아도 된다.
Math.pow(12, 256);
console.timeEnd('my-timer'); // my-timer: 0.009033203125ms

4. Assert

JUnit같은 단위 테스트 프레임워크에서 죽어라 사용했던 그 Assert다.

첫 번째 파라미터로 전달하는 test가 false일 때 메시지가 출력된다.

// Assert
const value = 1000;
console.assert(value > 500, 'Assert1');
console.assert(value < 1000, 'Assert2');