JavaScript의 인덱싱된 컬렉션이란?
JavaScript에서 인덱싱된 컬렉션(Indexed Collection)이란 각 요소에 숫자 인덱스가 부여되어 있어, 인덱스 값을 통해 개별 요소에 직접 접근할 수 있는 자료구조를 말합니다.
JavaScript에서 대표적인 인덱싱된 컬렉션은 바로 배열(Array)입니다. 배열은 0부터 시작하는 인덱스를 사용하며, arr[0], arr[1]처럼 대괄호 표기법으로 원하는 위치의 요소에 손쉽게 접근할 수 있습니다.
배열의 주요 특징
- 인덱스는 항상 0부터 시작합니다.
length속성으로 배열의 전체 길이를 확인할 수 있습니다.forEach,map,filter등 다양한 내장 메서드로 요소를 순회하고 조작할 수 있습니다.
인덱싱된 컬렉션 구현 예제
다음은 버튼을 클릭하면 배열을 생성하고, 각 요소를 인덱스와 함께 화면에 출력하는 전체 코드입니다.
예제 코드
<!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;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Indexed collections in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to create and display the array</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
let arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
resEle.innerHTML += `arr[${index}] = ${item} <br>`;
});
});
</script>
</body>
</html>코드 설명
[1, 2, 3, 4, 5]형태의 배열 리터럴로 배열을 생성합니다.forEach()메서드를 사용해 배열의 모든 요소를 순회하며, 콜백 함수의 두 번째 매개변수인index로 현재 요소의 인덱스를 받아옵니다.- 템플릿 리터럴을 활용해
arr[인덱스] = 값형태로 결과 영역에 출력합니다.
실행 결과
위 코드를 실행하면 아래와 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 배열의 각 요소가 인덱스와 함께 아래와 같이 출력됩니다.
이처럼 JavaScript의 배열은 인덱스 기반으로 요소에 접근할 수 있는 강력한 인덱싱된 컬렉션이며, forEach 같은 반복 메서드와 함께 사용하면 데이터를 손쉽게 탐색하고 표시할 수 있습니다.