프론트엔드/자바스크립트

이터레이션(이터러블)

테오구 2022. 4. 20. 17:32
728x90

이터레이션 프로토콜

반복 가능한 규격, 약속, 인터페이스이다

팁 오브젝트 이름을 지을때는 명사로 짓고

인터페이스의 경우는 able을 붙이고 있습니다.

// Iterable 하다는건! 순회가 가능하다는 것
// [Symbol.iterator](): IterableIterator<T>
// 심볼정의를 가진 객체나, 특정한 함수가 IterableIterator<T>를
// 리턴한다는 것은 순회 가능한 객체다! 라는것을 의미한다.
// 순회가 가능하면 무엇을 할 수 있나?
// 바로 반복문, 연산자들을 사용할 수 있습니다.

const arr = [1, 2, 3]
console.log(arr.values()) // Object [Array Iterator] {}
console.log(arr.entries()) // Object [Array Iterator] {}
console.log(arr.keys()) // Object [Array Iterator] {}
// 이터레이터가 된다는 것은 반복문을 사용할 수 있다는 것이다.

// iterator 사용해 보기
// values는 iterableIterator를 리턴합니다.
const iterator = arr.values()
while (true) {
  const item = iterator.next()
  //   item이 마지막이라면 while문 나갑니다.
  if (item.done) break
  console.log(item.value)
}

// arr의 값을 하나하나씩 item에 할당할 수 있다.
for (let item of arr.values()) {
  console.log(item)
}

// 일반 오브젝트는 iterable한 규격 사항을 준수하지 않습니다.
// 즉 iterable한 함수가 들어있지 않습니다.
// 오브젝트의 키를 가져올 수 있습니다.
const obj = { id: 123, name: 'Ellie' }
for (const item in obj) {
  console.log(item)
}

 

// [Symbol.iterator](): IterableIterator<T>;
// 이터러블하기 위해서는 Symbol.iterator키에 IterableIterator를 반환하는
// 함수를 가지고 있으면 됩니다.
// 0부터 10이하까지 숫자의 2배를 순회하는 이터레이터(반복자) 만들기
const multiple = {
	[Symbol.iterator]: () => {
		let num = 0
		const max = 10
		return {
			// IterableIterator라고 하면 항상 next 함수를 통해 다음 값으로 접근이 가능해야합니다.
			next(){
				return {
					// 증감 연산자는 필요한 연산을 한 다음에 증감을 한다.
					// 즉 0 * 2를 한 다음 num이 1로 된다.
					value: num++ *2,
					// 순회가 끝났는지 알 수 있게 해주는 함수
					done: num > max
				}
			}
		}
	}
}

for(const num of multiple){
	console.log(num)
}
728x90

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

데이터 타입  (0) 2022.04.28
프로토타입 (Prototype)  (0) 2022.04.24
제너레이터  (0) 2022.04.20
이터러블  (0) 2022.04.04
Inheritance  (0) 2022.03.31