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

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

JavaScriptの特徴と引数の考え方

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

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

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

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

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

関数にデータを渡すのが引数（ひきすう）

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

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

■関連記事

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

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

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

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の値も書き換わってしまいます。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

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

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

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

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

■関連記事

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

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

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

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

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の引数は自由度が高い

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

​​​​​​​