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:ホゲホゲホゲー

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

最後に

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

参考