catch-img

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

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

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

目次[非表示]

  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の特徴と、引数に対する基本的な考え方についてまずは学びましょう。

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

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

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

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

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

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

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

■関連記事

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

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

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;」の左辺が元の変数からどの値を受け取るかを定義します。

■関連記事

  トップページ- Java・フロントエンド研修のジョブサポート 法人向けエンジニア研修実績2500名以上。ジョブサポートは技術力、仕事の成果を出すためのビジネススキルも同時に身に付けます。研修は通学、オンライン・リモートの選択が可能です。Java・フロントエンドのエンジニア技術研修・新人研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート

JavaScriptの引数は自由度が高い

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

​​​​​​​

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

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


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

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

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


人材開発支援助成金 

特定訓練コース_若年人材育成訓練の

計画申請資料をまとめてダウンロード

よく読まれている記事

タグ一覧