console.log()와 console.dir(), 무엇이 다른가?
JavaScript 개발 중 콘솔에 객체를 출력할 때 console.log()와 console.dir()은 비슷해 보이지만, 실제 출력 방식에는 명확한 차이가 있습니다.
console.log(): toString 표현을 출력
console.log() 메서드는 전달된 객체의 toString() 표현을 화면에 표시합니다. 즉, 객체가 문자열로 변환된 형태 그대로 출력되기 때문에, DOM 요소나 복잡한 객체의 경우 내부 구조를 자세히 확인하기 어려울 수 있습니다.
console.dir(): 속성의 인터랙티브 목록을 표시
반면 console.dir() 메서드는 지정한 JavaScript 객체의 속성(properties)을 인터랙티브 목록으로 표시합니다.
출력 결과는 계층적(hierarchical) 구조로 나타나며, 각 항목 옆의 삼각형(디스클로저 트리) 아이콘을 클릭하면 하위 객체(child objects)의 내용을 펼쳐서 확인할 수 있습니다.
언제 어떤 것을 사용해야 할까?
- console.log(): 값이나 문자열 등 단순 정보를 빠르게 확인할 때 적합합니다.
- console.dir(): DOM 요소나 깊이 있는 객체의 내부 속성과 구조를 탐색적으로 살펴볼 때 유용합니다.
특히 브라우저 개발자 도구에서 DOM 요소를 다룰 때, console.log(element)는 HTML 태그 형태로 출력되지만 console.dir(element)는 해당 요소의 JavaScript 속성과 메서드를 객체 형태로 보여주므로 디버깅 시 큰 차이를 체감할 수 있습니다.