[JS] console.dir과 console.log의 차이

console.log는 JavaScript에서 메시지나 변수의 값을 콘솔에 출력하는 함수이다.

 

console.dir은 JavaScript에서 객체의 속성과 구조를 트리 형태로 콘솔에 출력하는 함수이다.

dir은 directory의 약자로, 중첩된 객체나 복잡한 데이터를 파악하고자 할 때 쓰면 좋다.

 

 

 

예제 코드:

const person = {
    name: "John",
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};

 

이걸 각각 console.log와 console.dir을 이용해서 출력해보자.

 

 

 

 

1. console.log(person)

 

• 객체를 문자열 형태로 출력한다. 
• 객체의 구조를 쉽게 파악하기 어렵다.
• 중첩된 객체의 경우 모든 속성을 한눈에 보기 불편하다. 
  
  

 

 

 

2. console.dir(person)

 

 

 

 

 

• 객체를 트리 구조로 출력한다. 객체의 속성, 값을 계층적으로 볼 수 있다.
• console.dir은 두 번째 매개변수로 깊이 옵션을 받을 수 있는데, 객체를 몇단계까지 재귀적으로 탐색할지를 결정하는 옵션이다. 기본값은 2이다. 
• 예시: console.dir(person, {depth:1})  ---> 객체의 첫번째 수준까지만 출력한다.