変数の宣言、変数への代入、変数の参照 - JavaScript
JavaScriptでの変数の宣言、代入、参照の書式とコードについて紹介します。
書式
宣言
var
変数宣言は下記の書式を利用します。
変数の宣言と同時に値の代入をする書式も利用できます。
下記のカンマで区切る書式を利用することで複数の変数を宣言できます。
var (変数名1),(変数名2),(変数名3)...(変数名n);
var (変数名1)=(代入する値),(変数名2)=(代入する値),(変数名3)=(代入する値), ...(変数名n)=(代入する値);
補足
JavaScriptでは変数の宣言は不要のため、宣言を記述しなくても動作します。
let
EcmaScript6以降では let による変数宣言も利用できます。
変数の宣言と同時に値の代入をする書式も利用できます。
下記のカンマで区切る書式を利用することで複数の変数を宣言できます。
let (変数名1),(変数名2),(変数名3)...(変数名n);
let (変数名1)=(代入する値),(変数名2)=(代入する値),(変数名3)=(代入する値), ...(変数名n)=(代入する値);
メモ
varとletの動作の違いは
こちらの記事を参照してください。
代入
変数への値の代入は下記の書式を利用します。
代入は"="演算子を利用します。左辺に代入される変数名、右辺に代入する値を記述します。
参照
参照は変数名を記述します。
記述例
変数 a を宣言します。
var a;
変数 textを宣言し、"あいうえお"をtext変数に代入します。
var text;
text = "あいうえお";
プログラム例
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
window.onload = function onLoad() {
var a, b;
var c;
a = 12;
b = 51;
c = a + b;
var target = document.getElementById("output");
target.innerHTML = c;
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
下記コードにて、変数a, b, c を宣言します。
var a, b;
var c;
下記コードで代入と参照をしています。変数aには12を代入しています。変数bには51を代入しています。変数aとbの内容を参照し、変数cには変数aと変数bの値の和を代入しています。今回の場合は、変数aに12が、変数bに51が代入されているため、変数cの値は63になります。
a = 12;
b = 51;
c = a + b;
var target = document.getElementById("output");
target.innerHTML = c;
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の結果が表示されます。
補足:変数を宣言しない例
JavaScriptでは変数を利用する際にあらかじめ宣言をしておく必要が無いため、下記のコードでも動作します。
コード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
window.onload = function onLoad() {
a = 12, b = 51;
c = a + b;
target = document.getElementById("output");
target.innerHTML = c;
}
</script></head>
<body>
<div id="output"></div>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
