[JSInfo] iterable 객체

cptkuk91·2021년 10월 26일
0

JSInfo

목록 보기
17/26

반복 가능한 객체(iterable)은 배열을 일반화한 객체입니다. iterable 객체는 for...of를 사용할 수 있습니다.

Symbol.iterator

ex) for...of가 사용가능한 객체를 살펴보자.

let range = {
	from: 1,
    to: 5
}

range를 iterable로 만들려면 for...of가 사용가능해야 합니다. 이때 Symbol.iterator를 사용하면 사용이 가능해진다.

ex)

let range = {
	from: 1,
    to: 5
}

range[Symbol.iterator] = function() {
	return {
    	current: this.from,
        last: this.to,
        
        next() {
        	if(this.current <= this.last){
            	return {
                	done: false, value: this.current++
                };
            } else {
            	return {
                	done: true;
                }
            }
        }
    }
};

for(let num of range){
	console.log(num); // 1,2,3,4,5 출력

위와 같은 방법을 통해 range를 iterator로 만들어 간략하게 출력할 수 있습니다...;

다행히 문자열은 iterable 입니다.

문자열에 for...of를 사용할 경우 각 글자를 순회합니다.

for(let char of "test"){
	console.log(char) // t,e,s,t 출력
}

문자열이지만 명시적으로 iterable 사용할 때?

문자열에서 for...of는 작동하지만 수동적으로 작동시킬 경우 Symbol.iterator를 입력하여 주면 됩니다.
명시적으로 사용해서 호출하는 경우는 없지만 종종 사용이 필요할 때가 있습니다.

let str = "Hello";

let iterator = str[Symbol.iterator]();

while(true){
	let result = iterator.next();
    if(result.done) break;
    console.log(result.value);
} // H,e,l,l,o 출력

iterable과 유사 배열은 달라요.

비슷한 느낌이지만 헷갈리면 안됩니다.

  • iterable은 메소드 Symbol.iterator가 구현된 객체입니다.
  • 유사배열은 length가 있는 배열처럼 보이는 객체입니다.

iterable과 유사 배열은 배열이 아니기 때문에 push, pop을 사용할 수 없습니다.

Array.from

유사 배열을 진짜 배열로 만들어줍니다. Array.from 이후에는 유사 배열이나 iterable 메소드를 사용할 수 없게됩니다.
ex)Array.from 기본 문법

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

let arr = Array.from(arrayLike);
console.log(arr.pop()); // World 출력 (length는 안됨 이유는..댓글에)

문자열에서도 사용할 수 있습니다.

let str = "Hello";

let chars = Array.from(str);

console.log(chars[0]); // H
console.log(chars[1]); // e
console.log(chars[2]); // l
console.log(chars[3]); // l
console.log(chars[4]); // o

당연히 for...of도 사용할 수 있습니다.

지금 단계에서는 정리한 제가 부족하고 이해할 수 없기 때문에... 다시 한번 정리를 하도록 하겠습니다.

profile
Hello World

0개의 댓글