JavaScript 다양한 console 객체의 메소드들

개발을 하면서 디버깅이나 로깅을 할 때 console 객체의 log, warn, error 메소드를 보통 많이 쓴다.

가장 많이 사용하는건 console.log()와 console.error().

하지만 생각보다 더 많은 메소드들이 있었다. 이번 포스팅에서는 console 객체의 메소드들에 대해서 살펴보고 다양한 상황에 잘 활용할 수 있도록 공부해보려고 한다.

 

---

console.log(), console.info()

console.log("String");
console.log("Number: ", 123);
console.log("Object: ", { name: "youngdev", age: "30" });

 

일반적인 로그 메세지를 출력할 때 사용하는 log() 메소드이다.

가장 많이 사용한다.

 

console.info()의 경우 정보를 출력한다고 하는데 log()와 차이점을 딱히 못 느껴서 같이 추가했다.

---

console.error()

try {
    throw new Error("Error message");
} catch(e) {
    console.error(e);
}

에러 메시지를 출력하는 error() 메소드다.

메시지가 빨간색으로 표시되어서 에러를 디버깅할 때 사용한다.

---

console.warn()

console.warn("Warning")

경고 메시지를 출력하는 warn() 메소드다.

메시지가 노란색으로 표시된다.

---

console.table()

const menus = [
    { id: 1, name: "메뉴1", code: "menu01" },
    { id: 2, name: "메뉴2", code: "menu02" },
    { id: 3, name: "메뉴3", code: "menu03" },
    { id: 4, name: "메뉴4", code: "menu04" }
];
console.table(menus);

배열이나 객체 데이터를 시각적으로 보기 편하게 출력해준다.

사실 글 쓴 이유도 table() 메소드 덕분이다 :)

익숙해져서 계속 사용하면 굉장히 유용할 것 같다.

---

console.assert()

const isAdmin = false;
console.assert(isAdmin, '403');

그리고 뜻밖의 수확.

assert() 메소드를 사용하면 값이 false 일 때만 메시지를 에러 로그처럼 출력한다.

조건식이나 비교식을 넣어도 된다.

---

console.group(), console.groupEnd()

console.group('Menu 1');
console.log('Menu 1-1');
console.group('Menu 2');
console.log('Menu 2-1');
console.log('Menu 2-2');
console.groupEnd();
console.groupEnd();

출력 메시지를 그룹화하는 group() 메소드.

평소 로그찍을때는 효율적이진 못할 것 같고 정말 필요한 로그를 남길 때 꾸미기 좋을 것 같다.

약간 센스가 돋보이는 느낌

---

 

마지막으로 console.clear()도 있다.

모든 콘솔을 지우는 메소드.

두고두고 기억하면서 써버릇해야 익숙해질 것 같다.