JavaScript에서 연관 배열(Associative Array)은 인덱스 번호 대신 사용자가 직접 정의한 키(key)를 사용하는 객체를 의미합니다. 쉽게 말해, 일반 배열처럼 0, 1, 2 같은 숫자 인덱스로 접근하는 것이 아니라 'Name', 'Age'와 같은 문자열 키로 값을 저장하고 조회할 수 있는 자료구조입니다.
연관 배열의 특징
- JavaScript에서 연관 배열은 사실상 객체(Object)와 동일하게 동작합니다.
- 일반 배열과 달리
length속성을 제공하지 않습니다. - 일반적인
for루프로는 순회할 수 없으며,for...in문이나Object.keys()메서드를 사용해야 합니다.
JavaScript 연관 배열 예제 코드
다음은 버튼을 클릭하면 연관 배열을 생성하고, 키와 값을 화면에 출력하는 예제입니다.
<!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 연관 배열</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 연관 배열이 생성되고 결과가 표시됩니다.
</h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let arr = { Name: "Rohan", Class: 9, Age: 16 };
for (i in arr) {
resEle.innerHTML += "Key = " + i + " : Value = " + arr[i] + "<br>";
}
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 연관 배열의 키와 값이 아래와 같이 출력됩니다.
정리
연관 배열은 별도의 문법이라기보다 객체 리터럴을 배열처럼 활용하는 방식에 가깝습니다. 위 예제에서 볼 수 있듯이 { Name: "Rohan", Class: 9, Age: 16 } 형태로 키-값 쌍을 정의하고, for...in 루프를 통해 각 키와 해당 값을 순회하며 출력할 수 있습니다. 만약 키 목록만 필요하다면 Object.keys(arr), 값만 필요하다면 Object.values(arr)를 사용하는 것도 좋은 방법입니다.