[ES6] 배열 메소드 : entries(), keys(), values()

이번 글에서는 ES6에서 지원하는 다소 특이한 메소드인 entries(), keys(), values()에 대해서 살펴보도록 하겠습니다.

 

1. Array.prototype.entries()

• entries() 메서드는 배열의 각 인덱스에 대한 key-value 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다.

[Iterator란?]

Iterator는 컬렉션의 항목에 한 번에 하나씩 액세스 하면서 현재 위치를 추적하는 객체입니다. 두 개의 속성 (value, done)을 반환하는 next() 메서드를 지원하며 객체의 Iterator protocol을 구현합니다. 시퀀스의 마지막 값이 산출된 후 done 값은 true를 반환합니다. 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

[문법]

arr.entries();

[예제]

entries()와 iterator 정의만으로는 잘 와 닿지 않으므로 예제를 통해서 살펴보겠습니다.

var arr = ['a', 'b', 'c'];
var iterator = arr.entries();

for (x of iterator) {
  console.log(x);
}
// output: 
// [0, "a"]
// [1, "b"]
// [2, "c"]

위와 같이 entries()를 통해서 반환되는 값은 [index, "value"] 조합의 iterator 객체를 생성합니다.

 

✅ Iterator 객체는 아래와 같이 next()를 사용하여 순차적으로 값을 도출할 수 있습니다. 모든 값을 순환한 후에는 done: true가 되며 value는 undefined를 return 합니다.

var arr = ['a', 'b', 'c'];
var iterator = arr.entries();

console.log(iterator.next()); // {value: [0, "a"], done: false}
console.log(iterator.next()); // {value: [0, "b"], done: false}
console.log(iterator.next()); // {value: [0, "c"], done: false}
console.log(iterator.next()); // {value: undefined, done: true}

 

✅ for of를 섞어서 사용하면 sequence가 추적되는 것을 확인할 수 있습니다.

var arr = ['a', 'b', 'c'];
var iterator = arr.entries();

iterator.next();
iterator.next();

for (x of iterator) {
 console.log(x);
}
// output: iterator가 2번 진행한 후의 값만 출력됩니다.
// [2, "c"]

// iterator는 for of loop를 통해 이미 마지막까지 진행된 상태이므로 done: true를 반환합니다.
console.log(iterator.next()); // {value: undefined, done: true}

 

2. Array.prototype.keys()

• keys() 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환합니다.

[문법]

arr.keys()

[예제]

entries()의 경우와 동일한 방식으로 동작하며 차이점은 배열의 인덱스를 값으로 하는 Iterator를 생성한다는 점입니다.

var arr = ['a', 'b', 'c'];
var iterator = arr.keys();
console.log(iterator.next()); // {value: 0, done: false}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

 

3. Array.prototype.values()

• values() 메서드는 배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환합니다.

[문법]

arr.values();

[예제]

마찬가지로 entries()와 동일한 동작을 하며, 차이점은 반환하는 값이 배열의 값이라는 점입니다.

var arr = ['a', 'b', 'c'];
var iterator = arr.values();
console.log(iterator.next()); // {value: "a", done: false}
console.log(iterator.next()); // {value: "b", done: false}
console.log(iterator.next()); // {value: "c", done: false}
console.log(iterator.next()); // {value: undefined, done: true}

 

맺음말

Entries(), value(), keys()의 경우 정확히 언제 필요할지 딱히 와 닿는 게 아직은 없네요... ^^ 필요한 상황이 떠오르게 되면 업데이트하겠습니다. 이번 글로 ES6에서 새로 지원하는 Array Method 들에 대한 정리는 마무리 합니다. ES5의 method 들에 비해 상대적으로 확 마음에 와 닿지 않는 게 사실이긴 합니다만, 일단 알아두면 언제고 필요한 경우가 생길 것이라고 생각됩니다. 참고로 아쉽게도 ES6의 Array Method 들은 IE11에서는 지원되지 않으니 참고하시기 바랍니다.