[자바스크립트] 이터러블 개념과 FE에서의 사용처

• 이터러블은 순회 가능한 객체를 의미
• 이러한 객체는 Sysyem.iterator 라는 특별한 메서드롤 가지고 있으면 이것을 통해 이터레이터를 반환함
• 이터레이터는 순회할 수 있는 값의 시퀀스를 나타내는 next() 메서드를 가짐

const iterable = [1, 2, 3]; 

const iterator = iterable[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

//value 속성은 현재 값, done 속성은 순회가 완료 되었는지에 대한 것

• 위에서 console.log를 하나하나 찍는 행위를 for of 루프로 대체 가능

const iterable = [1,2,3]

for (const item of iterable) {
	console.log(item)
}

 

• 이터러블은 배열 외에도 String, Set , Map, NodeList 등 다양한 객체에서 사용 가능
• 프론트 엔드 개발자가 웹 제작시 이터러블 개념을 사용하는 경우
  1. 배열: 웹 페이지 동적 데이터를 표현 할 때 사용. forEach, map, filter 등을 활용하여 배열 요소 순회 및 변형
  2. String: js에서 문자열은 이터러블로 간주 됨. 문자열의 각 문자를 대문자로 변형 또는 특정 문자 검색 하는 작업
  3. 컬렉션 객체(Set, Map): for of 루프를 사용여 요소를 순회 하거나, forEach 메서드를 사용하여 작업 수행
  4. DOM 요소 (NodeList) : DOM 요소를 선택하면 대부분 NodeList 객체를 반환 받음. 이것을 이터레이션 하여 원하는 DOM 요소에 접근 및 조작 가능
  5. 제너레이터: 제너레이터는 이터레이터를 생성하는 함수. function* 키워드로 정의되며, yield 문을 사용하여 값을 생성하고 반환 함. FE 개발자는 제너레이터를 사용하여 복잡한 순회 논리를 구현 또는 비동기 작업 처리 시 활용

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

//제너레이터 함수를 사용하면 값을 필요에 따라 지연 생성하거나 비동기 작업을 동기적으로 표현 가능