Pure JavaScript vs Lodash

Pure JavaScript vs Lodash:

この記事は、Business Bank Group Developers Advent Calendar 8日目の記事です。

---

こんにちは、BBGの清水です。

Lodashはリスト操作やオブジェクト操作に便利なライブラリです。

chainメソッドでeach, map, filterなどの処理を繋げて実装すると可読性も上がるためよく使用しています。

ただ、純粋なJavaScriptのメソッドの方がパフォーマンスが良いと聞いて気になったので比較してみました。

今回は、私がよく開発で使っていた処理を比較してみました。(今Angularで開発しているのでコードはtypescriptです)

事前データ

let data1: { a: number, b: number[] }[] = []; 
let data2: { a: number, b: number[] }[] = []; 
 
Array.from({ length: 10000 }, (_) => { 
  const num = Math.random(); 
  data1.push({ a: num, b: [1,2,3] }); 
  data2.push({ a: num, b: [1,2,3] }); 
}); 

Pattern 1

リスト内の特定の値をフィルタしたものをsummaryしたい

pureJS(data: { a: number, b: number[] }[]) { 
  let sum = 0; 
  const start_ms = performance.now(); 
 
  data.map((list) => { return list.a }) 
    .filter((a) => a % 2) 
    .forEach((o) => sum += o); 
 
  return performance.now() - start_ms; 
} 
 
lodash(data: { a: number, b: number[] }[]) { 
  const start_ms = performance.now(); 
 
  _.chain(document).map('a') 
    .filter((a) => a % 2) 
    .sum().value(); 
 
  return performance.now() - start_ms; 
} 

1000回呼び出した平均値で比較してみる

let result1 = []; 
let result2 = []; 
Array.from({ length: 1000 }, (_) => { 
  result1.push(this.pureJS(data1)); 
  result2.push(this.lodash(data2)); 
}); 
console.log('PureJS(ms): ' + _.sum(result1) / 1000); 
console.log('Lodash(ms): ' + _.sum(result2) / 1000); 
 
// PureJS(ms): 0.6674000000014058 
// Lodash(ms): 0.8038999999985245 

Pattern 2

リストに処理を加えた後特定の値で並び替えをしたい

pureJS(data: { a: number, b: number[] }[]) { 
  const start_ms = performance.now(); 
  data.forEach((list) => list.a *= 3); 
  data.sort((l1, l2) => { return (l1.a > l2.a) ? 1 : -1 }); 
  return performance.now() - start_ms; 
} 
 
lodash(data: { a: number, b: number[] }[]) { 
  const start_ms = performance.now(); 
  _.chain(data).each((list) => list.a *= 3) 
    .sortBy('a').value(); 
  return performance.now() - start_ms; 
} 

1000回呼び出した平均値で比較してみる

let result1 = []; 
let result2 = []; 
Array.from({ length: 1000 }, (_) => { 
  result1.push(this.pureJS(data1)); 
  result2.push(this.lodash(data2)); 
}); 
console.log('PureJS(ms): ' + _.sum(result1) / 1000); 
console.log('Lodash(ms): ' + _.sum(result2) / 1000); 
 
// PureJS(ms): 0.001800000000912405 
// Lodash(ms): 0.014900000001944136 

Pattern 3

二次元リストを一次元リストにしたい

pureJS(data: { a: number, b: number[] }[]) { 
  const start_ms = performance.now(); 
  data.map((o) => { return o.b }) 
    .reduce((a, b) => a.concat(b), []); 
  return performance.now() - start_ms; 
} 
 
lodash(data: { a: number, b: number[] }[]) { 
  const start_ms = performance.now(); 
  _.chain(data).map('b') 
    .flatten().value(); 
  return performance.now() - start_ms; 
} 

10回呼び出した平均値で比較してみる

let result1 = []; 
let result2 = []; 
Array.from({ length: 10 }, (_) => { 
  result1.push(this.pureJS(data1)); 
  result2.push(this.lodash(data2)); 
}); 
console.log('PureJS(ms): ' + _.sum(result1) / 10); 
console.log('Lodash(ms): ' + _.sum(result2) / 10); 
 
// PureJS(ms): 239.27999999996172 
// Lodash(ms): 2.710000000070431 

まとめ

eachやmapなど単純な処理を行いたい時は純粋なJavaScriptの方がパフォーマンスがいいので、わざわざLodashを使用しなくてもいいかなと思いました。

ただ、flattenなどの純粋JavaScriptで実現しようとすると処理がネストになったりするような、ちょっと複雑なことをしたい時はLodashの方が早いケースもあり、かつ可読性も上がるなと思いました。

うまく使い分けて行きたいです！

明日は、寿司好きフロントエンジニア金子さんです！

お願いします��