range, L.range 테스트
const range = l => {
let i = -1;
const res = [];
while (++i < l) {
res.push(i);
}
return res;
};
const L = {};
L.range = function *(l) {
let i = -1;
while (++i < l) {
yield i;
}
};
위 두 함수는 성능 면에서 어떤 차이가 있을까?
테스트를 위해 함수를 하나 만들 수 있다.
const test = (name, time, f) => {
console.time(name);
while (time--) f();
console.timeEnd(name);
};
test('range', 10, () => reduce(add, range(1000000)));
test('L.range', 10, () => reduce(add, L.range(1000000)));
// range: 약 500ms
// L.range: 약 300ms
앞선 강의에서 range는 reduce 함수에서 array를 만들고, 이 array에서 iterator를 꺼내어 next로 값을 뽑아낸 다음 이를 활용하였다.
반면 L.range는 이터레이터가 자기 자신을 리턴하여 이 이터레이터로 순회를 하므로 조금 더 효율적이라는 언급이 있었다. 처음에는 이게 얼마나 크리티컬할지 예상이 되지 않았다. 실제로도 미미한 차이이지만, 어느 정도 차이가 발생한다는 것은 사실이기 때문에 흥미로운 부분이었다. 제너레이터는 이터러블을 만든다는 것은 알지만, 이것이 과연 어떤 부분이 장점이고 왜 이를 도입하게 되었는지 아직까지 확실하게 와닿지는 않는다. 게다가 서버에서 함수형 프로그래밍을 활발하게 사용할 수 있을지도 아직은 의문이다. 어떤 점이 좋은 것이고, 어떤 점이 좋지 않은 것인지 잘 파악하며 공부해야겠다.
출처: 인프런 함수형 프로그래밍과 JavaScript ES6+
'프론트엔드 > JS' 카테고리의 다른 글
[JavaScript] 제너레이터/이터레이터 프로토콜로 구현하는 지연 평가 (0) | 2023.05.02 |
---|---|
[JavaScript] take 함수 (2) | 2023.05.02 |
[JavaScript] range와 느긋한 L.range (0) | 2023.04.30 |
[JavaScript] 이터러블 객체와 순회 함수 응용 (0) | 2023.04.30 |
[JavaScript] go, curry 함수를 만들어 읽기 좋은 코드 만들기 (0) | 2023.04.29 |