console.log()와 console.dir()

들어가기에 앞서

모던 자바스크립트 Deep Dive를 정리하던 중 함수 객체 내부를 볼 때 console.dir() 메서드를 사용한다는 구문을 보고 의문이 들었다🧐 자스로 값을 찍어볼 때 매번 console.log()를 사용했기 때문에 console.dir()는 생소했기 때문이다(물론 분명 어디서 들었을 수도 있다. 내가 기억을 못할뿐..)

console.dir()의 console.log()와의 차이점을 비교해보며 완전한 자바스크립트 공부를 위해 정리하는 이번 포스트!

---

MDN에 정의된 console.dir()
console.dir()는 자바스크립트 객체의 모든 속성을 콘솔에서 볼 수 있는 방법으로 출력된 결과는 자식 객체의 내용을 볼 수 있는 여닫는 삼각형과 함께 계층적인 목록으로 나타납니다.

MDN에 정의된 console.log()
console.log() 정적 메서드는 메시지를 콘솔에 출력합니다. 이 메시지는 선택적 대체 값을 포함한 단일 문자열이거나 더 많은 JavaScript 객체중 하나

console.log()

• HTML과 같은 형태의 트리 구조 출력
• 태그 내용을 출력(객체)
• 코드를 출력(함수)

console.dir()

• JSON 형태의 트리 구조 출력
• 태그 속성을 출력(객체)
• 속성을 출력(함수)
• DOM을 활용해 HTML 상세 속성까지 확인 가능함

function square(num) {
 	return num * num; 
}

console.log(square);

function square(num) {
 	return num * num; 
}  

console.dir(square);

console.log()와 console.dir()로 square 함수를 확인해볼 때 콘솔에 찍히는 값이 완전 다른 것을 확인할 수 있다.

DOM을 이용하여 HTML 상세 속성 확인하기

// console.log일 때 
console.log(document.body);

// console.dir()일 때
console.dir(document.body);

이렇게 console.dir()를 통해 HTML 요소 접근 결과를 출력할 수 있다!