5つの人気のあるJavaScriptハック

経験豊富なプログラマーが絶えず使用しているJavaScriptハックがいくつかあります 。 特に初心者にとって、それらは完全には明らかではありません。 これらのハックは、いくつかの副作用がある言語機能を利用します。 この記事では、これらの一般的なハックのうち5つの仕組みを説明します。

演算子を使用します!!



ブール値に変換する

JavaScriptのすべてはtrueまたはfalseとして解釈できます 。 つまり、条件付きif



オブジェクトを配置すると、コードのtrue



トーン（オブジェクトがtrue



）またはfalse



トーン（それぞれオブジェクトがfalse



）が実行されます。



0、false、 ""、null、undefined、NaNはfalse値です。 他のすべての値はtrue



返しtrue



。 変数をブール値に変換する必要がある場合があります。 これは演算子を使用して行うことができます!!



：

 var something = 'variable'; !!something // returns true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一方、 if (x == "test")



代わりにif (x == "test")



単にif (x)



と書くことができます。 x



が空の変数の場合、 else



ブロックのコードが単に実行されます。

+演算子を使用して文字列を数値に変換します

JavaScriptでは、 +



は単項演算子であり、オペランドの数値表現を返すか、オペランドにオペランドがない場合はNaN



を返します。 たとえば、この演算子を使用すると、変数x



数値であるかどうかを確認できます（このようなコードはアンダースコアライブラリで確認できます）： x === +x



。



この方法は明らかではありません。 ほとんどの場合、 parseFloat



メソッドとparseInt



メソッドを使用しparseInt



。

||演算子を使用してデフォルト値を定義する

JavaScriptで||



は短絡の例です。 この演算子は、最初に式をその左側に解析し、それが偽の場合、式を右側に解析します。 いずれにしても、最初の真の式を返します。 次の例を考えてみましょう。

 function setAge(age) { this.age = age || 10 } setAge();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、引数なしでsetAge()



関数を呼び出すため、 age || 10



age || 10



は10（ !!age == false



）を返します。 この方法は、変数のデフォルト値を設定するのに非常に適しています。 実際、このアプローチは次の例と同等です。

 var x; if (age) { this.age = age; } else { this.age = 10; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

演算子||



した最初の例 より簡潔なので、これは世界中で使用されている方法です。



個人的には、この方法をよく使用します。 私はその簡潔さとシンプルさが好きです。 ただし、このメソッドでは、変数を0に設定できないことに注意してください。0は偽の式です。 したがって、必要に応じてこの方法を使用することをお勧めします。

 this.age = (typeof age !== "undefined") ? age : 10;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

未定義の代わりにvoid 0を使用

void



キーワードは1つの引数を取り、常にundefined



を返します。 なぜundefined



使用しundefined



ですか？ 一部のブラウザでは、 undefined



はオーバーライドできる変数にすぎundefined



ためです。 したがって、 void 0



は、誤って破損するものがないという自信を与えます。 このハックは多くのライブラリのソースコードで見つけることができますが、すべてのES5互換ブラウザでは値undefined



上書きが許可されていないため、定期的に使用することはお勧めしません。

パターンのカプセル化（関数（）{...}）（）

ES5には、グローバルスコープと関数のスコープの2種類のスコープしかありません。 あなたが書くものはすべて、コードのどこからでもアクセスできるグローバル領域に属します。 変数と関数の宣言が含まれます。 ただし、ほとんどのコードをカプセル化し、インターフェイスのみをグローバルスコープに残したい場合はどうでしょうか。 次に、匿名関数を使用する必要があります。 次の例を考えてみましょう。

 (function() { function div(a, b) { return a / b; } function divBy5(x) { return div(x, 5); } window.divBy5 = divBy5; })() div // => undefined divBy5(10); // => 2
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この記事にリストされているすべてのハックの中で、このハックは最も無害です。 プロジェクトで使用して、内部ロジックとグローバルスコープとの相互作用を防ぐことができます。



結論として、あなたが書くコードはシンプルで他のプログラマーにとって理解しやすいものでなければならないことを思い出したいと思います。 そして、言語によって提供される標準的な構成要素を最初に使用する必要があります。



この記事で説明したハッキン​​グのいくつかは、ES6（JavaScriptの次のバージョン）を使用してよりエレガントに解決できます。 たとえば、ES6では、 age = age || 10



代わりに age = age || 10



あなたは以下を書くことができます：

 function(age = 10) { // ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もう1つの例は、 (function() {...})()



パターンです。これは、 ES6モジュールが最新のブラウザーでサポートされた後に使用することはほとんどありません。

追加資料

JSハックのトピックをさらに詳しく知りたい場合は、次のリソースが役立ちます。

• バイト節約技術
• JavaScriptの特異性（ちょっと）
• JavaScript言語の高度なヒントとコツ

元の記事： JavaScriptハックの説明

ヤニスTによる投稿