JavaScriptで関数に引数として値を渡す方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで関数に引数として値を渡す方法について現役エンジニアが解説しています。JavaScripでは他の言語と同じように関数に引数を渡して使用することが出来ます。オブジェクトでは参照渡し、他の値では値渡しになることに注意しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで関数に引数として値を渡す方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで関数に引数として値を渡す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

引数とは

数学でいうと『f(x)=y』と関数の『x』の部分にあたるものです。『x』の値を変更すると『y』が変化しますねプログラムでは仕事や計算の依頼をする際に引数を渡します。

例えば、買い物を依頼する時に買い物リストとお金を渡しますね。『買い物』が関数で『買い物リスト』『お金』が引数になります。

JavaScriptで関数に引数として値を渡す方法

まず、引数には”値渡し”,”参照渡し”の2種類があります。

  • 値渡し:値をコピーして渡す方法で、関数内で書き変わっても元は変わりません
  • 参照渡し:値の場所を渡す方法で、関数内で書き変わると元も変わります

JavaScriptの場合は、他のプログラム言語とは違い値の型によって変わります。

  • プリミティブ型(数値型、文字列型、ブーリアン型、null型、undefined型)は”値渡し”
  • オブジェクト型は”参照渡し”

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

HTMLのソースコード

<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>JavaScriptでオセロゲームを作る</title>
<style type="text/css">
</style>
</head>

<body>
<h1>JavaScriptで関数に引数として値を渡す方法</h1>
<p>
最初の"a"の値:<label id="a_1">_____</label>
</p>
<p>
最初の"b"オブジェクトの値:<label id="b_1">_____</label>
</p>
<p>
関数に入ってきた"a"の値:<label id="a_2">_____</label>
</p>
<p>
関数に入ってきた"b"オブジェクトの値:<label id="b_2">_____</label>
</p>
<p>
関数で変更した"a"の値:<label id="a_3">_____</label>
</p>
<p>
関数で変更した"b"オブジェクトの値:<label id="b_3">_____</label>
</p>
<p>
関数からもどて来た後の"a"の値:<label id="a_4">_____</label>
</p>
<p>
関数からもどて来た後の"b"オブジェクトの値:<label id="b_4">_____</label>
</p>
 

 

JavaScriptのソースコード

<script type="text/javascript">
let a = "test"
let b = {text:"test2"}

function testfunc(ia,ib){
document.getElementById("a_2").innerHTML = ia;
document.getElementById("b_2").innerHTML = ib.text;
ia = "cheng"
ib.text = "cheng2"
document.getElementById("a_3").innerHTML = ia;
document.getElementById("b_3").innerHTML = ib.text;

}

document.getElementById("a_1").innerHTML = a;
document.getElementById("b_1").innerHTML = b.text;

testfunc(a,b)

document.getElementById("a_4").innerHTML = a;
document.getElementById("b_4").innerHTML = b.text;

</script>

</body>
</html>

 

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。