[JavaScript Core] 이터러블(iterable) 에 대해 알아보자

 

이번에는 이터러블(iterable) 에 대해 알아보도록 하겠습니다.

 

iterable 을 한국어로 번역하면, 반복 가능한 이라는 뜻으로, 배열을 일반화한 객체 입니다.

 

따라서, 이터러블을 어떻게 만들고, 어떻게 사용하는지 지금부터 알아보도록 합시다!

 

 

 

1. 이터러블(iterable)

 

let obj = {
    start: 1,
    end: 4,
	[Symbol.iterator]() {
    	return {
        	current: this.start,
            last: this.end,
            next() {
            	if(this.current <= this.last) {
                	return {
                        done: false,
                        value: this.current++
                    }
                    
                } else {
                	return {
                    	done: true
                    }
    			}
    		}
        }
    }
}

 

위의 코드가 이터러블을 선언한 것입니다.

 

먼저, 이터러블이 동작하기 시작할 때, 가장 먼저 실행되는 코드는 객체 속의 Symbol.iterator 메소드 입니다. 따라서, Symbol.iterator 메소드를 선언해주어야 합니다.

 

Symbol.iterator 가 실행된 후에는, 객체를 또 반환하게 되는데, 이 객체 속에 next 라는 메소드가 존재하야 합니다. 이터러블이 다음 동작을 수행할 때, next 메소드를 호출하기 때문이죠.

 

마지막으로, next 메소드는 정해진 형식의 객체를 반환하야 하는데, 객체 속에 done 과 value 프로퍼티가 존재해야 합니다. done 프로퍼티는 이터러블의 동작을 끝낼지 여부를 나타내고, value 프로퍼티는 말 그대로 내보낼 값을 의미합니다.

 

이터러블는 이런식으로 동작합니다. 조금 복잡하고 난해할 수 있지만, 차근차근 이해해보시길 바랍니다.

 

 
let str = "Hello, World!";

for(let char of str) {
	console.log(char); // H e l l o ,  W o r l d !
}

let iterator = str[Symnbol.iterator];

while(true) {
	let result = iterator.next();
    
	if(result.done) break;

	console.log(result.value);
}

 

우리가 직접 만드는 이터러블 외에도, 일반적으로 선언하는 문자열도 이터러블 입니다. 따라서, for ... of 를 통해 문자열의 문자를 하나하나 가져올 수 있죠.

 

또한, for ... of 를 사용하는 것 대신에, 직접 Symbol.iterator 메소드를 끄집어와서 next 메소드를 호출해가면서 사용할 수도 있습니다. 위에서 str[Symbol.iterator] 를 통해 이터레이터를 직접 가져와서 while 문 안에서 next 메소드를 호출해 결과를 직접 가져오는것을 볼 수 있습니다.

 

 

 

2. 유사 배열(array-like)

 

전의 글에서 잠깐 다루었던 유사 배열(array-like) 에 대해서 알아보도록 합시다. 

 

유사 배열(array-like) 은 이터러블과 비슷해서 혼동하기 쉽지만, 엄연히 다릅니다.

 

뭐...사실 대단한 다름은 아닙니다. 유사 배열은 이터러블과 달리 인덱스와 length 프로퍼티가 있어서 말 그대로 배열처럼 보이는 객체를 뜻합니다.

 

let obj = {
	0: "Hello",
    1: "World",
    length: 2
}

// Symbol.iterator 가 없어서 에러 발생
for(let v of obj) {
	console.log(v);
}

for(let v of Array.from(obj)) {
	console.log(v); // Hello World
}

 

 

유사 배열은 이터러블과 달리, for ... of 를 사용하지 못합니다. 말 그래도 배열처럼 보이는 객체일 뿐, 진짜 배열이나 이터러블이 아니기 때문이죠.

 

따라서, 이러한 유사 배열을 진짜 배열처럼 사용할 수 있게 하는 메소드가 있습니다. 바로, Array.from 메소드 입니다.

 

Array.from 메소드에 유사 배열 뿐만 아니라, 이터러블을 포함하여 진짜 배열로 만들어줍니다. 따라서, Array.from 메소드를 통해 만들어진 배열은 일반 배열과 마찬가지로 push 나 pop 같은 기본 내장 메소드도 사용할 수 있죠.

 

 

 

이렇게, 이터러블과 유사 배열에 대해 간략하게 알아보았는데, 이터러블은 조금 복잡하고 이해하기 힘들 수 있지만, 한두번만 보는것이 아닌 반복적으로 복습하시면서 완벽하게 습득하셨으면 좋겠습니다.

 

다음 글들도 많은 관심 부탁드립니다!