jquery $.extend を利用したパラメータ（引数）の整理

CATEGORY: jQuery

2013年5月1日

省略可能な引数を持つ関数を定義する場合は、省略された引数に適切なデフォルト値が設定されるようにする。この時パラメータの数が多い場合では、最後のパラメータのみを指定したい場合など、省略するパラメータ全てに「null」のプレースホルダーを使う必要が生じる。

  1. //第1パラメータのみが必須の関数
  2. function show_params(req1, opt1, opt2, opt3, opt4, opt5) {
  3.   opt1 = opt1 || ' default1';
  4.   opt2 = opt2 || ' default2';
  5.   opt3 = opt3 || ' default3';
  6.   opt4 = opt4 || ' default4';
  7.   opt5 = opt5 || ' default5';
  8.   if(!req1) {
  9.     throw new Error("第1引数は必須です");
  10.   }
  11.   alert( req1 + opt1 + opt2 + opt3 + opt4 + opt5 );  
  12. }
  13.  
  14. show_params('required', null, null, null, null, ' ##Not default##');

このような場合、オプションのパラメータをオブジェクトで指定するとわかりやすく、またプレースホルダーも不要になる。

  1. function show_params(req1, option) {
  2.   opt1 = option.opt1 || ' default1';
  3.   opt2 = option.opt2 || ' default2';
  4.   opt3 = option.opt3 || ' default3';
  5.   opt4 = option.opt4 || ' default4';
  6.   opt5 = option.opt5 || ' default5';
  7.   if(!req1) {
  8.     throw new Error("第1引数は必須です");
  9.   }
  10.   alert( req1 + opt1 + opt2 + opt3 + opt4 + opt5 );  
  11. }
  12.  
  13. show_params('required', {opt5: ' ##Not default##'});

jQuery では更に、$.extend を利用することでもっとすっきりとすることが可能。
my_options パラメータで渡した値と、デフォルトの値のオブジェクトをマージすることで、settings 変数は、デフォルト値の中の呼び出し側で指定した値だけを書き換えたものになる。（パラメータの順序も気にする必要はない）

  1. function show_params(req1, my_options) {
  2.   var settings = $.extend({
  3.     opt1 : ' default1',
  4.     opt2 : ' default2',
  5.     opt3 : ' default3',
  6.     opt4 : ' default4',
  7.     opt5 : ' default5'
  8.   }, my_options || {});
  9.   
  10.   if(!req1) {
  11.     throw new Error("第1引数は必須です");
  12.   }
  13.   alert( req1 + settings.opt1 + settings.opt2 + settings.opt3 + settings.opt4 + settings.opt5 );
  14.   
  15. }
  16.   
  17. show_params('required', {opt5: ' ##Not default##', opt2: ' @@Not Default@@' });

「required default1 @@Not Default@@ default3 default4 ##Not default##」と表示される。

「 my_options || {} 」により、false と評価される（null や undefined の）オプションには、空のオブジェクトが設定される。

$.extend(deep, target, source1, source2,…sourceN)
targetとして渡されてオブジェクトを、渡されたソースオブジェクトのプロパティで拡張する。

パラメータは次のとおり。

deep（Boolean）
オプションのフラグ。
深いコピーを作るか、浅いコピーを作るか。
省略または falseを指定すると浅いコピーを行う。trueなら深いコピーを行う。
target（Object）
プロパティを拡張するオブジェクト。このオブジェクトは、この関数の 値として返される前に、新しいプロパティによって直接更新される。ソースオブジェクトと同じ名前のプロパティがあれば、ソース側の値によって上書きされる。
source1…sourceN（Object）
targetオブジェクトに追加するプロパティを提供する1個以上のオブジェクト。複数のソースを 提供するとき、同じ名前のプロパティがソース側に存在したら、引数リストの後のほうにあるソースプロパティによって、それより前にあったプロパティが 上書きされる。
戻り値
拡張された target オブジェクト 
  1. var target = {a:10, b:20, c:30};
  2. var source1 = {c:40, d:50, e:60};
  3. var source2 = {e:70, f:80, g:90};
  4.       
  5. $.extend(target, source1, source2);
  6. //targetは {a:10, b:20, c:40, d:50,　e:70, f:80, g:90}　c と e の値は上書きされている。