[JS] Array 오브젝트의 이터레이터 오브젝트 생성을 알아보자

Array.prototype.entries()

Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다.

배열의 엘리먼트를 [key, value] 형태로 변환한다.

 

• for-of문으로 전개할 수 있다.
• 이터레이터는 다시 반복할 수 없다.

 

Array 이터레이터 오브젝트는 [key, value] 형태로, 배열의 인덱스가 key가 되고 엘리먼트 값이 value가 된다. 끝까지 읽은 이터레이터 오브젝트는 다시 읽을 수 없고, 전부 읽고 나면 undefined가 뜬다. 그래서 아래 코드에서 한 번 더 콘솔을 찍으면 undefined가 찍힌다.

const iterator = ["A", "B"].entries();
console.log(iterator.next().value); // [0, 'A']
console.log(iterator.next().value); // [1, 'B']

iterator를 콘솔에 찍어보면 next()가 있고, 그렇기 때문에 해당 메서드를 쓸 수 있다는 걸 알 수 있다.

 

근데 next()를 쓰면 한 번씩만 끊어져서 순회하기 때문에 전개하기는 불편하다.

이 때 for... of 구문을 쓰면 인덱스:값 형태로 반환되어 사용하기가 편하다.

const iterator = ["A", "B"].entries();
for (const property of iterator) {
    console.log(property)
} 

// [0, 'A']
// [1, 'B']

const iterator = ["A", "B"].entries();
for (const [k, v] of iterator) {
    console.log(`${k}: ${v}`)
} 

// 0: A
// 1: B

이래서 위와 같이 분할 할당 형태로 많이 사용한다.

---

Array.prototype.keys()

Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다.

entries()와 같은데 [key, value] 형태에서 key만 반환하며 배열의 인덱스가 key가 된다.

 

아래 코드처럼 생성한 Array 이터레이터 오브젝트는 [key] 형태로, value에 인덱스가 설정된다.

const iterator = ["A", "B"].keys();
console.log(iterator.next()) // {value: 0, done: false}
console.log(iterator.next()) // {value: 1, done: false}
console.log(iterator.next()) // {value: undefined, done: true}

 

keys도 for... of 구문으로 전개된다.

key만 설정돼서 값이 하나만 나와 아까처럼 분할 할당을 하지 않아도 된다.

const iterator = ["A", "B"].keys();
for (const property of iterator) {
    console.log(property)
}

// 0
// 1

---

Array.prototype.values()

Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다.

entries(), keys()와 같은데 [key, value] 형태에서 value만 반환하며 배열의 엘리먼트 값이 value가 된다.

 

• 값이 연동된다.

 

위 메서드들과 같이 next() 메서드로 전개하면 밸류값이 잘 나온다.

const iterator = ["A", "B"].values();
console.log(iterator.next()) // {value: 'A', done: false}
console.log(iterator.next()) // {value: 'B', done: false}
console.log(iterator.next()) // {value: undefined, done: true}

 

for... of 구문으로 전개해도 동일하다.

const iterator = ["A", "B"].values();
for (const property of iterator) {
    console.log(property)
}

// A
// B

 

위에서 값이 연동된다고 썼는데, Array 이터레이터 오브젝트에서 배열의 메모리 주소를 참조하기 때문에 값이 연동된다.

const list = ["A", "B"];
const iterator = list.values();
list[0] = "연동";

console.log(iterator.next()); // {value: '연동', done: false}
console.log(iterator.next()); // {value: 'B', done: false}