JavaScriptにおける名前付き引数

icon
ぶべ

JavaScriptにおける名前付き引数

投稿日: 2024年10月27日

Tips
要約
  • JavaScriptでは関数の引数が複数ある場合、順番通りに渡さなければならず、ヒヤヒヤすることがある。
  • RubyやPHPなどの言語には名前付き引数があり、引数を順番を気にせず渡せる。
  • JavaScriptではオブジェクトを引数として渡すことで、名前付き引数のような使い方ができ、安心感が増す。

JavaScriptでは、関数のパラメータが複数ある場合、実行時には引数を順番通りに渡してあげないと、意図する処理ができません。

const login = (email, password, username) => {
  console.log("email:", email);
  console.log("password:", password);
  console.log("username:", username);
};

const email = "hoge@test.com"
const password = "fuga"
const username = "hoge"

// 引数を渡す順番を間違えているので、意図した処理ができない
login(username, email, password);

引数が2, 3個ならまだ良いですが、引数が5個以上となってくると、順番を間違えずに渡すように書くのはまあまあ気を使いますし、ヒヤヒヤする実装の1つです。

名前付き引数

一般的にプログラミング言語には、「名前付き引数」という機能が備わっていることが多いです。

例えばRubyであれば、以下のように実装できます。

def login(email:, password:, username:)
  puts "email: #{email}"
  puts "password: #{password}"
  puts "username: #{username}"
end

email = "hoge@test.com"
password = "fuga"
username = "hoge"

login(username: username, email: email, password: password)

パラメータに名前を付けられるようになっており、実行時には引数に名前を指定することで、順番通りでなくとも正しく動作できます。

この仕様はPHPにもPythonにも備わっているのですが、JavaScriptには存在しません。

JavaScriptでの「名前付き引数」風の実装

JavaScriptには公式の名前付き引数はありませんが、オブジェクトを引数として渡すことで、名前付き引数に近い形で実装できます。

const login = ({ email, password, username }) => {
  console.log("email:", email);
  console.log("password:", password);
  console.log("username:", username);
};

const email = "hoge@test.com";
const password = "fuga";
const username = "hoge";

// どちらも正しく動作する
login({ email, password, username });
login({ username, password, email });

まとめ

生徒さんから「なぜ、関数の引数をオブジェクトで渡す場合とそうでない場合があるの？」という質問を受けたので、
こういった背景があるという解説でした。

基本、パラメータが2つ以上の関数を作るときは、オブジェクトで受けるようにした方が、個人的には安心できます。

シェア！

Threads
icon
ぶべ
Webの修行中 / 個人開発奮闘中 / ベンチプレス110kg / Reactの先生
プロフィールを見る
Loading...
記事一覧に戻る
Threads
0