はじめに

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

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

導入

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

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

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

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

最後に

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

参考

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.