JavaScriptの !! (論理演算子)の取り扱いについて

当方スペック

• Railsエンジニア(Web業界歴ともに半年)
• JavaScriptが凄い苦手・・・
• 最近 Vue.js を勉強し始めている(普段は仕事で AngularJSを使用)

背景

JavaScriptを実務でいじっていた際に !!変数 の形でコード上に記載があったのを発見！
とはいえ自分の実装範囲とは関係なかったので深く追いかけず...
しかし、数日経って気になり、
これってどういう時を想定して使うんだろ？？と思ったものの
ネットでググってもドンピシャな記事が出てこない！！困った...
そんな悩める自分のようなプログラミング初心者の助けになればと思い投稿しました

検証環境

• Macのコンソールにてnodeを実行して検証
• nodeのバージョンは v8.9.4
• nodeが入っていない方は、Homebrewやnodebrewでnodeを入れて下さい！！

参考
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
https://qiita.com/takeshi81/items/805f504503cd93151ca6

検証(以下、ターミナルでnodeコマンド実行し、確認)

# nodeコマンドを実行

~/workspace  node

以下、nodeのコンソール
↓↓↓

# undefined(初期化されていないオブジェクト)の場合

> let hoge
undefined

> !hoge
true

→ undefinedに対して ! を1つ付けると真偽値に変化する 

> !!hoge
false

→ undefinedに対して !! を付けると真偽値がさらに反転する

# nullの場合

> let fuga = null；
undefined
> fuga
null
> !fuga
true

→ ! でnullが真偽値のtrueに変化する

> !!fuga
false

→ !! でさらに真偽値が反転する

どんな場合に使うのか？

• 必ず真偽値で判定を行いたいケースで使うみたいです
  →真偽値に変換することで意図しない挙動防止するため

想定される使い方サンプル

# 値がnullやundefinedの場合はfalseにしたいが、そこに値が入っている場合はtrueにしたい時??

> hoge = null;
null
> !!hoge
false

> let foobar
undefined
> !!foobar
false

> hoge = 2;
2
> !!hoge
true

if(!!変数) {
  何らかの処理
}

↑↑↑

< 追記 >
!! は結局キャスト(型変換)するだけなので、値が undefined でも null だった場合でも !!変数とすることで値が false になります。
わざわざ !! を使わずに true の時だけ処理したい場合は以下の書き方で判定すれば良さそうです。

if(変数)　{
 何らかの処理
}

最後に

今回はJavaScriptにおいて絶賛苦手克服中の自分のメモとして投稿させて頂きました。
記載内容に誤りなどありましたら、ご指摘いただければ幸いです。