JavaScript 「!!」これはなんですの!?

はじめに

JavaScript Advent Calendar 2017 - Qiitaの24日目の記事です。

小ネタですが空いてたので失礼します

導入

みなさんはこんなソースを見たことがありますか？

var hoge = !! document.getElementById('hoge');

これを見たときの僕はこんな感じです。

! < 「やあ」
知ってる知ってる否定!否定だよ!

!! < 「よろしくね」
ん?流れ変わったな...否定の否定...え、なにこれ怖い...

!!はboolean型への型変換だった

結論から言うとそういうことです。
そもそも!自体が「否定」とbooleanへの型変換を行う役割があるそうです。
挙動をまとめると以下のようになります。

<div id="hoge">ホゲホゲホゲー</div>

var hoge1 = document.getElementById('hoge');
console.log(hoge1);
// result: <div id="hoge">ホゲホゲホゲー</div>
var hoge2 = ! document.getElementById('hoge');
console.log(hoge2);
// result: false
var hoge3 = !! document.getElementById('hoge');
console.log(hoge3);
// result: true

var huga1 = document.getElementById('huga');
console.log(huga1);
// result: null
var huga2 = ! document.getElementById('huga');
console.log(huga2);
// result: true
var huga3 = !! document.getElementById('huga');
console.log(huga3);
// result: false

以下のコードとの違いは??あるのでしょうか？教えてすごい人

var hoge4 = Boolean(document.getElementById('hoge'));
console.log(hoge4);
// result: true

最後に

下記のサイトを参考にさせていただいたのですが、他にも色々ありますね。
できるだけシンプルに書くのがいいのか、誰でもわかるように書くのがいいのか...
それはプロジェクト次第でしょう

参考

• JavaScriptの謎コードまとめ