[JavaScript] 이터레이터(Iterator) & 이터러블(Iterable)

728x90

SMALL

1. 이터레이터(Iterator)

반복 처리가 가능한 객체
내부적으로 next() 메서드를 가지며 next()메서드는 IteratorResult 객체 value와 done이라는 프로퍼티를 가진 객체를 반환함

2. 이터러블(Iterable)

반복이 가능한 객체
Symbol.Iterator 메서드가 있어야 하며 Symbol.Iterator는 이터레이터 객체를 반환해야 함
String, Array, Map, Set...등 객체
for 문법으로 반복이 가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이터러블</title>
</head>
<body>
    <h2>이터러블</h2>
    <script>
        const arr = [1,2,3,4,5] 
        console.log(arr.values())    // 배열의 각 요소에 대한 값을 포함하는 새로운 배열 이터레이터(iterator)를 반환
        console.log(arr.entries())  // 각 요소에 대한 인덱스와 값을 포함하는 새로운 배열 이터레이터(iterator)를 반환
        console.log(arr.keys())    // 배열의 각 요소에 대한 인덱스를 포함하는 새로운 배열 이터레이터(iterator)를 반환

        const iterator = arr.values()   // 값에 대한 이터레이터
        while(true){
            const item = iterator.next()
            if(item.done) break;
            console.log(item.value)
        }
        console.log('-----')
        for(let item of arr){    
            console.log(item)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이터러블2</title>
</head>
<body>
    <h2>이터러블2</h2>
    <script>
        function iter(){
            let index = 0
            let data = [1,2,3,4]
            return {
                next(){
                    if(index < data.length){      // 인덱스가 arr의 길이보다 작을때까지만 done:false
                        return {value:data[index++], done:false}  // index의 값이 1씩 증가
                    }else{
                        return {value:undefined, done:true}
                    }
                }
            }
        }
        let i = iter()
        console.log(i.next())  // value:1, done:false
        console.log(i.next())  // value:2, done:false
        console.log(i.next())  // value:3, done:false
        console.log(i.next())  // value:4, done:false
        console.log(i.next())  // value:undefined, done:true
    </script>
</body>
</html>

MDN: Itreation

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols

Iteration protocols - JavaScript | MDN

ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, protocols(표현법들)도 추가되었습니다. 이 protocol 은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구현될 수 있습니다.

developer.mozilla.org

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] Spread 연산자( ... ) (0)	2023.04.20
[JavaScript] 제네레이터(Generator) (0)	2023.04.19
[JavaScript] 이벤트 전파(Event Propagation) - 방식, 전파 막는 방법 (0)	2023.04.19
[JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener), 이벤트 객체(Event Object) (0)	2023.04.19
[JavaScript] URL & URI - 정의, 차이점, URL의 이스케이프 처리와 디코딩 (0)	2023.04.19