반응형

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();
반응형
'Frontend > JavaScript' 카테고리의 다른 글
[Js] 형(Type) 변환 총 정리(+그림&코드) (1) | 2025.02.15 |
---|---|
[JS] 변수와 상수(var, let, const) 총 정리(+그림&코드) (0) | 2025.02.14 |
[JS] Uncaught TypeError: Assignment to constant variable. 오류 해결 방법 (0) | 2025.02.14 |
[JS] HTML, CSS, JavaScript 총 정리(+그림&코드) (0) | 2025.02.13 |
[JS] Promise 동작 방식 : 아주 쉽게 그림으로 정리 (1) | 2024.10.21 |
댓글