Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

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:

参考

ayies128
株式会社illustrious CTO。 EC業務を色々な角度から効率化できるように日々システム開発を行っています。 システム開発の話から飲みに行こうって話までなんでもどうぞ。 うどんとお酒と #UVERWorld が大好きです。 世界で売るためのECインフラサービス「lismoa」の開発運営を行なっています。 https://lismoa.com/
http://nabesys.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away