❕
ビックリマーク2つの正体!! Double exclamation mark !!
結論
"!!"は直後の変数の二重否定を取り、あらゆる定数や変数を真偽値へ変換する。
!!hoge === Boolean(hoge) // true
検証
▼ 基礎的な真偽値 (true or false)
Boolean(true) === true;
Boolean(false) === false;
Boolean(null) === false;
Boolean(undefined) === false;
Boolean("") === false;
Boolean(0) === false;
Boolean(1) === true;
▼ "!"は否定の NOT を取る(真偽値を反転させる)
!true === false;
!false === true;
!0 === true;
!1 === false;
▼ "!!"を用いた真偽値(二重否定)
!!true === true; // true === true
!!false === false; // false === false
!!0 === false; // 0 == false;
!!1 === true; // 1 == true;
!!null === false; // Boolean(null) === false;
!!undefined === false; // Boolean(undefined) === false;
!!"" === false; // Boolean("") === false;
!!{} === true; // Boolean({}) === true;
!![] === true; // Boolean([]) === true;
つまり、、!!
!!true === true; // true
!!false === false; // true
!!null === Boolean(null); // true
!!undefined === Boolean(undefined); // true
!!"" === Boolean(""); // true
!!0 === Boolean(0); // true
!!1 === Boolean(1); // true
!!{} === Boolean({}); // true
!![] === Boolean([]); // true
まとめ
"!!"は直後の変数の二重否定を取り、あらゆる定数や変数を真偽値へ変換する。
!!hoge === Boolean(hoge) // true
さいごに
この記事を書いたのは、最近アサインした開発現場にて、"!!"が多用されており「なんだこれ?」と疑問に感じたのがきっかけです。ここでは、React-Hook-Form が使われていたため、相性や何かの思惑があるのかもしれません。。それを知るのはまだ先の話。
Discussion