今日もしつこくアローファンクションをやっていきたいと思います。

複数の引数を受ける

当然ですが、引数は一つ以上受けることもできます。

次のように書きます。

const profile = (name, favorite, country) => {
  return (
    "名前は" +
    name +
    "です。" +
    "好きなものは" +
    favorite +
    "です。" +
    country +
    "出身です。"
  );
};

const res = profile("Nakanishi", "JavaScript", "Shizuoka");
console.log(res); // 名前はNakanishiです。好きなものはJavaScriptです。Shizuoka出身です。 

これで大喜利の幅が広がりますね。

関数に渡す引数の順番が大事

重要なことが一つあります。関数に渡す引数の「順番」です。

例えば以下のコードは名前と趣味と出身地を渡しているので、正しいように思えますが、実際には希望した挙動にはなっていません。

const res2 = profile("JavaScript", "Shizuoka", "Nakanishi");
console.log(res2); // 名前はJavaScriptです。好きなものはShizuokaです。Nakanishi出身です。 

JavaScript は好きですが、少なくとも今のところは私の名前は JavaScript ではありません。「空気読んでよ〜」という気持ちはわかりますが、膨大な行のコードが毎回同じ挙動をし、我々の期待するタスクを処理することができるのは「コンピューターが空気を読まないから」です。忖度するコンピューターは、実行者によって挙動が変わるので、役に立ちません。とにかく決められたルール通りに実行することに意味があるのです。

さて、関数に「渡した順番に」引数へと割り当てられますので、"JavaScript" と渡したら、これは趣味なので favorite に渡されて欲しい気がしますが、実際には一番目の name に渡されます。一番目に渡したからです。とにかく渡した順番に渡されるのです。

この点は非常に大切です。

引数が増えてくるとバグの原因になる

そしてこの性質ゆえにバグを起こす原因にもなります。

なぜなら、このファンクションを書いた人と、使う人が違う場合、「何番目に名前を渡すのか？」ということが共有されない可能性があるからです。もちろん関数定義を読みにいけば、明確にわかりますが、できれば読みにいかなくてもわかった方がいいはずです。

それから、引数の数が「四つ」以上になってくると、関数の定義を把握していても、人間は容易に間違えます。人間が一度に正確に把握できる数は三つまでだと言われているからです。

どうすればいいかというと、次のような書き方が一つの回答です。これについてはまた今度解説しますので、今の段階ではこういうものがあるのだという認識だけ持っていただければと思います。

const betterProfile = ({ name, favorite, country }) => {
  return (
    "名前は" +
    name +
    "です。" +
    "好きなものは" +
    favorite +
    "です。" +
    country +
    "出身です。"
  );
};

const name = "Nakanishi";
const favorite = "Michel Foucault";
const country = "Shizuoka";

// 引数に渡す見かけ上の順番が異なっていても問題ない
const res3 = betterProfile({ country, name, favorite });
console.log(res3); // 名前はNakanishiです。好きなものはJavaScriptです。Shizuoka出身です。

宿題

• アロー関数を使う
• 引数を二つ以上受けとる
• 使う

今日は以上です！