자바스크립트의 array.entries() 메서드는 배열의 각 요소를 <인덱스(키), 값> 형태의 키/값 쌍으로 담은 배열 반복자(Array Iterator) 객체를 반환합니다. 이 반복자는 for...of 문이나 스프레드 연산자 등과 함께 활용하면 인덱스와 값을 동시에 순회할 때 매우 유용합니다.
주요 특징
- 반환값: Array Iterator 객체
- 항목 형태: 각 항목은 [인덱스, 요소] 형태의 배열로 제공됩니다.
- 원본 보존: 메서드 호출 시 원본 배열은 변경되지 않습니다.
예제 코드
다음은 array.entries() 메서드의 실제 동작을 확인할 수 있는 예제입니다.
<!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: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Array entries()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 배열 요소가 키/값 쌍 형태로 표시됩니다</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ["cow", "bull", "lion", "tiger", "sheep"];
fillEle.innerHTML = arr;
var entries = arr.entries();
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = "";
for (let x of entries) fillEle.innerHTML += x + "</br>";
});
</script>
</body>
</html>실행 결과
페이지를 처음 열면 원본 배열의 요소들이 그대로 화면에 출력됩니다.
이후 “CLICK HERE” 버튼을 클릭하면, 각 요소가 [인덱스, 값] 형태의 키/값 쌍으로 변환되어 한 줄씩 표시됩니다.
정리
array.entries() 메서드는 배열을 순회하면서 인덱스 정보까지 함께 필요로 할 때 유용한 도구입니다. Object.entries()와 함께 기억해 두면 객체와 배열 모두에서 키/값 기반 순회를 일관된 방식으로 처리할 수 있습니다.