본문 바로가기
Frontend/JavaScript

[JS] console 객체 총 정리(+그림&코드)

by 알기 쉬운 코딩 사전 2025. 2. 14.
반응형

console 객체

브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공하는 객체입니다.

window 객체의 프로퍼티이므로, winodw.console에서 window.를 생략하여 console 형태로 사용이 가능합니다.
console 객체는 아무 전역 객체에서나 접근할 수 있습니다.

  
window.console.log(‘안녕하세요‘);
// window. 생략가능
console.log(‘안녕하세요‘);

 


 

console 객체의 메서드 종류

  • log: 메시지를 아이콘이 없는 컴은색 텍스트로 콘솔창에 출력하는 메서드입니다.
  • warn: 메시지를 아이콘이 있는 노란색 텍스트로 콘솔창에 출력하는 메서드입니다.
    보통은 경고 메시지를 출력할때 사용합니다.
  • error: 메시지를 아이콘이 있는 빨간색 텍스트로 콘솔창에 출력하는 메서드입니다.
    보통은 에러 메시지를 출력할때 사용합니다.
  • table: key와 value가 있는 객체가 들어있는 메시지를 엑셀과 같은 테이블 형식으로 콘솔창에 출력하는 메서드입니다.
    보통 배열 데이터를 메시지에 담아 출력할때 사용합니다.
  • time & timeEnd: 코드의 수행 시간을 확인하는 메서드입니다.
    이때 time과 timeEnd에 인자는 같은 이름을 선언해야 정상적으로 작동합니다.
  • clear: 콘솔창을 지우는 메서드입니다.

 


🖥️ JavaScript 소스 코드로 이해하기

아래 코드는 console 객체의 다양한 메서드로 메시지를 출력하는 소스 코드입니다.
 

 

소스 코드


  
console.log("안녕하세요!");
console.log(123);
console.log(true);
console.warn("경고 메시지!");
console.error("에러 메시지!");
console.table({ a: "a", b: "b" });
console.time("time");
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.timeEnd("time");
// console.clear();
반응형

댓글