[Javascript] 이터러블(iterable)

iterable 객체

iterable 이란 반복가능한 이란 뜻으로 이터러블 객체는 배열을 일반화 한 객체임.

 

이터러블 객체는 for .. of 문을 사용할 수 있음

 

배열이 대표적인 이터러블 객체이지만 다른 내장객체도 배열처럼 반복 가능( ex)문자열 )

 

배열이 아닌 일반 객체도 Symbol.iterator을 사용하면 for .. of 문 사용이 가능함

 

Symbol.iterable 사용하여 객체를 iterable 객체로 변환

for of 문 사용시에는 아래와 같은 과정이 발생

 

1. for .. of 문이 실행되면 먼저 Symbol.iterator을 호출(없을 시 오류, Symbol.iterator은 반드시 next()메서드가 있는 이터러블 객체를 반환해야 함)
2. for .. of 문은 반환된 이터러블 객체만을 대상으로 동작
3. for .. of 는 반복할때 마다 next() 메서드를 실행
4. next()의 반환값은 {done:bool,value:val} 형태여야 함 done이 true가 되면 종료

이러한 과정을 적용하여 일반 객체를 아래와 같이 이터레이블 객체로 변환할 수 있음

let iter = {
	start:1,
    end:10
}

iter[Symbol.iterator] = function(){

	return{ 
    
          current:this.start,
          last:this.end,
          next(){
              if(this.current <= this.last)
                  return {done:false,value:this.current++}
              else
                  return {done:true}
          }
   	}
}

for(let a of iter){ console.log(a) }

 

위와 같이 이터레이블 객체처럼 동작하는 것을 볼 수 있음

 

iterable 객체인 문자열

문자열은 문자타입(charactor type)의 배열이기 때문에 문자열도 for .. of 를 사용할 수 있는 iterable 객체임

let str1 = "가나다라마바사아자차카타파하";

for(let a of str1)
	console.log(a);

 

문자열도 for of 사용이 가능한 이터러블 객체임

 

iterator의 명시적 호출

for .. of 를 사용하지 않고 iterator를 직접 호출하여 사용할 수 있음

let str1 = "가나다라마바사아자차카타파하";

//str1의 이터레이터를 명시적으로 선언
let iter = str1[Symbol.iterator](); 

while(true){
	
    let ch = iter.next();
	
    if(ch.done)
    	break;
        
    console.log(ch.value);
    
}

 

for of 를 사용할때와 똑같이 작동

 

유사배열

이터레이블은 Symbol.iterator 가 구현된 객체이지만 유사배열은 Symbol.iterator 가 구현되지 않고 length 프로퍼티가 있어 배열처럼 보이는 객체임(유사배열은 for of 가 동작하지 않음)

 

Array.from()

Array.from()은 유사배열이나 이터레이블을 진짜 '배열' 로 만들어줌

 

아래는 Array.from() 을 사용하여 배열을 생성하는 과정임

//유사배열을 배열로 변환
let obj_to_arr = {
	first:'a',
    second:'b',
    length:2
}

let new_arr = Array.from(obj_to_arr);

console.log(Array.isArray(new_arr));

//이터레이블을 배열로 변환(문자열 사용)
let str = "abcdefg";

let new_arr2 = Array.from(str);

console.log(Array.isArray(new_arr2));

 

array 인지 확인하는 Array.isArray 사용 시 array로 변경된 것을 볼 수 있음

 

Array.from() 의 두번째 매개변수로 매핑 함수를 전달해 주면 각 이터레이블마다 함수를 적용하여 새로운 값을 리턴해 줄 수 있음

let alp = "abcdefghij";

let new_alp = Array.from(alp, ch => ch.toUpperCase()); //각 요소를 대문자로 변환

console.log(new_alp) // 대문자로 변환된 요소들을 반환

 

 

 

참조: https://ko.javascript.info/iterable