JavaScript関数パラメーター

JavaScript関数パラメーターの基本を学ぶ

関数は1つ以上のパラメーターを受け入れることができます。

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => { //do something }

const dosomethingElseAgain = (foo, bar) => { //do something }

で始まりますES6 / ES2015、関数はパラメータのデフォルト値を持つことができます:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

これにより、すべてのパラメーターを入力せずに関数を呼び出すことができます。

dosomething(3)
dosomething()

ES2018パラメータの末尾にカンマを導入しました。これは、パラメータを移動するときにカンマが欠落することによるバグを減らすのに役立つ機能です(たとえば、最後を中央に移動する)。

const dosomething = (foo = 1, bar = 'hey',) => {
  //do something
}

dosomething(2, ‘ho!’)

それも大丈夫ですコール最後のパラメーターの後にコンマを付けた関数:

dosomething(2, 'ho!',)

すべての引数を配列でラップし、スプレッド演算子関数を呼び出すとき:

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}
const args = [2, 'ho!']
dosomething(...args)

多くのパラメータがあるため、順序を覚えるのは難しい場合があります。オブジェクトを使用して、非構造化によりパラメーター名を保持できます。

const dosomething = ({ foo = 1, bar = 'hey' }) => {
  //do something
  console.log(foo) // 2
  console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
dosomething(args)

関数はデフォルトパラメータをサポートするようになりました:

const foo = function(index = 0, testing = true) { /* ... */ }
foo()

デフォルトのパラメーター値はES2015で導入され、最新のブラウザーで広く実装されています。

これはdoSomething受け入れる関数param1

const doSomething = (param1) => {

}

のデフォルト値を追加できますparam1パラメータを指定せずに関数が呼び出された場合:

const doSomething = (param1 = 'test') => {

}

もちろん、これはより多くのパラメーターでも機能します。

const doSomething = (param1 = 'test', param2 = 'test2') => {

}

パラメータ値を含む一意のオブジェクトがある場合はどうなりますか?

昔々、オプションのオブジェクトを関数に渡す必要がある場合、それらのオプションの1つが定義されていない場合にそれらのオプションのデフォルト値を設定するには、関数内に少しコードを追加する必要がありました。

const colorize = (options) => {
  if (!options) {
    options = {}
  }

const color = (‘color’ in options) ? options.color : ‘yellow’ … }

オブジェクトの破棄を使用すると、デフォルト値を指定できます。これにより、コードが大幅に簡素化されます。

const colorize = ({ color = 'yellow' }) => {
  ...
}

呼び出し時にオブジェクトが渡されない場合colorize関数、同様に、デフォルトで空のオブジェクトを割り当てることができます。

const spin = ({ color = 'yellow' } = {}) => {
  ...
}

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: