console.로그를 알기 쉽게 하다

배경.

js/ts에서 개발
"console.log의 값이 묻혀서 알 수가 없네~;"
"이 값이 뭐였지..."
이런 일이 자주 일어나고 최근에 좋은 대책이 떠올라 공유(이미 나왔으면 떳떳하지 못함)

전제 조건

여느 때와 같다

const userData = {
  name: 'console太郎',
  age: 2021,
  type: 'log'
}

console.log(userData)

수치만 constore에 출력되어 따라잡기 어려워요...
미묘한 변수명도 생겼죠.
배열 버전

console.log('userData: ', userData)

읊다, 읊조리다그래!!
근데 디버깅할 때마다 때리는 거 싫어하잖아...
더 좋은 방법 없을까...

해결책

추천하다

console.log({userData})

오!!기술량도 적어서 알기 쉽다!
괜찮네!!!
이런 느낌이야.

해설

ES6에서 js까지 대상 값을 설정할 때key와 변수 이름이 일치할 때 생략할 수 있습니다.

const name = 'console太郎';
const obj = {
-  name: name,
+  name,
}

객체 정렬 시 Tips 표시

JSON 등에서 자주 사용하는[{}, {}, {}] 형식의 배열.
어떤 데이터를 확보했는지 확인하고 싶은 상황이 있다고 생각해요.
그때console.table 사용하면 시각적으로 쉽게 알 수 있는 추천이에요.

const obj = [
    {
        "name": "1960",
        "富山県": 1032614,
        "滋賀県": 842695
    },
    ...
    {
        "name": "2045",
        "富山県": 817398,
        "滋賀県": 1262924
    }
]
console.table(obj)

테이블의 열 이름을 눌러도 정렬할 수 있습니다!