JavaScript console API의 종류

JavaScript 를 하다보면 console.log() 를 사용할때가 많다. 다들 console.log 만 알고 다른건 잘 모르더라..

디버깅 작업을 도와주는 이 console API는 여러가지고 있고 발생하는 오류를 추적하는데 엄청 도움이 된다.

한번 자세히 알아보자.

---

1. console.log()

콘솔에 일반적인 메시지를 출력할 때 사용한다. 가장 기본적인 메서드이고 문자열, 숫자, 객체, 배열 등 다양한 타입의 데이터를 출력 할 수 있다.

console.log('Hello, World!'); // 문자열 "Hello, World!"
console.log(42); 		// 숫자 42
console.log({ name: 'Alice', age: 30 }); //  객체 { name: 'Alice', age: 30 }
console.log([1, 2, 3, 4]); // 배열 [1, 2, 3, 4]

 

2. console.error()

에러메시지를 출력 할 때 사용한다. 콘솔에 빨간색으로 표시되어 오류메시지를 쉽게 구별할 수 있다.

console.error('This is an error message.');

 

3. console.warn()

경고 메시지를 출력할 때 사용한다. 오류보다는 낮은 단계의 심각성을 나타내며 콘솔에 노란색으로 표시된다.

console.warn('This is a warning message.');

 

4. console.info()

정보 메시지를 출력할 때 사용한다. console.log()와 비슷하지만, 일부 브라우저에서는 스타일이 다르다.

console.info('This is an informational message.');

 

5. console.table()

위에 까지는 logger와 비슷 했지만 이제 좀 다르다. console.table()은 배열이나 객체의 데이터를 테이블 형식으로 출력할 때 사용한다. 구조화하여 보기 좋게 표시한다.

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

console.table(users);

 

6. console.group() , console.groupEnd()

관련된 메시지를 그룹화하여 계층적으로 표시한다. 그룹화된 메시지는 들여쓰기가 적용되어 나타난다.

console.group('User Details');
console.log('Name: Alice');
console.log('Age: 30');
console.groupEnd();

 

7. console.groupCollapsed()

console.group()과 동일한 기능을 제공하지만, 기본적으로 그룹이 접힌 상태로 표시된다.

console.groupCollapsed('User Details');
console.log('Name: Bob');
console.log('Age: 25');
console.groupEnd();

 

8. console.time() , console.timeEnd()

코드 블록의 실행 시간을 측정할 때 사용한다. console.time()은 타이머를 시작하고, console.timeEnd()는 타이머를 종료하며 경과시간을 출력한다.

console.time('Loop Time');
for (let i = 0; i < 1000000; i++) {
  // Looping for time measurement
}
console.timeEnd('Loop Time'); // 출력 예: "Loop Time: 12.345ms"

 

9. console.assert()

주어진 조건이 false 일 경우에만 메시지를 출력한다. 디버깅 중 특정 조건을 검증하고 오류 메시지를 출력할 때 사용한다.

const age = 15;
console.assert(age >= 18, 'Age is less than 18'); // "Age is less than 18"

 

10. console.clear()

콘솔의 모든 내용을 지운다. 디버깅을 하면서 새로운 시작을 하고 싶을때 쓰면 좋다.

console.clear();

 

 

11. console.trace()

호출 스택(호출된 함수의 순서)을 출력한다. 디버깅을 할때 호출 순서를 추적할 때 유용하다.

function firstFunction() {
  secondFunction();
}

function secondFunction() {
  thirdFunction();
}

function thirdFunction() {
  console.trace('Trace the call stack');
}

firstFunction();

---

console.log()로도 충분히 쓸수 있지만 console.log() 10번 찍어볼거 다른거 한번에 할수도 있다. 특히나 처음보고 말도 안되게 긴 코드에서 쓰면 순서도 쉽게 파악이 되고 오류 위치를 빠르게 찾을 수 있다. 다양한 메서드를 사용해서 더욱 효율적인 디버깅을 해보자!