JavaScriptのデフォルトパラメータを理解する

著者はCOVID-19救済基金を選択し、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

ECMAScript 2015 では、デフォルトの関数パラメーターがJavaScript言語に導入されました。これらにより、引数が関数呼び出しに提供されていない場合、開発者は関数をデフォルト値で初期化できます。この方法で関数パラメーターを初期化すると、関数が読みやすくなり、エラーが発生しにくくなり、関数のデフォルトの動作が提供されます。これは、undefined引数の受け渡しと存在しないオブジェクトの破壊に起因するエラーを回避するのに役立ちます。

この記事では、パラメーターと引数の違いを確認し、関数でデフォルトパラメーターを使用する方法を学び、デフォルトパラメーターをサポートする別の方法を確認し、デフォルトパラメーターとして使用できる値と式のタイプを学びます。また、JavaScriptでデフォルトのパラメーターがどのように機能するかを示す例を実行します。

引数とパラメータ

デフォルトの関数パラメーターを説明する前に、パラメーターがデフォルトにできるものを理解することが重要です。このため、まず、関数内の引数とパラメーターの違いを確認します。この違いについて詳しく知りたい場合は、JavaScriptシリーズの以前の記事JavaScriptで関数を定義する方法を確認してください。

次のコードブロックでは、xとして定義された特定の数値の立方体を返す関数を作成します。

// Define a function to cube a number
function cube(x) {
  return x * x * x
}

この例のx変数は、パラメーターであり、関数に渡される名前付き変数です。パラメータは常に変数に含まれている必要があり、直接値を持ってはなりません。

次に、作成したcube関数を呼び出す次のコードブロックを見てください。

// Invoke cube function
cube(10)

これにより、次の出力が得られます。

Output1000

この場合、10はargument であり、関数が呼び出されたときに関数に渡される値です。多くの場合、次の例のように、値は変数にも含まれます。

// Assign a number to a variable
const number = 10

// Invoke cube function
cube(number)

これにより、同じ結果が得られます。

Output1000

引数を期待する関数に引数を渡さない場合、関数は暗黙的にundefinedを値として使用します。

// Invoke the cube function without passing an argument
cube()

これは戻ります：

OutputNaN

この場合、cube()はundefined * undefined * undefinedの値を計算しようとしているため、NaN、つまり「数値ではありません」になります。詳細については、JavaScriptのデータ型についての数値セクションをご覧ください。

この自動動作が問題になる場合があります。場合によっては、関数に引数が渡されていなくても、パラメーターに値を持たせたいことがあります。そこで、デフォルトパラメータ機能が役立ちます。これについては、次のセクションで説明します。

デフォルトのパラメータ構文

ES2015にデフォルトのパラメーターが追加されたことにより、任意のパラメーターにデフォルト値を割り当てることができるようになりました。引数なしで呼び出された場合、関数はundefinedの代わりにこの値を使用します。このセクションでは、最初にこれを手動で行う方法を示し、次にデフォルトパラメータの設定について説明します。

デフォルトのパラメータがない場合、次の例に示すように、デフォルトを設定するには、undefinedの値を明示的にチェックする必要があります。

// Check for undefined manually
function cube(x) {
  if (typeof x === 'undefined') {
    x = 5
  }

  return x * x * x
}

cube()

これは、条件ステートメントを使用して、値がundefinedとして自動的に提供されているかどうかを確認し、xの値を5として設定します。これにより、次の出力が得られます。

Output125

対照的に、デフォルトパラメータを使用すると、はるかに少ないコードで同じ目標を達成できます。ここで強調表示されているように、cubeのパラメーターに等式代入演算子（=）を割り当てることにより、パラメーターにデフォルト値を設定できます。

// Define a cube function with a default value
function cube(x = 5) {
  return x * x * x
}

これで、cube関数が引数なしで呼び出されると、5がxに割り当てられ、NaNの代わりに計算が返されます。

// Invoke cube function without an argument
cube()

Output125

デフォルト値を無視して、引数が渡されても意図したとおりに機能します。

// Invoke cube function with an argument
cube(2)

Output8

ただし、注意すべき重要な注意点の1つは、次のように、デフォルトのパラメーター値が関数の引数として渡される明示的なundefinedもオーバーライドすることです。

// Invoke cube function with undefined
cube(undefined)

これにより、xが5に等しい計算が得られます。

Output125

この場合、デフォルトのパラメーター値が計算され、明示的なundefined値はそれらをオーバーライドしませんでした。

デフォルトパラメータの基本的な構文がわかったので、次のセクションでは、デフォルトパラメータがさまざまなデータ型でどのように機能するかを示します。

デフォルトのパラメータデータ型

デフォルトのパラメータ値として、任意のプリミティブ値またはオブジェクトを使用できます。このセクションでは、この柔軟性により、デフォルトのパラメーターを使用する方法がどのように向上するかを説明します。

まず、 number 、 string 、 boolean 、object、 array 、およびnull値をデフォルト値として使用してパラメーターを設定します。この例では、 arrowfunction構文を使用します。

// Create functions with a default value for each data type
const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = 'Shark') => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

これらの関数がパラメーターなしで呼び出されると、すべてデフォルト値が使用されます。

// Invoke each function
defaultNumber()
defaultString()
defaultBoolean()
defaultObject()
defaultArray()
defaultNull()

Output42
"Shark"
true
{id: 7}
(3) [1, 2, 3]
null

デフォルトパラメータで作成されたオブジェクトは、関数が呼び出されるたびに作成されることに注意してください。デフォルトパラメータの一般的な使用例の1つは、この動作を使用してオブジェクトから値を取得することです。存在しないオブジェクトの値を分解またはアクセスしようとすると、エラーがスローされます。ただし、デフォルトのパラメータが空のオブジェクトの場合、エラーをスローするのではなく、単にundefinedの値を提供します。

// Define a settings function with a default object
function settings(options = {}) {
  const { theme, debug } = options

  // Do something with settings
}

これにより、存在しないオブジェクトを破棄することによって発生するエラーを回避できます。

デフォルトパラメータがさまざまなデータ型でどのように機能するかを確認したので、次のセクションでは、複数のデフォルトパラメータがどのように連携するかについて説明します。

複数のデフォルトパラメータの使用

関数では、必要な数のデフォルトパラメータを使用できます。このセクションでは、これを行う方法と、実際の例でDOMを操作するためにそれを使用する方法を示します。

まず、複数のデフォルトパラメータを使用してsum()関数を宣言します。

// Define a function to add two values
function sum(a = 1, b = 2) {
  return a + b
}

sum()

これにより、次のデフォルトの計算が行われます。

Output3

さらに、パラメーターで使用される値は、左から右へ、後続のデフォルトパラメーターで使用できます。たとえば、このcreateUser関数は、3番目のパラメーターとしてユーザーオブジェクトuserObjを作成し、関数自体は最初の2つのパラメーターでuserObjを返すだけです。

// Define a function to create a user object using parameters
function createUser(name, rank, userObj = { name, rank }) {
  return userObj
}

// Create user
const user = createUser('Jean-Luc Picard', 'Captain')

ここでuserを呼び出すと、次のようになります。

Output{name: "Jean-Luc Picard", rank: "Captain"}

通常、すべてのデフォルトパラメータをパラメータのリストの最後に配置して、オプションの値を簡単に省略できるようにすることをお勧めします。最初にデフォルトパラメータを使用する場合、デフォルト値を使用するには、undefinedを明示的に渡す必要があります。

リストの先頭にデフォルトパラメータがある例を次に示します。

// Define a function with a default parameter at the start of the list
function defaultFirst(a = 1, b) {
  return a + b
}

この関数を呼び出すときは、次の2つの引数を指定してdefaultFirst()を呼び出す必要があります。

defaultFirst(undefined, 2)

これにより、次のようになります。

Output3

リストの最後にデフォルトのパラメータがある例を次に示します。

// Define a function with a default parameter at the end of the list
function defaultLast(a, b = 1) {
  return a + b
}

defaultLast(2)

これにより、同じ値が得られます。

Output3

どちらの関数も同じ結果になりますが、デフォルト値が最後の関数を使用すると、はるかにクリーンな関数呼び出しが可能になります。

実際の例として、DOM要素を作成し、テキストラベルとクラスが存在する場合はそれらを追加する関数を次に示します。

// Define function to create an element
function createNewElement(tag, text, classNames = []) {
  const el = document.createElement(tag)
  el.textContent = text

  classNames.forEach(className => {
    el.classList.add(className)
  })

  return el
}

配列内のいくつかのクラスを使用して関数を呼び出すことができます。

const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])

greetingを呼び出すと、次の値が得られます。

Output<p class="greeting active">Hello!</p>

ただし、classNames配列を関数呼び出しから除外しても、引き続き機能します。

const greeting2 = createNewElement('p', 'Hello!')

greeting2の値が次のようになりました。

Output<p>Hello!</p>

この例では、 forEach（）を問題なく空の配列で使用できます。その空の配列がデフォルトのパラメータに設定されていない場合、次のエラーが発生します。

OutputVM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at createNewElement (<anonymous>:5:14)
    at <anonymous>:12:18

複数のデフォルトパラメータがどのように相互作用するかを確認したので、次のセクションに進んで、関数呼び出しがデフォルトパラメータとしてどのように機能するかを確認できます。

デフォルトパラメータとしての関数呼び出し

プリミティブとオブジェクトに加えて、関数を呼び出した結果をデフォルトのパラメーターとして使用できます。

このコードブロックでは、ランダムな数値を返す関数を作成し、その結果をcube関数のデフォルトのパラメーター値として使用します。

// Define a function to return a random number from 1 to 10
function getRandomNumber() {
  return Math.floor(Math.random() * 10)
}

// Use the random number function as a default parameter for the cube function
function cube(x = getRandomNumber()) {
  return x * x * x
}

これで、パラメーターなしでcube関数を呼び出すと、呼び出すたびに異なる結果になる可能性があります。

// Invoke cube function twice for two potentially different results
cube()
cube()

これらの関数呼び出しからの出力は異なります。

Output512
64

Mathオブジェクトのような組み込みメソッドを使用して、ある関数呼び出しで返された値を別の関数のパラメーターとして使用することもできます。

次の例では、xにランダムな番号が割り当てられています。これは、作成したcube関数のパラメーターとして使用されます。次に、yパラメーターは、数値の立方根を計算し、xとyが等しいかどうかを確認します。

// Assign a random number to x
// Assign the cube root of the result of the cube function and x to y
function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
  return x === y
}

doesXEqualY()

これにより、次のようになります。

Outputtrue

この例に示すように、デフォルトのパラメーターは関数定義にすることもできます。この例では、パラメーターをinner関数として定義し、parameterの関数呼び出しを返します。

// Define a function with a default parameter that is an anonymous function
function outer(
  parameter = function inner() {
    return 100
  }
) {
  return parameter()
}

// Invoke outer function
outer()

Output100

このinner関数は、outer関数が呼び出されるたびに最初から作成されます。

結論

この記事では、デフォルトの関数パラメーターとは何か、およびそれらの使用方法を学びました。これで、デフォルトのパラメーターを使用して、関数をクリーンで読みやすくすることができます。空のオブジェクトと配列を事前にパラメーターに割り当てて、オブジェクトから値を取得したり、配列をループしたりする場合など、複雑さとコード行の両方を減らすこともできます。

JavaScriptの詳細については、ホームページで JavaScriptシリーズのコーディング方法を確認するか、Node.jsシリーズのコーディング方法で記事をご覧ください。 -開発を終了します。