JavaScript의 values() 메서드는 배열의 각 인덱스에 저장된 값을 포함하는 새로운 Array Iterator(배열 반복자) 객체를 반환합니다. 이 반복자 객체는 next() 메서드를 사용해 배열의 요소를 하나씩 순차적으로 접근할 수 있게 해줍니다.
문법
arr.values()
values() 메서드는 별도의 매개변수를 받지 않으며, 원본 배열을 변경하지 않고 새로운 반복자 객체만 반환한다는 점이 특징입니다.
예제 1: 기본 사용법
다음은 버튼을 클릭하면 배열의 첫 번째 값을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<p>버튼을 클릭하면 값이 표시됩니다...</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
function display() {
var arr = ['p', 'q', 'r'];
var res = arr.values();
document.getElementById("test").innerHTML = res.next().value
}
</script>
</body>
</html>실행 결과
처음 화면에는 아래와 같이 버튼이 나타납니다.
“결과 보기” 버튼을 클릭하면 반복자의 next() 메서드가 반환한 첫 번째 값 'p'가 화면에 출력됩니다.
예제 2: 숫자 배열에서 값 가져오기
이번에는 숫자로 이루어진 배열에서 values() 메서드를 활용해 첫 번째 값을 가져오는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>랭킹 포인트</h2>
<p>클릭하면 포인트가 표시됩니다...</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
function display() {
var points = ['10', '20', '30', '40', '50'];
document.getElementById("test").innerHTML = (points.values()).next().value
}
</script>
</body>
</html>실행 결과
버튼이 표시된 초기 화면입니다.
“결과 보기” 버튼을 클릭하면 배열의 첫 번째 값인 '10'이 출력됩니다.
참고: for...of 문으로 전체 값 순회하기
values()가 반환하는 반복자는 이터러블 객체이므로, for...of 문과 함께 사용하면 배열의 모든 값을 손쉽게 순회할 수 있습니다.
const arr = ['a', 'b', 'c'];
for (const value of arr.values()) {
console.log(value);
}
// 출력: a → b → c이처럼 values() 메서드는 배열의 값을 하나씩 처리하거나 전체를 순회할 때 유용하게 활용할 수 있습니다.