JavaScriptの関数を完全に理解する②

こんにちは！
スマレジテックファームのMichiです！

この記事は「JavaScriptの関数を完全に理解する①」の続きです。
前回で書ききれなかったJavaScriptの関数について整理していきます。

引数のデフォルト値
可変長引数
名前付き引数
複数の戻り値を返したい
即時関数
まとめ

引数のデフォルト値

下記のように、引数にデフォルト値を持たせることができます。
呼び出し側の実引数に何も指定しない場合は仮引数のデフォルト値がそのまま使用され、呼び出し側で実引数を指定した場合はその指定された値が引数として使用されます。

function getTriangle(base = 1, height = 1) {
  return base * height / 2
}

console.log(getTriangle()) // 結果：0.5
console.log(getTriangle(2, 5)) // 結果：5

可変長引数

仮引数の前に...（ピリオド3個）を付与することで、可変長引数となります。
可変長引数とは、あらかじめ個数が決まっていない引数のことで、JavaScriptでは渡された任意個数の引数を配列としてまとめて受け取ることができます。

function sum(...nums) {
  let result = 0
  for (let num of nums) {
    result += num
  }
  return result
}

console.log(sum(1, 3, 5, 7, 9)) // 結果：25

受け取った引数numsはArrayオブジェクトとして代入されるので、通常の配列と同じようにpushやpopメソッドで操作可能です。

また、...演算子は実引数側でも使用できます。

function sum(num1, num2, num3) {
  return num1 + num2 + num3
}

const num_list = [1, 3, 5]
console.log(sum(...num_list)) // 結果：9

名前付き引数

名前付き引数とは、呼び出し時に名前を明示的に指定できる引数のことです。
名前付き引数を用いることで、以下のようなメリットがあります。

引数が多くなっても、コードの意味が分かりやすい
省略可能な引数をスマートに表現できる
引数の順番を自由に変更できる

function getTriangle({base, height}) {
  return base * height / 2 
}

console.log(getTriangle({base: 5, height: 4})) // 結果：10

同じようにして、引数に渡したオブジェクトから特定のプロパティのみを取り出すこともできます。

function show({name}) {
  console.log(name)
}

const member = {
  id: 'Y0001',
  name: '山田太郎',
  address: 't_yamada@example.com'
}

show(member) // 結果：山田太郎

なお、これらはすべて分割代入と呼ばれるテクニックの応用です。分割代入についてご存じない方は、まずこちらのドキュメントを読むことをおすすめします。 developer.mozilla.org

複数の戻り値を返したい

「関数から複数の値を返したい」という場合には、配列/オブジェクトとして値を1つにまとめたうえで返す必要があります。
例えば以下は、与えられた任意個数の数値に対して、それぞれ最大値と最小値を求める関数の例です。

function getMaxMin(...nums) {
  return [Math.max(...nums), Math.min(...nums)]
}

const [max, min] = getMaxMin(10, 35, -5, 78, 0)
console.log(max) // 結果：78
console.log(min) // 結果：-5

これも分割代入の応用で、変数max, minにそれぞれ関数の返り値を代入しています。

もちろん、以下のようにしても構いません。

function getMaxMin(...nums) {
  return [Math.max(...nums), Math.min(...nums)]
}

const result = getMaxMin(10, 35, -5, 78, 0)
console.log(result) // 結果：[78, -5]

ただし、配列で丸ごと返り値を取得すると、使用する際result[0]のように記述する必要があり、何を表しているか分かりにくいため、基本的には分割代入を利用するほうをおすすめします。

即時関数

定義した関数をその場で実行したいという場合は、即時関数が利用できます。
使い方は、関数全体を()でくくり、その後に関数の呼び出しを意味する()を追加するだけです。

以下はageの値によって変数priceの値を変えるために、即時関数を実行しています。

// function宣言を利用する場合は、functionごと()でくくる
const price = (() => {
  if (age >= 65) {
    return 1600;
  } else if (age >= 18) {
    return 2000;
  } else {
    return 1200;
  }
})();

上記のように、ある値によって変数に代入される値を変えたいが、letやvarは使いたくないという場合、即時関数を使用すればconstで宣言できます。

まとめ

二回に渡ってJavaScriptの関数について整理しました。
JavaScriptの関数を完全に理解するには、分割代入を理解できるかがカギだと思います。（このへんも時間があれば記事にしたい）

Michi's Tech Blog

一人前のWebエンジニアを目指して