演算子の優先順位と結合規則

広告

式と式を演算子と組み合わせることによってより複雑な式を作ることができますが、1つの大きな式の中に複数の演算子が混在している場合にはどの演算子を先に適用するかによって式全体が返す値が異なる場合があります。

次の例を見て下さい。

var num;
num = 10 + 5 - 4;

この例では「10 + 5 - 4」が1つの式となっています。この式には「+」と「-」の2つの演算子が使われていますがどちらの演算子を先に適用しても結果は代わりません。

15 - 4 = 11
10 + 1 = 11

では次の例を見て下さい。

var num;
num = 10 + 5 * 4;

この例では「10 + 5 * 4」が1つの式となっています。この式には「+」と「*」の2つの演算子が使われていますがどちらの演算子を先に適用するかによって結果が異なります。

15 * 4 = 60
10 + 20 = 30

先に「+」演算子を使って演算を行うと式全体が返す値は60となりますが、先に「*」演算子を使って演算を行うと式全体が返す値は30となります。このようにどの演算が先に行われるのかによって式全体の結果が異なってきます。

演算がどの順番で行われるのかは演算子の優先順位と結合規則によって決まります。優先順位はどの演算が先に行われるのかを決定するのに使われ、結合規則は優先順位が同じ演算子だった場合にどの演算が先に行われるのかを決定するのに使われます。

演算子の優先順位と結合規則は次の通りです。

優先順位 高い
------------------------------------------------------------
左  (引数)  [配列添字]  .  new
右  !  ~  +  - (単項演算子)  ++  --  delete  typeof  void 
左  *  /  %
左  +  - (算術演算子)
左  <<  >>  >>>
左  >  >=  <  <=  instanceof  in
左  ==  !=  ===  !==
左  &
左  ^
左  |
左  &&
左  ||
右  ?:
右  =  ope=
左  ,
------------------------------------------------------------
優先順位 低い

※ new演算子の結合順位は右です。

※ ope= は「+=」「-=」「*=」「/=」「%=」「<<=」「>>=」「>>>=」「&=」「|=」「^=」のことです。

上に書かれているほど優先順位が高く、下になるほど優先順位は低くなります。同じ行に書かれている演算子は優先順位に違いはありません。

優先順位による演算の順序

では「*」と「+」を見てください。「*」の方が「+」よりも上に書かれていますので「*」の方が優先順位が高くなっています。その為、同じ式の中で「*」と「+」の2つの演算子があった場合にはまず先に「*」を使った演算が行われます。(※上から2番目に書かれている「+」と「-」は算術演算子ではなく単項演算子です)。

次の例を見てください。

var num;
num = 10 + 5 * 4;

上記の例では、先に「5 * 4」の演算が行われ、そして次に「10 + 20」の演算が行われます。そして最後に「=」によって変数「num」に30が代入されます。

なお最後に変数「num」へ式全体の値が代入されています。今まであまり意識せずに利用していましたが「=」も演算子の一つであり、そして優先順位がかなり低い演算子のためです。その為「=」演算子による代入は最後に行われます。

結合規則による演算の順序

次に優先順位が同じ演算子があった場合です。例えば「+」と「-」は同じ優先順位です。優先順位が同じ場合には演算子の結合規則に従います。先ほどの一覧の各行の一番左に書かれているのが結合規則です。左の場合は左結合、右の場合は右結合と呼ばれます。演算子が左結合の場合には左から順に、右結合の場合には右から順に演算が行われます。

次の例を見てください。

var num;
num = 10 + 5 - 4;

今回の場合、「+」と「-」は優先順位が同じです。そして左結合の演算子のためまず「10 + 5」の演算が先に行われ、そして次に「15 - 4」の演算が行われます。そして最後に「=」によって変数「num」に11が代入されます。

今後出てくる各演算子を記述する上で、演算子の優先順位がどのようになっているのかを常に意識して記述するようにして下さい。

サンプルコード

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

<!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/script4_1.js">
</script>

</body>
</html>
var num1, num2;

num1 = 10 * 5 + 4;
document.write("<p>10 * 5 + 4 = " + num1 + "</p>");

num2 = 4 + 10 * 5;
document.write("<p>4 + 10 * 5 = " + num2 + "</p>");

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

p4-1

優先順位が異なる場合は、記述された順序ではなく演算子の優先順位のよってどの演算が先に行われるのかが決まっていることが確認できます。

JavaScript入門の他の記事を見てみる

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)