JavaScript의 array.keys() 메서드는 배열의 키(인덱스)만을 담고 있는 배열 반복자(Array Iterator) 객체를 생성합니다. 이 메서드는 배열 자체의 값을 반환하는 것이 아니라, 각 요소의 인덱스 번호를 순회할 수 있는 반복자를 반환한다는 점이 특징입니다.
array.keys() 메서드의 기본 개념
keys() 메서드는 별도의 매개변수를 받지 않으며, 호출 즉시 반복자 객체를 반환합니다. 이 반복자는 for...of 문이나 전개 연산자(...)와 함께 사용하여 배열의 모든 인덱스를 손쉽게 순회할 수 있습니다.
예제 코드
다음은 array.keys() 메서드의 실제 동작을 확인할 수 있는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 배열 keys()</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 배열 keys()</h1>
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 배열의 키(인덱스)를 확인할 수 있습니다
</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = ["H", "E", "L", "L", "O"];
fillEle.innerHTML = arr;
arr = arr.keys();
document.querySelector(".Btn").addEventListener("click", () => {
fillEle.innerHTML = "";
for (let x of arr) {
fillEle.innerHTML += x + "<br>";
}
});
</script>
</body>
</html>코드 설명
위 예제의 핵심 로직을 단계별로 살펴보면 다음과 같습니다.
1. 배열 생성 및 화면 출력 – 문자열 요소 5개를 가진 배열 ["H", "E", "L", "L", "O"]를 만들고, 초기 상태 그대로 화면에 표시합니다.
2. 반복자 변환 – arr.keys()를 호출하여 배열을 키(인덱스)만 담은 반복자 객체로 변환합니다.
3. 버튼 클릭 시 순회 – 버튼을 클릭하면 for...of 루프가 반복자를 순회하며 각 인덱스 값(0, 1, 2, 3, 4)을 한 줄씩 화면에 출력합니다.
실행 결과
페이지를 처음 열면 원본 배열의 내용이 표시됩니다.
「클릭하세요」 버튼을 누르면 다음과 같이 배열의 키인 인덱스 번호만 출력됩니다.
참고 사항
keys()와 유사한 메서드로는 배열의 값을 순회하는 values(), 그리고 키-값 쌍을 함께 순회하는 entries()가 있습니다. 세 메서드 모두 ES6에서 도입되었으며, 최신 브라우저에서 폭넓게 지원됩니다. 희소 배열(sparse array)의 경우 빈 슬롯의 인덱스도 포함하여 순회한다는 점도 기억해 두면 유용합니다.