console.log(), console.dir() 그리고 console.table()

우리의 친구, 우리의 벗 console.log()...! 

console.log()로 데이터가 잘 들어왔는지, 혹은 생성됐는지 확인하는 용도로 쓴다.

그리고 console.dir()로는 객체를 보다 생생하게 볼 수 있다. 

 

stack overflow에 따르면 기본적으로 console.log()와 console.dir()의 역할은 다음과 같다. 

 

1. console.log() 
: 인자를 string으로 찍어준다. 

2. console.dir() 
: 탐색할 수 있는 트리(navigable tree)를 보여준다. 

3. console.table()
: 테이블 형태로 자료를 보여주고, 탐색할 수 있는 트리를 그 아래에 출력한다. 

 

 

먼저 console.log()와 console.dir()의 차이점을 살펴보자.

스택오버플로우에서는 예시로 정규식을 콘솔에 출력했을 때를 들고 있다. 

 

 

하지만 크롬 브라우저는 이보다 많은 기능을 제공하는데, 대부분의 경우 log() 만으로도 트리를 출력해 준다. 배열을 출력해 보면 이러한 사실을 알 수 있다.

 

 

브라우저에서 저 트리를 탐색하며 prototype과 각종 프로퍼티, 메소드 등 많은 것들을 배웠다. 자바스크립트에서는 함수조차 객체이기에 모든 것들을 콘솔에 찍어보며 탐색하는 것이 살아있는 객체를 이리저리 뜯어볼 수 있는 길이다. 

 

여기까지는 알고 있었는데, 얼마 전 console.table() 을 처음 알게 되었다. (두둥🧐) 

메소드 이름 그대로 데이터를 테이블 형태로 보여준다. 

 

예시를 들기 위해 객체를 하나 만들어 보자. 참고로 유저 데이터는 Korean JSON에서 가져왔다. 유저 정보 외에도 posts, todos, comments 더미 데이터를 제공해준다. 

const user = {
    "id": 1,
    "name": "이정도",
    "username": "jd1386",
    "email": "lee.jungdo@gmail.com",
    "phone": "010-3192-2910",
    "website": "https://leejungdo.com",
    "province": "경기도",
    "city": "성남시",
    "district": "분당구",
    "street": "대왕판교로 160",
    "zipcode": "13525",
    "createdAt": "2019-02-24T16:17:47.000Z",
    "updatedAt": "2019-02-24T16:17:47.000Z"
 }

테이블 형태로 보여주기 때문에 훨씬 가독성이 좋아졌다. 그리고 테이블 아래의 Object를 클릭하면 console.dir()로 출력했을 때와 마찬가지로 트리를 탐색할 수 있기 때문에 일타이피라고 할 수 있다. 

 

개인적으로 console.table()로 가독성을 높이는데 가장 도움을 많이 받았던 것은 2차원 배열을 다룰 때였다. 

const arr = [['a','b'], ['c', 'd'], ['e', 'f'], ['g', 'h'], ['i', 'j']];

위와 같이 2차원 배열이 인덱스까지 한눈에 들어온다! 

 

객체 안에 중첩이 되어 있는 자료가 있을 때도 마찬가지로 유용하다. 콘솔의 table 열 간격은 원하는 대로 조정이 가능하다. 

 

 

📚 참고자료:

Korean JSON