代入演算子

広告

変数に値を代入する時に使用する代入演算子「=」について確認します。今までに何度も利用してきていますが、使い方としては次のようになります。 

変数 = 値;

演算子の右辺に記述された値を左辺の変数に代入します。

なお「=」も演算子の1つです。そして「変数 = 値」も式の1つとなります。式はJavaScriptによって評価され何らかの値を返すものでした。よってこの「変数 = 値」という式も値を返し、返す値は右辺に記述された値となります。

次の例を見てください。 

var pref;
alert(pref = '東京都');

この例では「pref = '東京都'」によって変数「pref」に文字列の「東京都」が代入されると同時に、「pref = '東京都'」という式が評価され値として「東京都」を帰しますのでダイアログが開き「東京都」と表示されます。

多重代入

代入演算子では次のような記述が可能です。 

変数1 = 変数2 = 変数3 = 値;

「演算子の優先順位と結合規則」で記載した通り「=」演算子の結合規則は右ですので一番右側の演算子から演算が行われます。 

変数3 = 値;

この式全体は「値」となりますので、結局最初の演算が行われた後は次のように記述したものと同じとなります。 

変数3 = 値;
変数1 = 変数2 = 値;

同じように右側から演算が行われていきますので、結果的に次のように記述したものと同じになります。 

変数3 = 値;
変数2 = 値;
変数1 = 値;
算術演算子と組み合わせた代入演算子

代入演算子は「=」以外に次のような演算子が用意されています。

演算子使用例意味
+=a += ba = a + b と同じ
-=a -= ba = a - b と同じ
*=a *= ba = a * b と同じ
/=a /= ba = a / b と同じ
%=a %= ba = a % b と同じ
&=a &= ba = a & b と同じ
|=a |= ba = a | b と同じ
^=a ^= ba = a ^ b と同じ
<<=a <<= ba = a << b と同じ
>>=a >>= ba = a >> b と同じ
>>>=a >>>= ba = a >>> b と同じ

これらの演算子は変数に代入する値に何らかの演算を行って、その結果を再度同じ変数に代入する場合に便利です。次の例を見てください。 

var num;

num = 10;
num = num + 8;

変数「num」に代入されていた10に8を加えて再度変数「num」に代入しています。このような場合は次のように記述することができます。 

var num;

num = 10;
num += 8;

他の演算子についても同様で「a 演算子= b」は「a = a 演算子 b」と記述した場合と同じになります。何らかの算術演算を行った結果を元の変数に再度代入する場合にはこれらの演算子を用いることで簡潔に記述することができます。

サンプルコード

では簡単なサンプルで試してみます。 

<!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" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script10_1.js">
</script>

</body>
</html>

var pref;

document.write("<p>" + (pref = '東京都') + "</p>");

var num = 16;

num += 4;
document.write("<p>num = " + num + "</p>");

num *= 3;
document.write("<p>num = " + num + "</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p10-1

( Written by Tatsuo Ikura )