JavaScript의 array.entries() 메서드는 배열의 인덱스(key)와 값(value)을 쌍으로 묶은 Array Iterator 객체를 반환합니다. 이 객체는 for...of 문이나 스프레드 연산자와 함께 사용하여 배열 요소를 순회할 때 유용하게 활용됩니다.
문법(Syntax)
array.entries()
entries() 메서드는 매개변수를 받지 않으며, 호출 즉시 새로운 Array Iterator 객체를 반환합니다. 각 반복 항목은 [인덱스, 값] 형태의 배열입니다.
예제 1: 숫자 배열에서 key/value 쌍 출력하기
아래 예제에서는 숫자 배열에 entries()를 적용해 인덱스와 값을 함께 출력하고, 버튼 클릭 시 특정 값(550)이 배열에 존재하는지 확인하는 코드도 함께 살펴봅니다.
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<p>key-value 쌍 중 550과 같은 점수가 있는지 확인...</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
var res = pointsArr.entries();
for (val of res) {
document.getElementById("test").innerHTML += val + "<br>";
}
function pointsFunc(points) {
return points == 550;
}
function display() {
document.getElementById("test").innerHTML = pointsArr.some(pointsFunc);
}
</script>
</body>
</html>실행 결과
“Result” 버튼 클릭 후 −
초기 화면에는 0,10, 1,20, 2,30처럼 인덱스와 값이 쌍으로 출력되며, “Result” 버튼을 클릭하면 some() 메서드가 실행되어 550이라는 값이 배열에 없으므로 false가 표시됩니다.
예제 2: 문자열 배열과 slice() 조합하기
다음 예제는 자동차 종류 문자열 배열에 entries()를 적용한 뒤, 버튼 클릭 시 slice() 메서드로 일부 요소를 잘라내어 출력하는 방식입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Car Variant</h2>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
var res = car.entries();
for (val of res) {
document.getElementById("test").innerHTML += val + "<br>";
}
function display() {
document.getElementById("test").innerHTML = "일부 요소를 자른 배열 = " + car.slice(1,4);
}
</script>
</body>
</html>실행 결과
“Result” 버튼 클릭 후 −
버튼을 클릭하면 인덱스 1부터 3까지의 요소인 Convertible, SUV, AUV가 추출되어 화면에 표시됩니다.
정리
array.entries()는 인덱스와 값을 쌍으로 갖는 Array Iterator 객체를 반환한다.for...of문으로 간편하게 [인덱스, 값] 형태의 데이터를 순회할 수 있다.- 반환된 Iterator는 지연 평가(lazy evaluation) 방식으로 동작하므로 대용량 배열 처리에도 효율적이다.
- 유사한 메서드로
keys()(인덱스만 반환)와values()(값만 반환)가 있다.