JavaScript에서 생성한 객체의 내용을 웹 페이지에 출력하려면 아래 예제 코드를 참고하세요. 이 예제에서는 new 키워드를 사용하여 객체를 생성한 후, 각 속성에 값을 할당하고 화면에 출력합니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
var dept = new Object();
dept.employee = "Amit";
dept.department = "Technical";
dept.technology = "C++";
document.getElementById("test").innerHTML =
dept.employee + " is working on " + dept.technology + " technology.";
</script>
</body>
</html>
코드 설명
new Object()를 사용하여 빈 객체 dept를 생성한 뒤, 점 표기법(dot notation)으로 employee, department, technology라는 세 개의 속성에 값을 추가했습니다.
document.getElementById("test")는 id가 test인 HTML 요소를 가져오고, innerHTML 속성에 문자열을 대입하여 해당 요소의 내용을 화면에 표시합니다.
실행 결과
Amit is working on C++ technology.
참고: 다른 출력 방법
객체 전체의 내용을 한 번에 확인하고 싶다면 JSON.stringify()나 console.log()를 활용할 수도 있습니다.
console.log(dept); document.write(JSON.stringify(dept));
console.log()는 브라우저 개발자 도구 콘솔에 객체 구조를 그대로 보여 주며, JSON.stringify()는 객체를 JSON 형식의 문자열로 변환해 페이지에 직접 출력할 때 유용합니다.