🕚 👉🏾 ⛳️ 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ハックの説明
ヤニスTによる投稿

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