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

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

JavaScriptでfunctionは基本要素

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

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

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

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

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」という値を呼び出しています。これが、実引数にあたります。

■関連記事

値渡しと参照渡し

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

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

値渡しと参照渡しの違い

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

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と出力されます。

■関連記事

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

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

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)資料ダウンロードはこちら

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才ですｓ

■関連記事

基本であるfunctionをマスター

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

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

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