JavaScriptが楽になる！？　Underscoreによるソースコードのスマート化

こんにちは。樋口です。
 
本日は、JavaScriptの便利関数ライブラリである、Underscore.jsについてご紹介します。このライブラリを使用することにより、複雑になりやすいJSのコードをスマートに書くことができます。
 
今回は、Underscoreのバージョン１.８.３を使用して、よく使用するおすすめメソットをサンプル付きで簡単にご紹介します。

１. ライブラリの読み込み

Underscoreは、ライブラリ本体を読み込むことにより使用可能となります。
 
ライブラリの読み込みは下記コードです。

<script type="”text/javascript”" src="”http://underscorejs.org/underscore-min.js”"></script>

２. _.each

まずは、配列の中身を順番にコンソールログに出力する例です。

var array = [1, 2, 3];

for (var i = 0; i < array.length; i++) {
    console.log(array[i]);  // 1 2 3
}

_.each([1, 2, 3],  function(val){
    console.log(val);  // 1 2 3
});

var func = function(val) {
    console.log(val);  // 1 2 3
};

_.each([1, 2, 3],  func);

３. _.map

基本的な使用方法としては、_.each関数と同じです。違いとして、_.map関数では処理を行った結果を配列として返却してくれます。

var func = function(val) {
    return val+1;
};

var resultArray = _.map([1, 2, 3],  func);
console.log(resultArray); // [2,  3,  4]

４. _.reduce

基本的な使用方法としては、_.each関数と同じです。違いとして、第３引数に渡した値が、第２引数の関数の第１引数に引き渡されます。
 
さらに、第２引数の関数の戻り値が次回呼び出しの、関数の第１引数に再度引き渡されます。

var func = function(result,  val,  data) {
	// 1回目: 0+1
	// 2回目: 1+2
	// 3回目: 3+3
    return result+val;
};

var resultArray = _.reduce([1, 2, 3],  func,  0);
console.log(resultArray); // 6

５. _.filter

第１引数に渡された配列の内、一致する要素全てを配列として返却します。

var func = function(val) {
    return val % 2 === 0;
};

var resultArray = _.filter([1, 2, 3, 4],  func);
console.log(resultArray); // [2,  4]

６. _.uniq

配列内の重複データを１つにします。

var resultArray = _.uniq([1, 2, 3, 4, 1, 3, 4]);
console.log(resultArray); // [1,  2,  3,  4]

まとめ

今回紹介したUnderscore.jsのメゾットには、他にも様々な便利な機能がたくさんあります。
 
また、Underscore.jsの互換性を持つLo-Dashというライブラリもありますので、こちらもぜひ調べてみてください。