JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法について解説しています。argumentsオブジェクトを使う場面の例、基本の使い方、関数に渡された引数を参照する場合の書き方を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

argumentsオブジェクトを使って関数に渡された引数を参照する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

引数とは

プログラムを作成する中で、関数と引数は必ず必要になるものです。例えば、簡単にコンソールログを出力するだけの

console.log("Hello world")

も関数と引数で成り立っています。どこが引数かわかりますか?"Hello world"の部分ですね。関数を実行してもらうにあたり、その動きの詳細を指示する部分になります。

コンソールログに例にして言うと、console.log()は「コンソールログに出力してね」という部分で"Hello world"の部分は、「Hello worldという内容でね」という部分になります。

複雑な関数になると、引数の数も多くなったり、引数によって動きが変わったりすることもあります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

argumentsオブジェクトとは

関数を呼び出す時に、引数を指定しますが、その指定を誤っても関数は呼び出すこと自体は出来ます。

argumentsは関数が呼び出された時に、argumentオブジェクトの配列内にその引数を格納しくれて、呼び出された関数内で利用ができるものです。

 

argumentsオブジェクトを使うメリットと使われるケース

argumentを利用すると、事前に引数の数を指定しなくて良いことがわかります。例えば、HTML上で複数の項目を入力される可能性があり、それらを一つにまとめるような場合など幾つ入っているかわからなかったりします。

あとは、引数をより厳格に正しく呼び出しを行っているかを確認する場合などにも利用できます。

 

argumentsオブジェクトの使い方

呼び出される関数で宣言なく利用することが出来ます。argumentは引数が配列として引き渡せられると説明させていただきましたが、具体的にはargument(0)に引数の1つ目、argument(1)に2つ目となっています。また、lengthを利用すると引数の数もわかります。

 

関数に渡された引数を参照する方法

では、具体的にどの様に参照するかをご説明いたします。

var s_join = function(){
  var msg = "";
  for (var i=0 ; i<arguments.length ; i++){
    msg += arguments[i];
  }
  return msg;
}

ここで、s_joinの引数の定義はされていません。しかしargumentの中には引数が引き渡されており、先程も説明したとおり、配列から取り出すように引数を取り出すことが可能になります。

 

実際に書いてみよう

<html>

  <head>

    <metacharset="UTF-8">

    <title>JavaScriptでargumentsオブジェクトを使って関数に渡された引数を参照する方法を現役エンジニアが解説【初心者向け】</title>

  </head>

  <body>

  <script>

    vars_join = function(str_tmp,str_tmp2){

      varmsg = "";

      console.log(str_tmp);

      console.log(str_tmp2);

      for (vari=0 ; i<arguments.length ; i++){

        msg += arguments[i] + ":";

      }

      console.log(msg);

    }

    s_join("Fruits","orange","grape","apple","banana","strawberry","melon")

  </script>

  </body>

</html>
【結果】
下記の様に出力されます
Fruits
orange
Fruits:orange:grape:apple:banana:strawberry:melon:
引数で指定しているstr_tmp,str_tmp2で関数の中で利用することもarguments[0],arguments[1]でも利用できることがわかりますでしょうか?

 

まとめ

argumentを使いこなせるようになると、関数を作成する内容の幅も広がるかと思います。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。