자바스크립트 array.keys() 메서드란?
자바스크립트의 array.keys() 메서드는 배열의 각 인덱스(키) 값을 담고 있는 Array Iterator 객체를 반환합니다. 배열에 저장된 요소 자체가 아니라 요소의 위치(인덱스)만 필요할 때 특히 유용하게 사용됩니다.
반환된 이터레이터 객체는 for...of 루프와 함께 사용하여 인덱스 값을 하나씩 순회할 수 있습니다.
문법
array.keys()
이 메서드는 매개변수를 받지 않으며, 호출된 원본 배열은 변경되지 않습니다.
예제 1: 배열의 키(인덱스) 출력하기
다음 예제에서는 자동차 차종이 담긴 배열에 keys() 메서드를 적용하여 모든 인덱스를 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Car Variants</h2>
<p id="test"></p>
<script>
var arrStud = ["Crossover", "Convertible", "Hatchback", "SUV"];
var res = arrStud.keys();
for (val of res) {
document.getElementById("test").innerHTML += val + "<br>";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 배열 ["Crossover", "Convertible", "Hatchback", "SUV"]의 인덱스인 0, 1, 2, 3이 순서대로 출력됩니다.
예제 2: 버튼 클릭으로 키 표시하기
이번 예제에서는 버튼을 클릭하면 숫자 배열의 키(인덱스)만 표시되도록 구현했습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<p>Click the button to display only the keys</p>
<button onclick="display()">Result</button>
<p id="test"></p>
<script>
var pointsArr = [10, 20, 30, 40, 50, 60, 70, 80, 90, 1000];
document.getElementById("test").innerHTML = pointsArr;
function display() {
var res = pointsArr.keys();
for (val of res) {
document.getElementById("test").innerHTML += val + "<br>";
}
}
</script>
</body>
</html>실행 결과
위 화면에서 “Result” 버튼을 클릭하면 다음과 같이 배열의 인덱스가 표시됩니다.
핵심 정리
- array.keys()는 배열의 인덱스를 순회할 수 있는 Array Iterator 객체를 반환합니다.
for...of루프나 전개 연산자(...)와 함께 활용할 수 있습니다.- 메서드 호출 시 원본 배열은 변경되지 않습니다.
- 유사한 메서드로는 배열의 값을 반환하는
values(), 키-값 쌍을 반환하는entries()가 있습니다.