高品質の JavaScript 変数を作成するための 7 つのヒント

読みやすく、理解しやすく、保守しやすい高品質なJavaScript変数を作成するための 7 つのヒントを学びましょう。このチュートリアルでは、適切なJavaScript変数を作成し、コードをよりクリーンにするのに役立つ 7 つの実践方法を紹介します。

開発者は毎日変数を扱います。変数に関する興味深い点の 1 つは、変数が大きな影響を与える可能性があることです。それらはあなたの仕事をはるかに簡単にすることも、はるかに困難にすることもできます。この投稿では、優れたJavaScript変数を作成し、作業を容易にする7 つの実践方法を紹介します。

意味がありわかりやすい変数名を使用する

これは、非常に簡単ですぐに実行できるプラクティスの 1 つですが、無視されることもよくあります。この単純な習慣が大きな影響を与える可能性があるため、これは残念です。コードをよりクリーンにしてスキャンしやすくするのに役立ちます。開発者は時間を大幅に節約できます。考えてみてください。

変数に意味のあるわかりやすい名前を使用すると、その変数が何をするのかを思い出すのにかかる時間が短縮されます。後でそのコードに戻ったときに、そのコードが何をするべきなのか、何に使用されるべきなのかを考える必要はありません。名前を読めば、すべてがすぐに理解できます。

はい、思いついた略語やプレースホルダー名を使用する方が簡単です。ただし、その変数に名前を付けるときに節約した時間は、後でその変数が何をするのかを理解するときに費やされます。意味のあるわかりやすい名前を考えるよりも、その不可解な名前を理解するのにさらに時間がかかることがあります。

// Before:
const flb = fs.readFileSync('/foo/bar/bills.txt', 'utf8')
const cdt = new Date()
const cy = cd.getYear()
const cm = cd.getMonth()
const cd = cd.getDay()
const anms = ['dog', 'cat', 'bear', 'wolf', 'lion']
const clgs = ['Jack', 'Drake', 'Jill']


// After:
const fileWithBills = fs.readFileSync('/foo/bar/bills.txt', 'utf8')
const currentDate = new Date()
const currentYear = cd.getYear()
const currentMonth = cd.getMonth()
const currentDay = cd.getDay()
const animals = ['dog', 'cat', 'bear', 'wolf', 'lion']
const colleagues = ['Jack', 'Drake', 'Jill']

この習慣には別の利点もあります。コードの検索が容易になります。請求書を含むファイルの変数を見つけたい場合は、「fl」、「flb」、「bls」など、当時最初に思いついたものを検索するよりも、「fileWithBills」または「bills」を検索する方が簡単です。次回変数に名前を付けるときに、この時間が節約/無駄になることを考慮してください。

変数をローカルに保つ

変数を宣言するときは、通常、変数をローカルに保持することをお勧めします。これは、偶発的な衝突を避けるのに役立ちます。最も重要なことは、いつか冗長になる可能性のある変数でグローバル名前空間を汚染することを避けるのに役立ちます。したがって、デフォルトで変数をグローバルとして宣言することは避けてください。

代わりに、変数を使用するのと同じスコープで変数を宣言してください。特定の関数で変数を使用したい場合は、グローバルとしてではなく、その関数内で変数を宣言します。これは、複数の場所で変数を使用する場合には適用されません。

このような場合は、その変数をグローバルとして定義して、どのスコープからでも参照できるようにしても問題ありません。

// Before (global variable):
const users = ['joejoe', 'steph', 'phill']

function someFunctionUsingUsers() {
  // Do something with data in "users" variable...
}


// After (local variable):
function someFunctionUsingUsers() {
  // Make "users" variable local:
  const users = ['joejoe', 'steph', 'phill']

  // Do something with data in "users" variable...
}


// Variable is used across codebase:
// Keep "users" variable global:
const users = ['joejoe', 'steph', 'phill']

function someFunctionUsingUsers() {
  // Do something with data in "users" variable...
}

function anotherFunctionUsingUsers() {
  // Do something with data in "users" variable...
}

function yetAnotherFunctionUsingUsers() {
  // Do something with data in "users" variable...
}

varよりletとconstを優先します

JavaScript 変数を宣言するときは、letとconst変数を使用することを優先します。これら 2 つの変数はホイスティング中に初期化されません。がvar吊り上げられ、問題が発生する場合があります。

// var:
console.log(pet)
// Output:
// undefined

var pet
pet = 'turtle'

// let and const:
console.log(pet)
// Output:
// ReferenceError: Cannot access 'pet' before initialization

let pet
pet = 'armadillo'

とは異なりvar、letおよびconstもブロックスコープ変数です。何らかのコード ブロックで宣言すると、そこでのみ表示およびアクセスできるようになります。これはlet、constコード ブロック内で宣言された変数が、そのコード ブロックの外で宣言された同じ名前の変数と衝突しないことを意味します。

コード ブロックとは、 if…elseステートメントとループで作成されたコード ブロックのことも指します。これは変数には当てはまりませんvar。変数varはブロックスコープではありません。これは、グローバルとローカル (関数スコープ) の 2 つのスコープでのみ機能します。関数本体ではないブロックコード内、またはその内部で変数を宣言するvarと、グローバル変数になります。

この変数はデフォルトでどこからでも表示およびアクセスできるようになり、他の変数と衝突する可能性があります。

// Before with var:
// Create global var variable:
var name = 'Jack'

if (true) {
  // Create var variable in if...else block
  // with the same name as the global variable:
  var name = 'Tobias'
}

// Log the value of global "name" variable:
console.log(name)
// Output:
// 'Tobias'


// After with let (and also const):
// Create global let variable:
let name = 'Victoria'

if (true) {
  // Create let variable in if...else block
  // with the same name as the global variable:
  let name = 'Susan'
}

// Log the value of global "name" variable:
console.log(name)
// Output:
// 'Victoria'

割り当てごとに1 つのletとconst を使用します

この実践の効果は小さいように見えますが、それでも作業が少なくとも少しは楽になります。let割り当てごとに1 つを使用する理由は 2 つありますconst。1 つ目の理由は、割り当てletごとconstに、デバッガー (開発ツール) を使用して各宣言をステップ実行できるためです。

これにより、コードの操作や潜在的な問題のデバッグが容易になります。,2 番目の理由は、コンマ ( ) とセミコロン ( ;) とその逆の誤った交換を避けるためです。これは、コードを作成するときだけでなく、コードを読み取るときにも発生する可能性があります。まあ、特にそれを読むとき。,と混同しやすいです;。

// Before (let/const and multiple assignments):
const name = 'Tommy'
age = 32
career = 'DevOps engineer'
skills = ['git', 'docker', 'kubernetes', 'JavaScript', 'serverless']

// After (let/const and one assignment):
const name = 'Tommy'
const age = 32
const career = 'DevOps engineer'
const skills = ['git', 'docker', 'kubernetes', 'JavaScript', 'serverless']

変数を宣言するときに変数を初期化する

JavaScript 変数を宣言するときに初期化する方が良い理由は 2 つあります。1 つ目の理由は、変数が未定義である場合に潜在的なエラーを回避できるためです。これは時々起こることがあります。変数を宣言して初期化する前に参照するのは非常に簡単です。

2 番目の理由は、純粋に実用的かつ美的です。宣言時に変数を初期化すると、コードを短くできます。これら 2 つのタスクを個別に実行するには、2 行以上が必要になります。これらを同時に実行するには、必要なコードは 1 行だけ、または少なくとも他の方法よりも少ない行です。

// Before:
// Declare variables:
let name, age, hobbies

// ... and initialize them later:
name = 'Joe'
age = 57
hobbies = ['playing games', 'reading books']


// After:
// Declare and initialize variables:
let name = 'Joe'
let age = 57
let hobbies = ['playing games', 'reading books']

先頭で変数を宣言する

可能な限り、JavaScript 変数を現在のスコープの先頭で宣言するようにしてください。これには 3 つの目的があります。まず、コードをクリーンにするのに役立ちます。あなたやあなたのコードを扱う他の人々は、すべての変数がスコープの先頭で宣言されていることを知っていれば、必要なときにどこを調べればよいのかがわかります。

この方法を実践しないと、特定の変数を探すときにコード全体を検索する必要があります。2 番目の理由は、変数が定義される前に参照することを回避できるためです。すべての変数が先頭で宣言されている場合、後続のものはこれらの変数を安全に参照できます (letまたはを使用する場合const)。

3 番目の理由は、既存の変数を誤って再宣言することを回避しやすくなることです。最新の IDE とインテリセンスでは、これが発生する可能性は低くなります。ただし、まだ可能です。すべての JavaScript 変数が先頭にある場合、この可能性は低くなり、何らかの名前がす​​でに使用されているかどうかをすぐに確認できます。

使用する場所に変数を作成する

これは、前のルールの例外のように見えるかもしれません。それは可能性があります。ただし、特殊な場合には特別なアプローチが必要になる場合があります。これらのケースの 1 つは、特定の場所で 1 つの目的のために使用する変数を割り当てる場合です。この状況では、その場所またはその近くにその変数を作成することをお勧めします。

これを行うと、関連するコードをグループ化するのに役立ちます。このグループ化により、コードがクリーンになり、ざっと読んで理解しやすくなります。

// Before:
const stuff = ['mess']

// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...

function functionUsingStuff() {
  // Do something with data in "stuff" variable...
}


// After:
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...

const stuff = ['mess']
function functionUsingStuff() {
  // Do something with data in "stuff" variable...
}


// Alternately:
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...
// a lot of code...

function functionUsingStuff() {
  const stuff = ['mess'] // i.e. keep variables local
  // Do something with data in "stuff" variable...
}

結論

JavaScript 変数の名前付けは、高度な科学を必要とするわけではありません。仕事を楽にする、簡単に実行できるプラクティスがいくつかあります。ここで説明した 7 つの内容が、優れた JavaScript 変数を作成し、コードをよりクリーンにするのに役立つことを願っています。

#javascript