JSON(JavaScript Object Notation)은 데이터를 키-값(key-value) 쌍의 형태로 저장하고 전송하기 위한 경량의 데이터 교환 형식입니다. JavaScript에서는 객체 리터럴 문법을 사용하여 매우 간단하게 JSON 객체를 만들 수 있습니다.
JSON 객체 생성 예제
다음은 JavaScript에서 JSON 객체를 생성하고, 버튼 클릭 시 객체의 모든 키와 값을 화면에 출력하는 완전한 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript의 JSON 객체</h1>
<div class="sample"></div>
<div style="color: green;" class="result">JSON OBJECT <br></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 JSON 객체를 생성하고 결과를 화면에 표시합니다
</h3>
<script>
let resEle = document.querySelector(".result");
let obj = {
firstName:'Rohan',
lastName: 'Sharma',
Age:14,
}
document.querySelector(".Btn").addEventListener("click", () => {
for(i in obj){
resEle.innerHTML += 'key = '+i+' value = ' + obj[i] + '<br>';
}
});
</script>
</body>
</html>코드 설명
이 코드의 핵심 부분을 살펴보겠습니다.
1. 객체 리터럴로 JSON 객체 정의
let obj = { ... } 구문을 통해 firstName, lastName, Age라는 세 개의 속성을 가진 객체를 생성합니다. 중괄호 {} 안에 키와 값을 콜론(:)으로 연결하여 작성하면 됩니다.
2. 이벤트 리스너 등록
addEventListener("click", ...)를 사용해 버튼이 클릭될 때 실행될 함수를 등록합니다.
3. for...in 반복문으로 출력
for(i in obj) 반복문을 사용하면 객체의 모든 키를 순회할 수 있으며, obj[i]로 해당 키의 값에 접근합니다. 각 키와 값은 <br> 태그로 줄바꿈되어 화면에 표시됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 아래와 같이 JSON 객체의 키와 값이 순서대로 출력됩니다.
마무리
이처럼 JavaScript에서 JSON 객체를 만드는 것은 객체 리터럴 문법만 알면 누구나 쉽게 할 수 있습니다. 실무에서는 JSON.stringify()로 객체를 문자열로 변환하거나, JSON.parse()로 문자열을 객체로 변환하는 방법도 함께 익혀두면 API 통신 등 다양한 상황에서 유용하게 활용할 수 있습니다.