JavaScript

JavaScriptの引数の使い方【関数定義時・実行時の方法】

どうも、つよぽんです!

今回は、JavaScriptの「引数」について解説をします。

今回の記事は次のような方に向けて書きました。

想定読者
  • 引数って何?
  • 引数を受け取る関数を定義したい
  • 関数実行時にどうやって引数に値を渡すのか知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの引数の使い方全てのプログラミング言語では関数を作成したり実行する際に「引数」というものを使います。今回はその「引数」について学習をします。「関数とは?」という基本的なところから、関数実行時の引数の使い方、関数を自作したときの引数の受け取り方を学びます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. 引数とは
  2. JavaScriptで関数実行時に引数に値を渡す方法
  3. JavaScriptで引数を受け取る関数の作り方

 

引数とは

この章では「引数とは何か?」について解説していきます。

引数とは「関数(メソッド)を実行する際に外から値を渡すことが出来る仕組み」のことを言います。(以降はメソッドという言葉を使わず関数という言葉で統一します。)

言葉だけではイメージがつきづらいと思うので、以下の画像を使いながら説明していきます。

引数について引数について

上の画像では「alert」と「console.log」に値を渡すときの方法を説明したものです。

関数は「関数名()」と「()」をつけることで関数を実行することが出来ます。

この「()」の中に値をセットすることで、実行する関数に対して値を渡すことが出来るのです。

この「()」の中にセットした値が「引数」として関数に渡ります。

そして、「()」の中に何個の引数をセットできるかというのは関数によって異なります。

上の画像の例では、「alert」は引数を1つしか受け取れず、「console.log」は何個でも引数を受け取れることをあらわしています。

引数が複数ある時、それぞれの引数を左から順番に「第1引数」「第2引数」と言います。(1つの引数しか受け取らない場合に、第1引数と言っても通じます。)

JavaScriptで関数実行時に引数に値を渡す方法

この章では「JavaScriptで関数を実行するときに、どうやって引数に値を渡すのか?」について解説します。

関数によって受け取れる引数の個数が違うことを説明しました。

それでは、引数が1つのとき複数のときでは、どのようにして関数に値を渡せばよいのでしょうか?

引数が1つのとき

引数が1つのときはシンプルで、「関数名(引数で渡す値)」のように、「()」の中に渡したい値をそのままセットするだけです。

例えば「alert」を使って「’こんにちは’」という文字列を表示させたい場合は「alert(‘こんにちは’);」とするだけです。

もちろん、直接値をセットするだけでなく、変数をセットして値を渡すことも出来ます。例えば次のとおりです。

引数が複数ある時

引数に渡す値が複数あるときは、複数の引数を「カンマ(,)」で区切って値をセットします。

以下の画像はconsole.logを実行する際に複数の値をセットしている様子を表したものです。

関数実行時の値の渡し方その1関数実行時の値の渡し方その1

画像内の説明にも書いてあるとおり、関数実行時に複数の値を渡す場合は「カンマ(,)」区切りでセットされているのがわかるかと思います。

JavaScriptで引数を受け取る関数の作り方

この章では、「JavaScriptでの引数を受け取る関数の作り方」を解説します。

これまでは、既に用意されている関数を実行するときに、どのようにして関数に値を渡すのかを解説してきました。

それでは、独自の関数を作るときに引数を受け取れる関数を作るにはどうしたら良いのでしょうか?

答えから言うと、以下の画像でも説明している通り、関数定義時の「()」の中に引数を記述していきます。

関数定義時の「()」の中に引数を記述する関数定義時の「()」の中に引数を記述する

()」の中に引数を記述するといいましたが、どのように記述すればよいのでしょうか?

関数定義時にセットする引数は「変数」と同じものだと考えてください。

なので、「変数名」をつけるのと同じルールで「引数名」をセットすれば良いです。

変数名をつけるときのルールは以下の記事でも解説しているので、変数名のルールを知りたい方は以下の記事を参照して頂けたらと思います。

あわせて読みたい
JavaScriptの変数宣言の方法【const・let・var】全てのプログラミングでは変数というものを使って値を保存して使いまわします。JavaScriptではその変数を使うためには「const」「let」「var」の3つの方法で変数を定義します。この3つの違いを今回の記事で理解していきましょう。...

以下の画像は「hello関数」の定義時に「第1引数にname」「第2引数にage」を引数名として記述した様子を表したものです。

引数を受け取る関数を定義したもの(関数宣言の書き方)引数を受け取る関数を定義したもの(関数宣言の書き方)

そして、hello関数を実行するときに、「hello(‘つよぽん’, 29);」とすることで、hello関数の第1引数のnameには「‘つよぽん’」、第2引数のageには「29」が渡されます。

上の画像のサンプルコードは以下のリンクから直接確認できます。

引数のサンプル2

引数を記述するルールは、「関数宣言」「関数式」「アロー関数」のいずれも同じ書き方になります。

上の画像は関数宣言を使ったサンプルになりますが、以下に「関数式」「アロー関数」を使ったときのサンプル画像も貼っておきます。

引数を受け取る関数を定義したもの(関数式の書き方)引数を受け取る関数を定義したもの(関数式の書き方)

上の画像のサンプルコードは以下のリンクから直接確認できます。

引数のサンプル3

引数を受け取る関数を定義したもの(アロー関数の書き方)引数を受け取る関数を定義したもの(アロー関数の書き方)

上の画像のサンプルコードは以下のリンクから直接確認できます。

引数のサンプル4

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 引数とは「関数を実行する際に外から値を渡すことが出来る仕組み」のこと
  2. 関数によって、受け取れる引数の個数が異なる
  3. 関数実行時に引数に値を渡す場合は「関数名(第1引数の値, 第2引数の値)」のような形式で実行する
  4. 引数を受け取る関数を定義する際には「()」の中に変数名と同じルールで、引数名をセットする。→「 function (第1引数名, 第2引数名){…} 」

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの引数の使い方全てのプログラミング言語では関数を作成したり実行する際に「引数」というものを使います。今回はその「引数」について学習をします。「関数とは?」という基本的なところから、関数実行時の引数の使い方、関数を自作したときの引数の受け取り方を学びます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です