JavaScript로 JSON을 예쁘게 출력하는 방법 완벽 가이드

JSON은 JavaScript Object Notation의 약자로, 자바스크립트 객체 표기법을 의미합니다. 바로 이러한 이유 때문에 JSON.stringify() 메서드에는 예쁘게 출력하는(pretty-printing) 기능이 기본적으로 내장되어 있습니다.

핵심은 JSON.stringify()의 세 번째 인수입니다. 이 인수에 숫자를 전달하면 해당 숫자만큼의 공백으로 들여쓰기를 적용해 가독성이 뛰어난 형태로 JSON을 출력할 수 있습니다.

1. 자바스크립트 객체를 예쁘게 출력하기

다음과 같이 객체를 선언한 후, 세 번째 인수에 4를 넣어 공백 4칸 들여쓰기로 출력해 보겠습니다.

let a = {
    name: "A",
    age: 35,
    address: {
        street: "32, Baker Street",
        city: "Chicago"
    }
}
console.log(JSON.stringify(a, null, 4))

실행 결과

{
    "name": "A",
    "age": 35,
    "address": {
        "street": "32, Baker Street",
        "city": "Chicago"
    }
}

2. JSON 문자열을 예쁘게 출력하기

위 예제에서는 자바스크립트 객체를 사용했습니다. JSON 문자열도 동일한 방식으로 처리할 수 있지만, 먼저 JSON.parse()를 사용해 문자열을 자바스크립트 객체로 변환(parse)해야 한다는 점에 유의하세요.

let jsonStr = '{"name":"A","age":35,"address":{"street":"32, Baker Street","city":"Chicago"}}'
console.log(JSON.stringify(JSON.parse(jsonStr), null, 2))

실행 결과

{
  "name": "A",
  "age": 35,
  "address": {
    "street": "32, Baker Street",
    "city": "Chicago"
  }
}

정리

JSON을 보기 좋게 출력하는 방법은 매우 간단합니다. 핵심만 요약하면 다음과 같습니다.

• 객체인 경우: JSON.stringify(obj, null, 들여쓰기_숫자)
• 문자열인 경우: JSON.stringify(JSON.parse(jsonStr), null, 들여쓰기_숫자)로 파싱 후 출력
• 세 번째 인수는 공백 개수(예: 2, 4) 또는 탭 문자('\t')를 지정할 수 있습니다.

이 방법을 활용하면 디버깅 시 콘솔 로그나 화면에 JSON 데이터를 훨씬 읽기 쉬운 형태로 표시할 수 있습니다.