Frontend/JS

[JavaScript] reduce, map, filter, take 중첩 사용

턴태 2023. 5. 3. 00:48

reduce, map, filter, take, reduce 중첩 사용

우선 지금까지 만들어 뒀던 함수들은 다음과 같다.

const curry = f =>
	(a, ..._) => _.length
    ? f(a, ..._)
    : (..._) => f(a, ..._);
const range = l => {
	let i = -1;
    const res = [];
    while (++i < l) res.push(i);
    return res;
};

const map = curry((f, iter) => {
	const res = [];
    for (const a of iter) res.push(f(a));
    return res;
};

const filter = curry((f, iter) => {
	const res = [];
    for (const a of iter) if (f(a)) res.push(a);
    return res;
};

const reduce = curry((f, acc, iter) => {
	if (!iter) {
    	iter = acc[Symbol.iterator]();
        acc = iter.next().value;
    }
    for (const a of iter) {
    	acc = f(acc, a);
    }
    return acc
});

const take = curry((l, iter) => {
	const res = [];
    for (const a of iter) {
    	res.push(a);
        if (res.length === l) return res;
    }
    return res;
});
const L = {};

L.range = function *(l) {
	let i = -1;
    while (++i < l) yield i;
};

L.map = curry(function *(f, iter) {
	for (const a of iter) {
    	yield f(a);
    }
});

L.filter = curry(function *(f, iter) {
	for (const a of iter) {
    	if (f(a)) yield a;
    }
};
const go = (...args) => reduce((a, f) => f(a), args);

const pipe = (...fs) => a => go(a, fs);

이렇게 모든 준비가 완료됐고, 본격적으로 응용해볼 차례이다.

예를 들어 range를 출력하는 함수는 다음과 같다.

go(range(10), log);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

여기에 map을 체이닝할 수도 있다.

go(range(10),
	map(n => n + 10),
    console.log);
    
// [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

filter를 체이닝하면 아래와 같다.

go(range(10),
	map(n => n + 10),
    filter(n => n % 2),
    console.log);
// [11, 13, 15, 17, 19]

마지막으로 take까지 붙이면 아래와 같다.

go(range(10),
	map(n => n + 10),
    filter(n => n % 2),
    take(2),
    console.log);
// [11, 13]

L.reduce, L.map, L.filter, take, reduce 중첩 사용

이를 게으른 평가를 적용한 함수에서도 동일하게 사용할 수 있다.

go(L.range(10),
	L.map(n => n + 10),
    L.filter(n => n % 2),
    take(2),
    console.log);
// [11, 13]

결과는 같으나 둘의 리턴값과 평가되는 것 모두 다 다르다.


둘 간의 차이를 조금 더 분명하게 확인하기 위하여 절차적으로 함수를 분해할 수 있다.

const map = curry((f, iter) => {
	let res = [];
    iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
        res.push(f(a));
    }
    return res;
};

위의 함수 식은 기존의 for of 문을 대체하는 식이다.

이를 다른 함수에서 적용시킬 수 있다.

const range = l => {
	let i = -1;
    const res = [];
    while (++i < l) res.push(i);
    return res;
};

const map = curry((f, iter) => {
	const res = [];
    iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
        res.push(f(a));
    }
    return res;
};

const filter = curry((f, iter) => {
	const res = [];
    iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
	    if (f(a)) res.push(a);
    }
    return res;
};

const reduce = curry((f, acc, iter) => {
	if (!iter) {
    	iter = acc[Symbol.iterator]();
        acc = iter.next().value;
    } else {
        iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
    	acc = f(acc, a);
    }
    return acc
});

const take = curry((l, iter) => {
	const res = [];
    iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
    	res.push(a);
        if (res.length === l) return res;
    }
    return res;
});
const L = {};

L.range = function *(l) {
	let i = -1;
    while (++i < l) yield i;
};

L.map = curry(function *(f, iter) {
    iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
    	yield f(a);
    }
});

L.filter = curry(function *(f, iter) {
    iter = iter[Symbol.iterator]();
    let cur;
    while (!(cur = iter.next()).done) {
    	const a = cur.value;
    	if (f(a)) yield a;
    }
};

이렇게 바꿈으로써 살짝 복잡해 보이지만 실제로 성능은 더 좋아지게 되었다.


순회를 이터레이터로 하면서 조금 더 성능을 높일 수 있었다. 이전보다 점점 더 함수형 프로그래밍에 진척이 있는 것 같다.

 

출처: 인프런 함수형 프로그래밍과 JavaScript ES6+