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