자바스크립트 객체 값을 확인하는 4가지 방법

자바스크립트에서 객체를 화면에 표시하려면 다양한 방법이 있습니다. 여기서는 가장 자주 사용되는 몇 가지 방법을 자세히 설명하겠습니다.

console.log()를 이용한 디버깅

개발자가 자주 사용하는 console.log() 함수는 자바스크립트 객체를 콘솔에 표시합니다. 이 방법은 빠르고 간단하지만 사용자에게는 보이지 않습니다.

const person = { name: "John", age: 30 };
console.log(person);

JSON.stringify() 함수를 활용한 변환

JSON은 JavaScript Object Notation의 약자로, 데이터를 쉽게 교환할 수 있는 형식입니다. JSON.stringify() 함수를 사용하면 자바스크립트 객체를 문자열로 변환할 수 있습니다.

const person = { name: "John", age: 30 };
const stringPerson = JSON.stringify(person);
document.write(stringPerson);

for...in 루프로 속성 열거하기

for...in 문은 객체의 모든 열거 가능한 속성을 순회합니다. 이를 활용해 객체의 각 속성을 따로따로 화면에 출력할 수 있습니다.

const person = { name: "John", age: 30 };
for (let key in person) {
    document.write(`${key}: ${person[key]}<br>`);
}

자바스크립트를 활용한 DOM 조작

DOM은 Document Object Model의 약자로, 웹 페이지의 구조를 나타냅니다. 자바스크립트를 사용하면 DOM 요소를 생성하고 수정하여 객체를 화면에 표시할 수 있습니다.

const person = { name: "John", age: 30 };
const div = document.createElement('div');
div.innerHTML = `이름: ${person.name}, 나이: ${person.age}`;
document.body.appendChild(div);

이러한 방법들은 각각의 사용 케이스와 필요에 따라 유용하게 활용될 수 있습니다. 따라서 여러분의 상황에 가장 적합한 방법을 선택해 활용하시면 좋습니다.