JavaScript에서 객체 배열을 화면에 출력하려면 JSON.stringify() 메서드를 사용하는 것이 가장 간단하고 효과적인 방법입니다. 이 메서드는 자바스크립트 객체나 배열을 문자열 형태의 JSON으로 변환해 주기 때문에, 복잡한 데이터 구조도 손쉽게 확인할 수 있습니다.
JSON.stringify() 기본 문법
JSON.stringify() 메서드는 세 가지 매개변수를 받을 수 있습니다.
- value: 문자열로 변환할 객체 또는 배열 (필수)
- replacer: 특정 속성만 필터링하거나 값을 변환하는 함수 또는 배열 (선택)
- space: 들여쓰기에 사용할 공백 수 또는 문자열로, 출력 결과의 가독성을 높여 줍니다 (선택)
예제 코드
아래 예제는 날짜(date)와 값(value)으로 구성된 객체 배열을 JSON.stringify()를 사용해 웹 페이지에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<pre id="test"></pre>
<script>
var data = [{
date: new Date(2017, 11, 25),
value: 10
}, {
date: new Date(2017, 11, 30),
value: 20
}];
document.getElementById('test').innerHTML = JSON.stringify(data, null, 4);
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 배열의 각 객체가 아래와 같이 보기 좋게 정렬되어 출력됩니다.
[
{
"date": "2017-12-24T18:30:00.000Z",
"value": 10
},
{
"date": "2017-12-29T18:30:00.000Z",
"value": 20
}
]
세 번째 인자인 space 값에 4를 지정했기 때문에 각 항목이 4칸씩 들여쓰기 되어 가독성이 크게 향상된 것을 확인할 수 있습니다. 만약 space 값을 생략하면 모든 내용이 한 줄로 압축되어 출력되므로, 디버깅이나 로그 확인 시에는 들여쓰기 옵션을 함께 사용하는 것을 추천합니다.