catch-img

JavaScriptで引数を使ってfunctionへ値を渡す方法

プログラムを呼び出す側から関数へ渡す値を引数と言います。JavaScriptでは処理をまとめたものを「function」と言いますが、functionに対して引数を渡すための具体的な方法について解説します。

目次[非表示]

  1. 1.JavaScriptでfunctionは基本要素
    1. 1.1.functionとは「複数の処理をまとめたもの」
    2. 1.2.functionの基本から戻り値まで
      1. 1.2.1.仮引数と実引数の記述
  2. 2.値渡しと参照渡し
    1. 2.1.値渡しと参照渡しの違い
    2. 2.2.値渡しと参照渡しの挙動の違いについて
  3. 3.functionの引数は自由度が高いため注意が必要
    1. 3.1.JavaScriptは型指定をする必要がない
    2. 3.2.呼び出し側の引数が多い
      1. 3.2.1.覚えておくと便利な可変長引数
    3. 3.3.呼び出し側の引数が少ない
    4. 3.4.名前付きの引数を使用する
  4. 4.基本であるfunctionをマスター

JavaScriptでfunctionは基本要素

JavaScriptで関数を扱うとき、1行目に「function」と記載されているのを見たことがある人も多いでしょう。

functionは、JavaScriptを扱う上で基本となる要素ですが、実は意味をよく分かっていないまま使っている人もいるのではないでしょうか。

まず、functionとは何なのかを、基本から解説します。

functionとは「複数の処理をまとめたもの」

function(関数)は複数の処理をひとまとまりにしたものです。さまざまなプログラミングでは関数を使うことになりますが、その中でも関数をオブジェクトとして扱えるのは、JavaScriptの特徴となっています。

JavaScriptにおける基本的な構成要素の一つで、function型のオブジェクトとして扱われるものです。

functionの基本は、以下のような形になります。

function 関数名( ) {
 処理
}

functionの基本から戻り値まで

functionに引数を渡す場合、上記の基本形の()内に引数名を入れます。引数は、カンマで区切ることでいくつ入れても問題ありません。

また、関数を処理した結果の値を「戻り値」と言いますが、この値を取得する場合は「return」を使います。

function 関数名(引数A,引数B,…{
 //処理の内容 return 戻り値;
}

仮引数と実引数の記述

仮引数とは、functionを定義するときに記述する引数、実引数とは、functionを呼び出すときの引数です。

function 関数名(引数A,引数B,…)

上記で言えば、「引数A,引数B,…」が仮引数に該当します。

dispMessage('Hello');

「dispMessage」とは、ダイヤログボックスに記述するメッセージを呼び出す命令文ですが、上の記述では「Hello」という値を呼び出しています。これが、実引数にあたります。

■関連記事

  JavaScript開発におすすめエディタ6選。OS別や機能解説 | Java・フロントエンド研修のジョブサポート プログラム開発において、開発環境を整えることは重要です。その中でも今回は、JavaScript開発に適したエディタを、その理由と共に紹介します。エディタの特性や機能を把握し、開発に最適なエディタを選びましょう。 Java・フロントエンド研修のジョブサポート

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

値渡しと参照渡し

引数の値を関数に渡す方法としては、「値渡し」と「参照渡し」と呼ばれる2つの方法があります。それぞれの方法の違いと、配列の値を渡す際にはどちらを使った方が良いのかを解説します。

値渡しと参照渡しの違い

値渡しとは、値そのものの情報を変数に渡すこと、参照渡しとは、参照している場所の情報を変数に渡すことです。

JavaScriptの場合、データがプリミティブ型(基本のデータ型)の場合は値渡し、オブジェクト型の場合は参照渡しになります。

値渡しと参照渡しの挙動の違いについて

値渡しと参照渡しでは、コードの挙動そのものが変わってきます。

// 値渡し
let a = 1;
let b = a;
a = 2;
console.log(a);
console.log(b);

上記は値渡しです。この場合、値そのものを渡しているため、bが上書きされることはありません。bの値は1として出力されます。

//参照渡し
let a = { value: 1 };
let b = a;
a.value = 2;
console.log(a.value);
console.log(b.value);

一方、参照渡しの場合は、参照している場所そのものがコピーされるため、bも上書きされ、両方2と出力されます。

■関連記事

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

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

functionの引数は自由度が高いため注意が必要

JavaScriptのfunctionは、書き方の自由度が高いため、記述の際には注意が必要です。以下の点を注意して、引数を扱いましょう。

JavaScriptは型指定をする必要がない

例えば別のプログラム言語であるJavaの場合、変数を使うためにはintやdoubleといったデータ型を指定する必要があります。

しかし、JavaScriptでは、型を指定する必要はありません。Scriptの実行時に、必要に応じてデータの型が変換されるためです。

function add(x, y){
 return x + y;
}
console.log(add('1', 2));

JavaScriptの場合は型指定が必要がないため、上記のようなこともできます。1が文字列、2が数字として判断されるため、上記コードの結果は「12」となります。

呼び出し側の引数が多い

呼び出し側の引数が多くても問題ありません。その場合、後ろのあふれた引数を無視する形で処理が実行されます。

function add(x, y){
 return x + y;
}
console.log(add(1,2,3,4,5));

呼び出す側にどれだけ引数を追加しても、この場合の計算結果は3のままです。

覚えておくと便利な可変長引数

可変長引数とは、呼び出し側の引数が決まっていない場合に備えて、個数が変動する引数のことです。「arguments」というオブジェクトを使用します。

var test = function(){
 for(var i = 0; i < arguments.length; i ++){
  console.log(arguments[i]);
 }
}
test("a");
test("a","b" );
test("a","b","c");

第1引数から順に「arguments」の要素として参照ができます。可変長引数を用いた変数は「可変長引数関数」や「varargs関数」と呼ばれることがあります。

呼び出し側の引数が少ない

引数が足りない場合でもエラーにはなりません。その場合、余った仮引数に「undefined」(見つからない)という値を返してきます。

function test(a) {
 return a;
}
console.log(test(2)); // 2の値を返す
console.log(test()); // undefinedの値を返す

また、引数にデフォルトの値を設定しておくと、引数が足りない場合はデフォルトの値を返してきます。

function test(a=5) {
 return a;
}
console.log(test(2)); // 2の値を返す
console.log(test()); // 5の値を返す

名前付きの引数を使用する

引数に名前を付けて使用することも可能です。

function personal({name = '未設定', old = 0}){ 
 console.log('名前は' + name + 'です');
// 名前 佐藤太郎
 console.log('年齢は' + old + '才です');
// 年齢 18
 }
personal({old : 18, name : '佐藤太郎'});

上記の結果、以下のように出力されます。

名前は佐藤太郎です
年齢は18才ですs

■関連記事

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


基本であるfunctionをマスター

functionはJavaScriptを使う上では基本です。複数の処理をまとめたもので、それを一つの関数として使用します。

functionでは引数、戻り値はよく使うので、ルールや書き方について習得しましょう。基本的な書き方や値渡しと参照渡しの違いなどが理解できるようになると、JavaScriptを使ってさまざまなWebアプリが開発できるようになります。

法人研修の実績2500名以上!若手、新人エンジニア採用後

Java研修はジョブサポートお任せ下さい


ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)を行っています。助成金を活用すれば費用負担を軽減して研修受講ができるのため若手、新人エンジニア採用計画と合わせてご検討下さい。

新人・若手エンジニアの基礎知識、ビジネススキルを強化

プロエンジニア育成コース(Java研修1~3ヶ月)


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

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

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

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

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