JSON 배열은 자바스크립트의 배열과 매우 유사한 구조를 가지고 있습니다. JSON에서 배열은 대괄호([])로 표현되며, 문자열, 숫자, 불리언, 객체 등 다양한 타입의 값을 요소로 포함할 수 있습니다. 이 글에서는 자바스크립트 객체 내부에 JSON 배열을 정의하고, 실제로 접근하여 활용하는 방법을 예제와 함께 살펴보겠습니다.
JSON 배열의 기본 구조
다음은 자바스크립트 객체 안에 JSON 스타일의 배열을 담은 가장 기본적인 예시입니다. sports 속성에는 네 개의 운동 종목이 문자열 배열로 저장되어 있습니다.
let obj = {
name:'Rohan',
sports : ['cricket','Football','volleyball','hockey']
}이처럼 JSON 배열은 객체의 속성값으로 자연스럽게 포함될 수 있으며, 데이터를 그룹화하고 관리하는 데 매우 유용합니다.
예제: 버튼 클릭으로 JSON 배열 출력하기
아래는 버튼을 클릭하면 JSON 배열에 저장된 모든 요소를 화면에 출력하는 완전한 HTML 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JSON arrays</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to access JSON array
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let obj = {
name:'Rohan', sports : ['cricket','Football','volleyball','hockey']
}
document.querySelector(".Btn").addEventListener("click", () => {
obj.sports.forEach(item=>{
sampleEle.innerHTML += item + '<br>';
})
});
</script>
</body>
</html>코드 동작 원리
- 객체 정의:
obj객체의sports속성에 JSON 형태의 문자열 배열을 저장합니다. - 이벤트 등록:
addEventListener를 사용해 'CLICK HERE' 버튼의 클릭 이벤트를 감지합니다. - 배열 순회:
forEach()메서드로sports배열의 각 요소를 하나씩 순회합니다. - 결과 출력:
innerHTML에 각 항목과 줄바꿈 태그(<br>)를 추가해 화면에 표시합니다.
출력 결과
코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
여기서 'CLICK HERE' 버튼을 클릭하면 sports 배열에 저장된 cricket, Football, volleyball, hockey가 아래와 같이 한 줄씩 순서대로 출력됩니다.
마무리
JSON 배열은 자바스크립트에서 데이터를 효율적으로 관리할 수 있는 강력한 도구입니다. 위 예제처럼 forEach()를 활용하면 배열의 모든 요소를 손쉽게 순회하며 처리할 수 있습니다. 이 개념은 API 응답 데이터를 다루거나 목록을 렌더링하는 등 실무에서도 매우 자주 활용되므로, 반드시 익혀두는 것이 좋습니다.