JavaScript console 객체를 통한 로깅(console.log, console.table)

개요

JavaScript의 console 객체는 개발자가 브라우저의 콘솔 창에 메시지를 출력하거나, 디버깅을 위해 다양한 유형의 정보를 출력할 수 있게 하는 내장 객체입니다. console 객체는 디버깅 과정에서 매우 유용하며, 여러 가지 메서드를 제공하여 개발자의 작업을 돕습니다.
아래는 console 객체에서 자주 사용되는 몇 가지 함수에 대하여 설명한 내용입니다!

---

1. console.log()

가장 기본적인 로깅 함수로, 정보를 콘솔에 출력
변수, 객체, 배열 등 거의 모든 유형의 데이터를 로깅할 때 사용할 수 있습니다.

log() 함수외에도 error(), warn(), info(), debug() 함수가 존재한다.

공통적으로 정보를 콘솔에 출력하는 역할을 동일하게 수행되며,
차이점은 각각 메서드별로 콘솔에 노출되는 로깅 메세지 디자인이 구분된다.

사용법

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

 

예시 코드

// 테스트용 변수 세팅
const v 	= "JavaScript";
const obj	= { language: "JavaScript", type: "Programming" };
const arr	= [1, 2, 3, 4, 5];
const json	= JSON.parse('[{"name":"John Doe","age":30,"isDeveloper":true},{"name":"Jane Smith","age":25,"isDeveloper":false},{"name":"Dave Brown","age":40,"isDeveloper":true}]');

// console.log()
console.log(v);		// 기본 변수
console.log(obj);	// 객체
console.log(arr);	// 배열
console.log(json);	// Json 파싱 객체

결과(크롬 개발자 도구)

---

2. console.table()

객체나 배열을 테이블 형태로 콘솔에 출력
데이터를 구조화된 형태로 쉽게 파악하고 싶을 때 사용합니다.
주로 복잡한 형태의 객체나 배열 정보를 콘솔에 출력하여 쉽게 데이터 내용을 이해하는데 가독성이 높아집니다.

 

사용법

console.table(obj1 [, obj2, ..., objN]);

 

예시 코드

// 테스트용 변수 세팅
const v 	= "JavaScript";
const obj	= { language: "JavaScript", type: "Programming" };
const arr	= [1, 2, 3, 4, 5];
const json	= JSON.parse('[{"name":"John Doe","age":30,"isDeveloper":true},{"name":"Jane Smith","age":25,"isDeveloper":false},{"name":"Dave Brown","age":40,"isDeveloper":true}]');

// console.table()
console.table(v);		// 기본 변수
console.table(obj);		// 객체
console.table(arr);		// 배열
console.table(json);	// Json 파싱 객체

 

결과(크롬 개발자 도구)

console.log()와 다르게 console.table()의 경우 복잡한 객체(또는 배열) 데이터를 시각적으로 가독성 좋은 테이블 형태로 내용을 출력해주기 때문에, 복잡한 객체에 대한 디버깅시 효율성을 높여줍니다.