変数 var に値 exp を代入します。イコール(=)は等しいという意味ではなく代入するという意味を持ちます。
xx = 5; // xx に 5 を代入する yy = xx; // yy に xx の値(= 5)を代入する zz = "ABC"; // zz に文字列"ABC"を代入する
例えば、次の例を数学的に解釈すると「解無し」となってしまいますが、JavaScript ではこれを「xx という変数に、xx の値と 2 を足したものを代入する」という意味になります。あらかじめ xx に 5 が代入されていれば、xx は 7 となります。
xx = xx + 2; // xx には xx に 2 を加えた値を代入する
次の例で、「yy = xx = 5;」は、「yy = (xx = 5);」と解釈されます。ここで、「xx = 5」自体が代入された値を示すので。これにより、変数 yy にも値 5 が代入されることになります。
yy = xx = 5; // yy と xx に 5 を代入する
exp1 と exp2 の足し算、引き算、掛け算、割り算などを行います。演算子 % は、exp1 を exp2 で割った余りを返します。
xx = 3 + 2; // xx には 5 が代入されます xx = 3 - 2; // xx には 1 が代入されます xx = 3 * 2; // xx には 6 が代入されます xx = 3 / 2; // xx には 1.5 が代入されます xx = 3 % 2; // xx には 1 が代入されます
** はべき乗を示します。ES2016 で追加された機能で、Chrome, Firefox, Edge, Opera, Safari ではサポートされていますが、Internet Explorer 11 ではサポートされていません。
xx = 3 ** 2; // xx には 9(3 の 2乗) が代入されます
演算子 + を用いるときは注意が必要です。exp1 と exp2 のどちらか(もしくは両方)が文字列の場合は、算術演算子ではなく、文字列の連結演算子として機能するからです。例えば、次の例では、xx は 127 になりません。
xx = "123" + 4; // xx には "1234" が代入されます
フォームに入力した値も文字列として扱われるので注意が必要です。フォームの値を数値として扱いたいときは、Number() などで数値に変換します。演算子 - は算術演算子としての機能しかないので、"123" から 3 を引いても "12" にはならず、120 になります。
<script>
function func() {
alert(document.form1.text1.value + 4); // "1234" になります
alert(Number(document.form1.text1.value) + 4); // 127 になります
}
</script>
<form name="form1" action="#">
<input type="text" name="text1" value="123">
<input type="button" value="OK" onclick="func()">
</form>
xx++ は xx の値をひとつ増やします。xx-- は xx の値をひとつ減らします。xx++ は、加算する前の値を返し、++xx は加算の後の値を返します。xx-- と --xx も同様です。
a = 5; a++; // aの値は6となる a = 5; b = a++; // aの値は6、bの値は5となる a = 5; b = ++a; // aの値は6、bの値は6となる
== 演算子は、exp1 が exp2 と等しければ true(真)、さもなくば false(偽) を返します。!= 演算子は、exp1 と exp2 が等しくなければ true(真)、さもなくば false(偽)を返します。数値にも文字列にも使用可能です。
xx = 5;
if (xx == 5) {
alert("xx is 5.");
}
if (xx != 5) {
alert("xx is not 5.");
}
数値を文字列を比較した場合は、暗黙の型変換が行われます。下記の例は等しいとみなされます。
if ("123" == 123) {
alert("等しい");
}
exp1 が exp2 の大きさを比較してその結果を true(真) または false(偽) で返します。演算子はそれぞれ、より小さい(<)、以下(<=)、より大きい(>)、以上(>=) を意味します。
if (xx < 123) {
alert("xx は 123 より小さいです。");
}
これらの演算子を文字列に対して使用した場合は、辞書順の前後比較を行います。
if (xx < "H") {
alert("xx は H よりも前にあります。");
}
数値と文字列を比較したときに、== 演算子や != 演算子が暗黙の型変換を行うのに対し、=== 演算子や !== 演算子は数値と文字列は常に異なるものと判断します。
if ( 123 == 123 ) { ... } // true(真)
if ("123" == "123") { ... } // true(真)
if ("123" == 123 ) { ... } // true(真)
if ( 123 == "123") { ... } // true(真)
if ( 123 === 123 ) { ... } // true(真)
if ("123" === "123") { ... } // true(真)
if ("123" === 123 ) { ... } // false(偽)
if ( 123 === "123") { ... } // false(偽)
exp1 が真、かつ、exp2 が真であれば真を、さもなければ偽を返します。下記の例では、mon が 1 以上であり、かつ、mon が 12 以下の時に真となります。
if ((1 <= mon) && (mon <= 12)) {
alert("xx is between 1 and 12.");
}
exp1 が真、または、exp2 が真であれば真を返します。下記の例では、xx が "ABC" である、または、xx が "abc" である場合に真となります。
if ((xx == "ABC") || (xx == "abc")) {
alert("xx is ABC.");
}
exp1 が真ではない時に真を返します。
if (!(xx == 5)) {
alert("xx is not five.");
}
exp1 が真であれば exp2 を、さもなくば exp3 を返します。次の例は xx が 5 以上であれば "big"、さもなくば "small" を yy に代入します。
yy = (xx >= 5) ? "big" : "small";
常に exp2 の値を返します。ただし、代入演算子(=など)よりも優先度が低いため、xx = 1, 2; は (xx = 1), 2; と解釈されるので注意してください。また、関数の引数にカンマ(,)を用いた場合は、カンマ演算子とは解釈されません。
for (var i = 0, j = 0; i < 10; i++) {
:
}
exp1 と exp2 を4バイト整数と見なして、それぞれ、AND(&)、OR(|)、XOR(^)、NOT(~)演算を行った結果を返します。
xx = 0x87654321 & 0xffff0000; // xx には 0x87650000 が代入される xx = 0x87654321 | 0xffff0000; // xx には 0xffff4321 が代入される xx = 0xffff0000 ^ 0xff00ff00; // xx には 0x00ffff00 が代入される xx = ~0xffff0000; // xx には 0x0000ffff が代入される
exp1 を4バイト整数と見なして、exp1 を exp2 ビット分、左シフト(<<)、右シフト(>>)、0埋め右シフト(>>>)した結果を返します。>> の場合は左端には最上位のビットが埋められますが、>>> は常に 0 が埋められます。
xx = 0x12345678 << 8; // xx には 0x34567800 が代入される xx = 0x12345678 >> 8; // xx には 0x00123456 が代入される xx = 0x87654321 >> 8; // xx には 0xff876543 が代入される xx = 0x87654321 >>> 8; // xx には 0x00876543 が代入される
例えば、xx += 5; は xx = xx + 5; と同じような動作をします。同様に、xx -= 5; は xx = xx - 5; と同じような動作をします。
xx += 5; // xx = xx + 5; と同じ xx -= 5; // xx = xx - 5; と同じ xx *= 5; // xx = xx * 5; と同じ xx /= 5; // xx = xx / 5; と同じ xx %= 5; // xx = xx % 5; と同じ xx **= 5; // xx = xx ** 5; と同じ (Internet Explorer 11 では未サポート) xx &= 0xff; // xx = xx & 0xff; と同じ xx |= 0xff; // xx = xx | 0xff; と同じ xx ^= 0xff; // xx = xx ^ 0xff; と同じ xx <<= 8; // xx = xx << 8; と同じ xx >>= 8; // xx = xx >> 8; と同じ xx >>>= 8; // xx = xx >>> 8; と同じ
ES2021 で追加されました。
xx ||= 5; // xx || (a = 5); と同じ。xxが未設定など偽と判断される場合にxxに値を代入 xx &&= 5; // xx && (xx = 5); と同じ。xxが設定済など真と判断される場合にxxに値を代入 xx ??= 5; // xx ?? (xx = 5); と同じ。xxがnullかundefinedの時にxxに値を代入
Nullish Coalescing(ヌル合体)演算子と呼ばれます。var が null や undefined の場合は exp を、さもなくば var の値を返します。値が省略された場合のデフォルト値を設定するのに便利です。ES2020 で追加されました。
// 古い書き方(obj.fooが未設定の場合デフォルト値60を設定する) if (typeof(obj.foo) == "undefined" || obj.foo == null) { obj.foo = 60; } // ES2020以降の新しい書き方 obj.foo = obj.foo ?? 60;
Optional Chaining(オプショナル連結)と呼ばれます。var が null や undefined の場合でも TypeError になることなく、undefined を返します。ES2020 で追加されました。
// これまでの書き方 if (response.body) { // body が存在することを確認してから console.log(response.body.length); // その属性にアクセスする } // ES2020以降の書き方 console.log(response.body?.length); // => body が存在すれば length 値を、さもなくば undefined
delete 演算子は、expression で指定した、グローバル変数やオブジェクトのプロパティを削除します。var や let で明示的に定義した変数は削除できませんが、var/let 無しに暗黙的に定義した変数は削除することができます。delete はオブジェクトのプロパティを削除する演算子であって、オブジェクト自体を削除することはできません。オブジェクトは、参照されるものが無くなった時点でガベジコレクション時に自動的に消去されます。
var obj = {
name: "Yamada",
age: 24
};
console.log(obj.name); // Yamada
delete obj.name;
console.log(obj.name); // undefined
typeof 演算子は、expression で与えられた値の型を示す文字列を返します。typeof(null) は本来 "null" を返すべきかもしれませんが、歴史的な理由により "object" を返します。
typeof(undefined) // "undefined" typeof(null) // "object" typeof(true) // "boolean" typeof("abc") // "string" typeof(123.45) // "number" typeof(new Object()) // "object" typeof(function() {}) // "function" typeof(Symbol()) // "symbol"
void 演算子は、expression で指定された式に関わらず、常に undefined を返します。関数の戻り値を常に undefined にする場合などに用いられます。
void function func() {
alert("Hello!");
}
また、<a href="javascript:～"> で、何も実行するものが無い場合などに使用されることがあります。void() の代わりに直接 undefined を記述してもよいのですが、undefined という変数が上書きされてしまうリスクを回避するために、void(0) を使用することが多いようです。
<a href="javascript:void(0)">～</a>
in 演算子は、expression が object で示されるオブジェクトのプロパティに存在するか否かを調べます。
if ("appName" in navigator) {
console.log("Yes");
}
p1 = {
name:"Yamada",
age:26
};
if ("name" in p1) {
console.log("Yes");
}
ES2022 ではクラス内でプライベートフィールドに対して in を使用できるようになりました。詳細は ES2022 を参照してください。
instanceof 演算子は、expression が objecttype で示されるオブジェクトか否かを調べます。下記の例では、p1 は Person オブジェクトであるため、true となり、Yes が表示されます。
function Person() {}
var p1 = new Person();
if (p1 instanceof Person) {
console.log("Yes");
} else {
console.log("No");
}
各演算子の優先順位は以下のようになります。同じレベルの演算子は、式の左側にある方が優先度が高くなります。たとえば下記の例で、(式1) は (式2) と解釈されて答えは 13 となります。しかし、バグを埋め込まないためにも、優先順位が直感的に解らない個所には(たとえ無駄であっても)括弧をつけて、優先度を明示的に指定してやることをおすすめします。
(式1) xx = 3 + 4 * 5 / 2; (式2) xx = 3 + ((4 * 5) / 2);
| 優先度 | 演算子 |
|---|---|
↑ 高い 低い ↓ |
配列([]) 括弧(( )) |
| 増減(++ --) マイナス(-) 反転(~) NOT(!) | |
| 乗除余(* / %) | |
| 加減(+ -) 文字列連結(+) | |
| シフト(<< >> <<<) | |
| 比較(< <= >= >) | |
| 比較(== != === !==) | |
| AND(&) | |
| XOR(^) | |
| OR(|) | |
| かつ(&&) | |
| または(||) | |
| 二項(? :) | |
| 代入(=) 複合代入(+=など) | |
| カンマ(,) |