[JS/함수형] for..of 달라진 순회방법

함수형 프로그래밍의 달라진 순회방법

 

순회 방법은 기존 절차지향적이 였던 For 문과 조금 다른 방법을 이용하게 됩니다.

기존의 For이 아니라, for ~ of~ 문을 사용하는 것인데요 , 코드가 정말 직관적이게 되었습니다. str안에 있는걸 a로 하나씩 받아오는 아래의 예시 코드를 보시죠! 

//Array 기존 코드
const lst=[1,2,3]
for(let i=0;i<lst.length;i++){
  console.log([lst[i]])
}
//String 기존 코드
const str="abc";
for(let i=0;i<str.length;i++){
	console.log(str[i]);
}
//==== ES 6 ======
//For...of~
for(const a of lst){
  log(a)
}
//For...of~
for(const a of str){
	log(a)
}

단순히 For 문을 보기 좋게, 좀 더 "직관적"으로 바꾸었을 까요? 

• 가독성을 높이고, 직관적이게 코드를 짤 수 있다고 아주 큰 "장점"입니다만, 여기는 그 이상의 의미가 있습니다.
• 분명한 차이가 있는데, 그 핵심에 있는 부분이 바로, 이터레이터/이터러블 입니다.
• 사실 제가 알고리즘에서 계속 써왔던 파이썬의 for _ in range()에서, 이 Range도 iterator 중에 하나로, for in 문도 일종의 함수형 프로그래밍 방법 중에 하나였습니다.. ㄷㄷ (python 3.7?8부터 바꼇다고 들었습니다. 언제 바꿧데..)

const arr=[1,2,3,4,5];
for (const a of arr) log(a);

const set = new Set([1,2,3,4]);
for (const a of set) log(a);

const map = new Map([["A",1],["B",2],["C",3]]);
for (const a map) log(a);

Iterable/Iterator

• Iterable : 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값.
• Iterator : {value,done} 객체를 리턴하는 , next() 메서드를 가진 값.
• Iterable/Iterator Protocol : 이터러블을 for..of, 전개 연산자 등과 함께 동작하기 위한 약속

Iterable

 

이게 무슨 소리인지 와닿지 않을겁니다. 저 또한, 그랬습니다. 천천히 하나씩 따라와보시죠!

[Symbol.iterator]에는 아마, 함수가 들어있을겁니다. 왜냐하면, [Symbol.iterator]() 에서, 소괄호()는,"함수호출"이라는 의미를 가지니까요! 즉, [Symbol.iterator]이라는 함수를 call 했을 때, iterator라는 객체를 리턴하면, "이터러블"이라고 합니다. 이걸 다르게 이야기하면, "이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값"이라고 정의할 수 있는거죠!

 

JS에서는 대표적으로 Array,Set,Map 등이 Iterable 입니다.

Object는 Iterable이 아닙니다.

Iterator

Iterator은 {value,done}이라는 객체를 리턴하고, 이 {value,done}을 next()라는 메소드로 진행하게 됩니다.

여기서, 한걸음 더 가보자면, Iterator은 , Iterable 이기도 합니다. (액자식 구성, 재귀함수 멈춰!)

무슨 말이냐면, 아래의 코드를 보면 이해가 됩니다! iter에서 또, [Symbol.iterator]을 보면, 또한 정의가 되어있고, 함수를 call해주면 또 iterator를 반환해줍니다. 이때, iterator는 자기자신을 반환해줍니다

 

 

• 위 내용은 유인동님의 인프런 강의 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다.
• 출처,아래첨부

https://www.inflearn.com/course/functional-es6/dashboard

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의