【Vue・JS】！(否定)で真偽値を返す際の注意点。式はカッコで囲む。

Vueのif文で！を使う際に思った挙動にならなかったので注意点のメモ。

!（否定）の注意点

if文の式の頭で！を使う時は、式をカッコで囲む。

例：配列arrの要素数が1以外の場合は処理を実行する場合。

OK

 if(!(this.arr.length == 1)){
        処理
      }

NG

 if(!this.arr.length == 1){
        処理
      }

NG内容

上記NG事例のようにカッコで囲まないと、!this.arr.lengthの値が１かどうかを判定することになる。

0, null, undefinedはfalseとみなされるため、配列arrの要素数が空（または0、null、undefined）の時以外、!this.arr.lengthはfalseとなる。

よって、１以外で処理実行したいところが、0のみで処理実行で、１以上は処理実行しない結果となる。

例

arr = [1,2,3]

console.log(!arr.length) 　//false
console.log(!arr.length == 0) 　//true (false == false)
console.log(!arr.length == 1)  //false (false == true)
console.log(!arr.length == 2) //false (false == true)
console.log(!arr.length == 3) //false (false == true)

OK内容

!の後ろの式をカッコで囲むと、その式の結果の否定が返るので、意図した形になる。

!(this.arr.length == 1)

ちょっとしたことだけど、基礎は重要。。