【Javascript】 ifと比較演算子

Javascriptにおけるifは、動的型付け言語特有の"0" == 0がtrueになるなどの厄介なポイントがあります。それを回避するための厳密等価演算子も紹介します。

if文

C言語と同様の、普通の書き方です。

const hoge = 200;
if (hoge > 100) {
    console.log("hogeは100より大きい");
}
else if (hoge == 100) {
    console.log("hogeは100");
}
else {
    console.log("hogeはそれ以外");
}

1ステートメントなら波括弧は省略できます。

const hoge = 200;
if (hoge > 100) console.log("hoge");

if (hoge == 200)
    for (let i = 0; i < hoge; i++)
        console.log(i);

ifとtrueの条件

早見表に近い形式で紹介します。

// console.log(false)は出力されないもの、trueは出力されるもの

let x = 0;
if (x == 0) {
    console.log(true);
}
if (x) {
    console.log(false);
}
if (!x) {
    console.log(true);
}

let y = 100;
if (y) {
    console.log(true);
}

let z;
if (z) {
    console.log(false);
}

let a = [1, 2, 3];
if (a[100]) { // a[100]はエラーではなくundefined
    console.log(false);
}

if (null) {
    console.log(false);
}

if ("0") {
    console.log(true);
}

if ("") {
    console.log(false);
}

if (1 == "1") {
    console.log(true);
}

if (1 == "1.0") {
    console.log(true);
}

if (1 == "1aa") {
    console.log(false);
}

if(null == "null") {
    console.log(false);
}

if ("1" === "1") {
    console.log(true);
}

if (1 === "1") {
    console.log(false);
}

if (1 && 0) {
    console.log(false);
}

if (1 || 0) {
    console.log(true);
}

if ([]) {
    console.log(true);
}

if ([0]) {
    console.log(true);
}

if ({}) {
    console.log(true);
}

このように、条件式の結果が+-0、false、null、undefined、NaN、""かどうかで判定されています。C++やJavaなどとほぼ同じ挙動ですね。

唯一異なるのは、数値の文字を比較したときの挙動です。数値と、数値に変換できる文字列で比較した場合、文字列が数値に変換されて比較が行われます。これを回避したい場合、===を用いて型も比較します。

console.log(0 == "0");
console.log(0 === "0");

true
false

0やnull等との比較早見表

一瞬falseになるのかtrueになるのか分かりづらい部分の早見表です。見ると分かる通り、複雑怪奇です。そのため、基本的には厳密等価演算子(===)を用いることを推奨します。

演算子

他言語と大差ありません。厳密等価演算子が追加されている程度です。

• ==
• === (型も比較される)
• !=
• <
• <=
• >
• >=
• !
• &&
• ||

文字列の比較

文字列を比較した場合、Unicode順で判定されます。一般的な挙動です。

if ("あ" < "い") {
    console.log("OK");
}
if ("abcde" < "aaaaaaaa") {
    console.log("NG");
}
if ("a" == "a") {
    console.log("OK");
}

条件式内で代入

条件式で代入文を利用できます。Javascriptでは、代入文の計算結果は代入した値です。つまり、x = 5の計算結果は5です。

let x;
const y = 100;

if (x = y) {
    console.log(x);
}

if (x = 0) {
    console.log("0が代入されるので、計算結果は0のため実行されない");
}

例えば、メソッド実行時に代入するついでにfalseになっていないかif分岐、といったことにも使えます。

function validate() {
    if (1) {
        return "xxxが間違っています"; // validation error
    }
    return ""; // validation ok
}

let x;
if (x = validate()) {
    console.error(x); // エラー文を表示
}

宣言を同時にすることはできないので注意が必要です。(if (const x = 100) {}のようなのはエラー)

まとめ

Javascriptにおけるifの仕様を紹介しました。動的型付け特有の挙動以外は一般的な仕様と言えますね。