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

投稿日: 2022-04-20 2022-10-13
タグ: Development, javascript

序章

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

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

引数とパラメータ

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

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

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

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

次に、この次のコードブロックを見てみましょう。 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 関数はユーザーオブジェクトを作成します userObj 3番目のパラメーターとして、関数自体が行うのはreturn userObj 最初の2つのパラメーターを使用して：

// 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
}

この関数を呼び出すときは、呼び出す必要があります defaultFirst() 2つの引数で：

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()

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

Output
512
64

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

次の例では、乱数がに割り当てられています x、のパラメータとして使用されます cube 作成した関数。 The 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シリーズのコーディング方法で記事をご覧ください。 -開発を終了します。

getdocs

13036