함수형 프로그래밍 정리

 

배열이나 순회해야할 객체가 있을 때, 주로 어떤 구문을 사용하셨나요?

전 for 문, for in문을 위주로 사용했었는데,

이번 시간을 통해 for of 문을 통해 각각의 원소를 console.log찍을 수 있는 것을 직접 코드로 작성해보았습니다.

 

배열에서 for of 문이 가능한 이유는,

자바스크립트의 배열은 '이터러블/이터레이터 프로토콜'을 따르고 있기 때문입니다.

 

마찬가지로, 

const set = new Set([1,2,3])

const map = new Map([  [ 'a' , 1 ],  [ 'b',  2  ], [ 'c',  3 ] ])

const set = new Set([1,2,3])

const map = new Map([  [ 'a' , 1 ],  [ 'b',  2  ], [ 'c',  3 ] ])

에 대해서도 이터러블/이터레이터 프로토콜이 적용되어 for of로 순회가 가능합니다.

 

예를 들어,

 

 

for (const a of set) console.log(a) 

1

2

3

//순차적으로 찍힙니다





for (const b of map) console.log(b)

[ 'a' , 1 ]

[ 'b',  2 ]

[ 'c',  3 ]

//순차적으로 찍힙니다

 

보통, for (let i =0, i <~~~~~~~) 이런 구문을 주로 사용해왔었는데,

이터러블/이터레이터 프로토콜을 따르고 있기 때문에 'i'가 증가하는 것이 아니라 그 안의 내재된

[Symbol.iterator] 함수가 호출되는 원리입니다.

 

그러면, [Symbol.iterator]에 대해서 좀 더 살펴보겠습니다.

 

[Symbol.iterator] 함수에는 next함수가 있어서 이를 리턴값으로 가집니다.

next()에 직접 접근할수 없지만, 이를 구현할 수 있습니다.

우선은, next()를 호출했을 시, 순회가 어떻게 이루어지는지 보겠습니다.

 

 

const arr = [1, 2, 3]

for (const a of arr)  console.log(a)

1

2

3 //이렇게 순차적으로 찍힙니다.

이번에는 특정 변수에 [Symbol.iterator]를 할당하고 next()를 호출해 보겠습니다.



let iter = arr[[Symbol.iterator]();

// iter변수에 arr이 가지고 있는 [Symbol.iterator]() 자체를 할당합니다.



iter.next();

//[Symbol.iterator]의 리턴값인 next()를 호출합니다



//콘솔창에서 다시 for of 로 순회를 시작하게 되면, 콘솔창에는

2

3 //이렇게 콘솔에 출력이 됩니다.

여기까지 오시면, [Symbol.iterator]는 특정 기준점(for문의 i 같은)을 시작으로 순회를 하는 것이 아니라, 

순회할 대상, 그 자체가 가지고 있는 엘리먼트에 대해서 시작점과 끝점을 가지는 것을 알 수 있습니다.

 

 

 

 

해당 문서는 유인동 강사님의 함수형 프로그래밍 강좌를 학습하고,
이를 토대로 정리한 글입니다 ^^
혹시나 틀린 내용이나 지적할 부분이 있다면 언제든 알려주세요 
감사합니다