関数の引数にオブジェクトを指定する

スポンサーリンク

JavaScriptでは関数の引数としてオブジェクトを指定することも出来ます。

引数にオブジェクトを指定する場合は、次のようなメリットがあります。

  • 引数の意味がわかりやすい
  • 引数の順序を気にしなくてよい
  • すべての引数が省略可能となる
では、さっそくサンプルコードを記述してみます。

サンプルコード


// 関数
function f(args){
    
    // デフォルト値
    if (args.x === undefined){args.x = 1};
    if (args.y === undefined){args.y = 1};
    if (args.z === undefined){args.z = 1};
    
    return args.x * args.y * args.z;
}

// オブジェクト
var obj = {
    x: 10,
    y: 20,
    z: 3
};

// 関数呼び出し
console.log(f(obj));  // 60

解説


// 関数
function f(args){
    
    // デフォルト値
    if (args.x === undefined){args.x = 1};
    if (args.y === undefined){args.y = 1};
    if (args.z === undefined){args.z = 1};
    
    return args.x * args.y * args.z;
}

関数部分では、引数を「args」という名前で受け取っています。 関数の本体部分では「args.x」、「args.y」、「args.z」として使用します。

すべての引数が省略可能ですから、省略した場合のデフォルト値を設定するか、 省略不可の場合は例外を throw するようなコードを記述します。

参考記事: 関数の引数をチェックする


// オブジェクト
var obj = {
    x: 10,
    y: 20,
    z: 3
};

// 関数呼び出し
console.log(f(obj));  // 60

この部分では、オブジェクトとして引数を設定して、関数を呼び出しています。 上のように、別々に記述しても良いですし、下のようにまとめて記述しても 構いません。自分がわかりやすい方法で記述してください。
// 関数呼び出し
console.log(f({x: 10, y: 20, z: 3}));

どのような場合に使うと効果があるのか?

引数としてオブジェクトを指定した方が良いのは、どのような場合でしょうか?

そもそも引数の数が少ない場合は、あまりメリットがありません。

  • 引数の数が多くて、わかりにくい。
  • 省略可能な引数がたくさんある。

このような場合は、引数としてオブジェクトを指定した方が良いでしょう。

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト