ZeroCho Blog

안녕하세요. 이번 시간에는 console 객체에 대해 알아보면서, 입문자분들이 많이 헷갈려하는 부분에 대해서도 짚어 보겠습니다.

자바스크립트 개발을 할 때 console.log 많이들 쓰시죠? 저도 많이 씁니다. 저는 console.log를 debugger보다도 많이 쓰는 편입니다. console 객체에는 log 메서드 말고도, 다양한 메서드들이 많이 존재합니다. 입문자분들께서는 log, dir, count, time, timeEnd 정도만 알아두시면 됩니다.

log

로그부터 시작해봅시다. console.log는 잘 아시니 간단히 설명하겠습니다. 다음과 같이 사용합니다.

var a = 1;
var b = 'hello';
var c = true;
console.log(a); // 하나만 로그
console.log(a, b, c); // 여러 개를 동시에 로그
console.log('%d는 숫자 %s는 문자열', a, b); // C 언어처럼 로그

마지막 용법은 잘 모르시는 분들이 많던데 C언어의 printf처럼 %d와 %s를 뒤에 입력한 인자로 치환합니다. 사실 저는 이 방법은 거의 쓰지 않습니다. 그냥 console.log(`${a}는 숫자 ${b}는 문자열`) 이렇게 템플릿 문자열을 더 선호하거든요.

log의 친구로 warn, info, error가 있습니다. 똑같이 로깅하는데 로깅 디자인이 좀 다릅니다. log만 쓰기 지루할 때 쓰시면 됩니다.

console.log('기본');
console.info('정보');
console.warn('경고');
console.error('에러');

로깅을 할 때 많이 실수하는 부분이 있습니다. 바로 객체를 사용할 때인데요. 다음 예제가 콘솔에 어떻게 표시될지 예상해보세요.

var obj = {};
console.log(obj);
obj.a = 1;
console.log(obj);

처음은 당연히 {}가 되고 두 번째는 {a: 1}이 됩니다. "에이 제로초 선생님 저희를 너무 무시하시는 거 아닌가요?"라고 하실 수도 있으나, 콘솔을 자세히 살펴보면 입문자분들은 헷갈릴 수 있습니다.

첫 번째 로그를 펴봤더니 a: 1이라고 들어있습니다. 실제 코드에서는 a에 1을 넣기 전에 콘솔 로그를 찍었지만요. console.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 내용이 실시간으로 바뀝니다.

이게 코드가 가까이 있으면 그런가보다하고 헷갈리지 않는데 다음과 같으면 엄청 헷갈려집니다. 배열(배열도 객체임)일 때를 보시죠.

var arr = [];
console.log(arr, arr.length);
// 복잡한 코드가 있다고 가정
setTimeout(function() { // 비동기 가정
  arr.push(5);
}, 0);

이번에는 arr.length까지 로깅을 해봤는데요. 분명히 로그에는 []와 0이 떴는데 []을 펴보니 length가 1이 되어있습니다. 실제로 이 질문을 엄청 많이 받았습니다. 하지만 이것만 알아두시면 됩니다. 객체를 로깅할 때는 객체의 내용 변경사항이 실시간으로 업데이트 된다는 것을요.

이 문제를 겪지 않으려면 객체를 깊은복사해서 로깅하거나, 객체가 아닌 값을 로깅하면 됩니다. 객체를 깊은 복사하는 것은 비용이 많이 들기 때문에 객체가 아닌 값을 로깅하세요. 예를 들어 arr을 로깅하지 말고(arr은 배열 객체이므로) arr.length를 로깅하는 식으로 말이죠.

dir

이번에는 dir 메서드에 대해 알아보겠습니다. log랑 함께 쓰면 편한데요. 객체는 dir, 나머지는 log로 로깅하면 편합니다. DOM 객체를 로깅해보겠습니다.

console.log(document.body); // <body>...</body>

DOM 객체의 메서드가 뭐가 있는지 보고싶은데 태그만 보입니다. 이럴 때 dir을 쓰면 됩니다.

함수도 객체라는 것을 기억하시고, 다음 예제도 콘솔에 쳐서 결과를 비교해보세요.

function f() { return true; }
console.log(f);
console.dir(f);

count

몇 번 호출되었나를 로깅하고 싶을 때 사용합니다. 인자는 카운터의 이름입니다.

console.count('카운터1'); // 카운터1: 1
console.count('카운터1'); // 카운터1: 2
console.count('카운터2'); // 카운터2: 1
console.count('카운터2'); // 카운터2: 2
console.count('카운터1'); // 카운터1: 3

time, timeEnd

코드 수행 시간을 확인할 때 유용합니다. 인자는 타이머의 이름입니다. time과 timeEnd에 같은 타이머 이름을 주어야 정상적으로 작동합니다.

console.time('타이머');
for (var i = 0; i < 1000000; i++) z = 5;
console.timeEnd('타이머'); // 타이머: 6.76611328125ms

이번 시간에는 간단하게 console 객체를 알아보았습니다. 나열한 메서드 외에도 다양하고 편리한 메서드들이 많이 있으므로 하나씩 시도해보세요. console.log(console)