catch-img

JavaScriptにおける引数の基本的考え方と関数への渡し方

プログラミングにおいて、引数に対する理解は必須です。JavaScriptにおける引数の基本的な考え方や関数への渡し方を、実際のサンプルコードを見ながら理解していきましょう。引数をマスターすることが、JavaScript習得への近道です。

目次[非表示]

  1. 1.JavaScriptの特徴と引数の考え方
    1. 1.1.JavaScriptはWeb上で動かすことができる言語
    2. 1.2.関数にデータを渡すのが引数(ひきすう)
  2. 2.JavaScriptで関数に引数としてデータを渡す方法
    1. 2.1.JavaScriptでの引数の渡し方
      1. 2.1.1.基本となる値渡し
      2. 2.1.2.参照渡し
    2. 2.2.型指定とプリミティブ型・オブジェクト型の注意点
  3. 3.JavaScriptで引数を使う際に覚えておきたいポイント
    1. 3.1.引数が多いケースと少ないケースの対処法
    2. 3.2.引数を省略してデフォルト引数を指定する
    3. 3.3.可変長引数と引数の分割代入
  4. 4.JavaScriptの引数は自由度が高い

JavaScriptの特徴と引数の考え方

プログラム言語には色々な種類があり、用途によって使い分ける必要があります。JavaScriptの特徴と、引数に対する基本的な考え方についてまずは学びましょう。

JavaScriptはWeb上で動かすことができる言語

JavaScriptとは、Webブラウザ上での機能の動作、Webサービスとサイトを連携させるなど、主にWeb上でプログラムを動的な機能を用意する際に使われる言語です。

開発当初は「Live Script」という名前でしたが、当時から人気のあった「Java」にあやかる形で「JavaScript」に変更されました。しかしながら、JavaとJavaScriptは機能もコードの書き方もまったく異なります。

関数にデータを渡すのが引数(ひきすう)

引数とは、関数やメソッド、サブルーチンを呼び出す際に渡す値のことです。プログラム言語では、この「渡された値に対して処理を行い、結果を返す」ということを行っています。

例えば、「渡された値に2を掛ける」という関数に対し、2という引数を渡せば、結果(戻り値)は4ということになります。

■関連記事

  JavaScriptの戻り値に困ったら。基本ルールを丁寧に解説 | Java・フロントエンド研修のジョブサポート JavaScriptには戻り値(もどりち)を返すためのreturn文があります。戻り値を適切に使えるようになると、JavaScriptでできることが増えます。戻り値の基本ルールに加え、エラーを吐いた場合の対処法について解説します。 Java・フロントエンド研修のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

JavaScriptで関数に引数としてデータを渡す方法

引数の渡し方はプログラム言語によって違います。JavaScriptの場合の引数の渡し方について解説します。

JavaScriptでの引数の渡し方

JavaScriptでの引数の渡し方は、「値渡し」と「参照渡し」の2種類があります。

  • 値渡し:値をコピーして渡す方法
  • 参照渡し:値の場所を渡す方法

どういうことか、それぞの特徴やコードを詳しく見ていきましょう。

基本となる値渡し

次のサンプルコードを確認しましょう。

var a, b;
a = "こんにちは。";
b = a;
b = "ご機嫌いかがですか?";
console.log(a+b);

実行結果は次のようになります。

こんにちは。ご機嫌いかがですか?

このように、値渡しの参照は値をコピーしているため、「b=a」という文を挟んでも、元のaという値に影響を及ぼすことがありません。

参照渡し

続いて、参照渡しのコードを見ていきましょう。

var a, b; 
a = {greeting: "こんにちは。"};
b = a; 
b.greeting = "ご機嫌いかがですか?"; 
console.log(a.greeting + b.greeting);

結果は以下のように表示されます。

ご機嫌いかがですか?ご機嫌いかがですか?

こちらは参照渡しをしているため、b=aという代入を行うと、aの値も書き換わってしまいます。

型指定とプリミティブ型・オブジェクト型の注意点

JavaScriptにおいては、プリミティブ型(数値・文字列・真偽値など)は値渡し、それ以外がオブジェクト型と種類分けされています。

そして、プリミティブ型の引数は値渡し、オブジェクト型の引数は参照渡しになるというルールがあるので、扱いには注意しましょう。

上記のサンプルも、同様のルールに沿って作られています。

■関連記事

  JavaScriptで条件分岐の方法。ifとelseの書き方と使い方の違い | Java・フロントエンド研修のジョブサポート ifとelseを使った条件分岐の記述は色々なプログラミング言語で使いますが、JavaScriptの場合はどのように記述をするのでしょうか。それぞれの使い方、書き方の違いについて、サンプルコードを使いながら詳しく解説します。 Java・フロントエンド研修のジョブサポート

フロントエンド(HTML・CSS・JavaScript)入門5日ー株式会社ジョブサポート

JavaScriptで引数を使う際に覚えておきたいポイント

JavaScriptで引数を扱うにあたり、次のポイントを抑えておきましょう。

引数が多いケースと少ないケースの対処法

JavaScriptでは、引数の数が多くても、そして呼び出し側と受け取る側の引数の値が違っていてもエラーにはなりません。

function dispProfile(name, old ,job,gender){ 
 console.log(name + 'は' + old + '歳の' + job +'です');
 }
dispProfile('Suzuki', 38, '会社員 ' , '男 ');

結果は以下になります。

Suzukiは38歳の会社員です

逆に、渡した引数の数よりも呼び出し時の引数が少ない場合は「underfinde」を返します。

引数を省略してデフォルト引数を指定する

引数をデフォルトで指定しておくことで、引数を渡していない場合、デフォルト引数を代入させることが可能です。

function echo(x = "デフォルト") {
 return x; 
 } 
console.log(echo());

「echo」は渡した値がそのまま返って来る関数です。xの引数は設定していませんが、「デフォルト」という文字列を設定しているため、上記コードでは「デフォルト」という文字列を返します。

可変長引数と引数の分割代入

JavaScriptでは、任意の引数を受け取りたい場合もあるでしょう。固定した数ではなく、任意の数を受け取る引数を「可変長引数」と呼びます。

function fn(...args) {
 console.log(args);
 // => ["a", "b", "c"] 
 }
fn(1, 2, 3,4,5);

可変長引数を使う場合「...args」というRest parametersを定義します。 分割代入とは、配列から値を取り出し、別個の変数に代入する式です。

const x = [10, 20, 30, 40, 50];
const [a, b, c] = x; 
console.log(a); console.log(b);

「const [a, b, c] = x;」の左辺が元の変数からどの値を受け取るかを定義します。

■関連記事

  基礎から学ぶJavaScript研修。プランやカリキュラム解説 | Java・フロントエンド研修のジョブサポート JavaScriptに関して知識があまりなく、どのような研修を行えばエンジニアやエンジニアを目指す従業員に効果的か分からない人事の方もいるでしょう。この記事では、研修の具体的なプランやカリキュラムについて解説していきます。 Java・フロントエンド研修のジョブサポート

通年開講プロエンジニア育成コース(Java1~3ヶ月)ー株式会社ジョブサポート

JavaScriptの引数は自由度が高い

JavaScriptの引数は自由度が高く、使い方次第でWeb上でさまざまなことができるようになります。JavaScriptの引数をマスターして、Webサイトのユーザビリティの向上、Webサービスの発展に役立てましょう。

ジョブサポートでは通年開講で貴社・受講者の希望開始日に合わせたJava、フロントエンド研修(通学、オンライン・リモート講座)の受け入れを行っており、助成金を活用すれば費用負担を軽減して研修受講ができるのでお気軽にお問い合わせ下さい。


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。