javaScript. console 객체의 메서드

---

🟨 console 객체의 메서드 

- log

- dir

- count

- time

- timeEnd

 

---

 

 

 

 

📌 console.log()

 

Web Console에 메시지를 출력하는 console.log는

객체 / 문자열 / 치환문자열 등을 출력할 수 있다.

 

+) 로깅 디자인에 따라 info / warn / error 도 존재한다.

 

 

___

 

 

📌 console.dir()

객체는 dir로 , 나머지는 log로 로깅하면 편하다.

console.dir(document.body);

 

>>> ❔ console.dir() 과의 차이점은 무엇일까?

- DOM 요소들을 console로 보낼 떄 차이점이 있다.

console.log	- element를 HTML과 같은 트리구조로 출력. >> DOM요소에 대해 특별 처리 제공 - 객체를 로깅하면 ❌
console.dir	- element를 JSON과 같은 트리구조로 출력  - 객체 로깅 ⭕

 

- console.log로 객체를 로깅하면, 값이 갱신될 때마다 끊임없이 바뀐 값으로 보여준다.

따라서, 객체를 로깅하는것은 권장X.

 

 

여기서, 객체(Object)에는
함수, 배열, 객체 모두 포함된다.
즉, 내용물이 변할 수 있는 것은 모두 console.log로 로깅해선 ❌

 

 

___

 

 

📌 console.count()

- 몇 번 호출되었는지 로그할 수 있음. ( count() 호출의 횟수를 세어 출력 )

- 인자(argument) = 카운터의 이름. (Label)

 

>> 레이블 명시 안하면 default로 나타남.

 

let user = "";

function greet() {
  console.count(user);
  return "hi " + user;
}

user = "bob";
greet();
user = "alice";
greet();
greet();
console.count("alice");

 

 

___

 

 

📌 console.time() / console.timeEnd()

console.time('타이머');
// 내용 
console.timeEnd('타이머'); // 타이머: 3.259083490ms

 

time과 timeEnd에 같은 타이머 이름을 주어야 정상작동함.

- 코드 수행 시간 확인

 

 

 

 

 

 

 

 

---

 

 

REFERENCE

Console.log() - Web API | MDN

console.count() - Web API | MDN