JavaScript에서 객체(object)의 내용을 확인하고 싶다면 for...in 반복문을 활용하는 것이 가장 기본적인 방법입니다. 아래 예제 코드는 객체가 가진 모든 속성(키)과 해당 값들을 하나씩 순회하여 문자열로 조합한 뒤, 알림 창(alert)을 통해 화면에 출력합니다.
예제
<!DOCTYPE html>
<html>
<body>
<script>
function display(obj) {
var res = '';
for (var a in obj) {
res += a + ': ' + obj[a] + '\n';
}
alert(res);
}
var newObject = {'Amit': 70778, 'Sachin': 87547, 'Saurav': 57535};
display(newObject);
</script>
</body>
</html>
코드 설명
위 코드의 동작 원리를 단계별로 살펴보겠습니다.
1. display() 함수 정의
display() 함수는 출력할 객체를 매개변수로 전달받습니다. 함수 내부에는 결과를 담을 빈 문자열 변수 res가 선언되어 있습니다.
2. for...in 반복문으로 속성 순회
for...in 문은 객체의 열거 가능한 속성 이름을 하나씩 꺼내 변수 a에 할당합니다. 그리고 obj[a] 표기법으로 해당 속성의 값을 가져와 '키: 값' 형태의 문자열을 만들고, 개행 문자(\n)로 구분하여 res에 계속 누적합니다.
3. alert()로 최종 출력
반복이 끝나면 alert(res)를 호출하여 누적된 전체 문자열을 알림 창에 한 번에 표시합니다.
실행 결과
이 코드를 브라우저에서 실행하면 다음과 같이 객체의 키와 값이 줄바꿈되어 나타납니다.
Amit: 70778 Sachin: 87547 Saurav: 57535
참고: 더 편리한 대안들
실무에서는 디버깅 목적으로 객체를 출력할 때 console.log(obj)를 사용하는 것이 더 일반적입니다. 콘솔에서는 객체 구조를 트리 형태로 펼쳐서 볼 수 있어 복잡한 중첩 객체도 쉽게 확인할 수 있습니다. 또한 JSON.stringify(obj)를 사용하면 객체를 JSON 문자열로 변환하여 원하는 위치에 출력할 수도 있습니다.