ジャバスクリプト — 避けるべきこと

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
他のプログラミング言語と同様に、JavaScriptはプログラムを読みやすく維持するためにベストプラクティスの独自のリストを持っています.JavaScriptにトリッキーな部分がたくさんあるので、避けるべきことがたくさんあります.
我々はJavaScriptコードを読みやすくするために簡単にいくつかのベストプラクティスに従うことができます.
この記事では、可能な限りグローバル変数を宣言したり、文字列をsetInterval and setTimeout , the with ステートメントなど.

グローバル変数の宣言を避ける

グローバル変数の使用をできるだけ多くの理由で避ける必要があります.
つは、彼らがどこでも利用可能であるので、彼らが異なる場所で上書きするのが簡単であるということです.彼らはまた、物事を上書きすることができますwindow グローバル変数からのオブジェクトはwindow オブジェクト.
これらの2つのコードは、次のハードを行う本当の問題です.したがって、ローカル変数をできるだけ定義する必要があります.
ローカル変数を定義するにはvar , let , or const キーワード.
変数var が定義される前に定義されているレベルで利用可能です.例えば、以下のように書くと

const log = () => {
  console.log(x);
}
log();
var x = 1;
log();

その後、我々は得るundefined 最初にconsole.log と2番目のログの1つ.
書くのと同じです.
で宣言された変数let が定義された後にのみ利用可能です.

const log = () => {
  console.log(x);
}
log();
let x = 1;
log();

エラーが発生しました:

Uncaught ReferenceError: Cannot access ‘x’ before initialization

とconst キーワード、我々は一度だけではなく、二度と割り当てられることができる定数を定義します.また、宣言された後にのみ利用可能ですvar .
例えば、以下のように書くことができます.

const log = () => {
  console.log(x);
}

const x = 1;
log();

呼び出しlog 以前const x = 1 も私たちを得るUncaught ReferenceError: Cannot access ‘x’ before initialization .
プログラムの異なる部分で利用可能な変数を必要とするなら、JavaScriptモジュールを使用して、コードを解放するとき、モジュールを一つまたはいくつかの大きなファイルに構築しなければなりません.これはES 6以降で利用可能です.
私たちはexport 変数とimport 他のモジュールに入れます.またexport default モジュール全体をエクスポートする.この方法では、モジュールの外部で利用できるものをエクスポートし、他のすべてをプライベートにします.
また、外部にアクセスできないように、関数の中で変数を保持するクロージャを使うこともできます.簡単なクロージャの例は次のようになります.

const divide = () => {
  const x = 3;
  return () => x * 2;
}

我々は守るx インサイドdivide 関数は外部にアクセスできず、何かを行う関数を返すことができません.
それから、以下のように書く.

console.log(divide()());

写真でMatt Jones をUnsplash

文字列をsetintervalまたはsettimeoutに渡しません

私たちは、setInterval or setTimeout コールバック関数の代わりに機能します.
コールバック関数の代わりに文字列を渡すと、ブラウザが使用されますeval 文字列内のコードを実行するには、コードが入力された攻撃に対して脆弱で脆弱です.
したがって、私たちが本当にオンザフライで生成されるコードを実行する必要がない限り、理由が全くありません.
書く代わりに

setTimeout(
  "document.getElementById('foo').textContent = 'foo'", 1000
);

書くべきです.

setTimeout(() => {
  document.getElementById('foo').textContent = 'foo';
}, 1000);

" with "ステートメントを使用しないでください

表面にはwith ステートメントは、オブジェクトの深く入れ子になったプロパティにアクセスするための良いショートカットのようです.例えば、以下のように書くことができます.
の代わりに:
しかし、それは世界的な範囲を汚染しますbaz はwith 文.これは、新しい変数を宣言することもできますwith 文
宣言したbaz 内部with , しかし、それは外でアクセスできません.
幸いにも、JavaScriptの厳しいモードで使用することはできませんので、with 今すぐ.

varキーワード

ES 6で、我々はブロックスコープを持っているlet and const 変数と定数をそれぞれ宣言するためのキーワード.変数を宣言するためにそれらを使用できます.
で宣言された変数var 混乱した範囲があります.ブロックのようなブロックで宣言されたとき、ブロック外で利用可能ですif ブロックまたはループ.
以下のようになります.

for (let i = 0; i < 10; i++){
  var j = i;
}
console.log(j);

作品var , しかし、我々が置換するならば、我々は誤りを得ますvar with let .
スコープが混乱しているので、私たちはvar 変数を宣言するには

結論

JavaScriptを書くとき、JavaScriptの初期のバージョンに存在していた多くの古い構造物を避けたい.彼らは私たちのコードを読むのは難しいし、それを簡単にバグを作成することです.
まず、グローバルスコープで誤って物事を参照し宣言するのを避けるためのグローバル変数宣言を避けたい.また、グローバル変数の値を誤って変更する可能性が減少します.
また、コールバック関数で渡す代わりに、文字列でコードを渡すのを止めなければなりませんsetTimeout and setInterval 関数.これはeval 文字列に格納されたコードを実行するために使用されます.コードは、コードのインジェクション攻撃を行います.
また、我々は避ける必要がありますwith グローバルスコープで変数を作成するためです.
同様に、宣言された変数の混乱した範囲のためにvar キーワードで、変数を宣言するのを避けるべきですvar キーワード.