iterator/iterable -2 : map 함수에 관하여

*iterator/iterable 프로토콜을 이용한 *map 함수를 직접 구현 해보고 원리를 파악해보자

 

// 샘플 배열 데이터
students = [
	{name: "김구라", address: "등촌동"},
    	{name: "윤종신", address: "화곡동"},
    	{name: "김국진", address: "목동"}
];


// students 배열에서 각 학생의 이름을 조회하는 코드를 작성해보자
let names = [];
for (const student of students){
	names.push(student.name);
}
console.log(names);	//["김구라", "윤종신", "김국진"]을 출력


// 위의 코드를 추상화해서 재사용성을 높인 map 함수를 구현해보자
// fn : 위에서 정의했던 특정한 값 name이 아닌, 조회하고자 하는 값을 직접 정의할 수 있도록 함수를 인자로 받는다.
// iterator : iterator/iterable 프로토콜을 따르는 객체를 인자로 받는다. Array, Map, Set 등..
const map = (fn, iterator) => {
	let res = [];
    	for(const a of iterator){
    		res.push(fn(a));
    	}
    	return res;
}

위와 같이 map함수를 정의한다면, 유사배열이지만 자체적으로 map함수가 구현되어 있지않은 iterator/iterable 프로토콜 객체를 조회가 가능하다.

// 아래와 같이 dom element를 출력해보면 배열 형태로 출력이 된다.
console.log(document.querySelectAll(*));

// 하지만 map 함수를 호출해보면, map이라는 함수가 없다는 오류가 뜬다.
console.log(document.querySelectorAll('*').map(e=>e.nodeName));

// 배열같아 보이지만, Array와 똑같지가 않다는 것이다. 하지만 iterator/iterable 프로토콜을 사용하기 때문에
// 위에서 정의한 map 함수를 사용할 수 있다.
console.log(map(el=>el.nodeName, document.querySelectorAll('*')));

map 함수를 통해 새로운 Map 객체를 생성해 보자.

let m = new Map();
m.set('a', 10);
m.set('b', 20);

//생성한 m Map의 각 value에 2배해서 값을 조회
console.log( map( ([k,a]) => [k, a*2], m ) ) );

//m Map의 value에 2배한 값을 지니는 새로운 Map 객체 생성
let nm = new Map( map( ([k,a]) => [k, a*2], m ) ) );

 

 

*array method인 map 함수 자체에 대한 사용법과 정의는 이전에 작성한 글을 참고

https://yunzema.tistory.com/299

javascript array 주요 메서드 정리 (ES5 주의)

*iterator/iterable 프로토콜에 대한 내용은 이전에 작성한 글 참고

https://yunzema.tistory.com/355

iterator/iterable, generator에 대한 정리