7 методов создания полезных переменных JavaScript

Используйте понятные и осмысленные имена переменных

Это одна из тех практик, которые очень легко и быстро реализовать, но которыми часто пренебрегают. Это прискорбно, потому что этот простой совет может иметь большое влияние. Он может помочь сделать код намного чище и проще. Использование понятных имен переменных может сэкономить разработчикам много времени.

Когда вы используете осмысленные и понятные имена для переменных, вам нужно меньше времени, чтобы запомнить, что делает эта переменная. Когда, позже, вы вернетесь к этому фрагменту кода, вам не нужно думать о том, что должна делать переменная или для чего она используется. Вы читаете название, и все сразу становится понятным.

Да, проще использовать какое-нибудь сокращенное название, которое только что пришло в голову. Однако то время, которое вы сэкономили, когда вы назвали переменную, будет потрачено позже, когда вы попытаетесь выяснить, что она делает. На то, чтобы понять это загадочное имя, может потребоваться даже больше времени, чем на то, чтобы придумать понятное и очевидное имя.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript // 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’]

123456789101112131415161718

// 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’]

У этой практики есть еще одно преимущество. Поиск переменних станет легче. Когда вы хотите найти переменную со счетами, проще искать «fileWithBills» или «bills», чем «fl», «flb», «bls» или что-то еще, что приходило на ум во время написания кода. Считайте это время сэкономленным в будущем.

Используйте локальные переменные

Когда вы объявляете переменные, обычно лучше сделать их локальными. Это поможет избежать случайных колизий. Самое главное, это поможет вам избежать загрязнения глобального пространства имен переменнымых, которое в какой-то момент может стать избыточными. Поэтому старайтесь не объявлять переменные глобальными по умолчанию.

Вместо этого объявите свои переменные в той же области видимости, в которой вы хотите их использовать. Если вы хотите использовать какую-либо переменную в определенной функции, объявите ее внутри этой функции, а не как глобальную. Но это не применимо к ситуациям, когда вы хотите использовать какую-либо переменную в нескольких местах.

Когда это происходит, можно определить эту переменную как глобальную, чтобы вы могли ссылаться на нее из любой области.

JavaScript // 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… }

1234567891011121314151617181920212223242526272829303132

// 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…}

Используйте let и const вместо var

При объявлении переменных JavaScript, предпочитают использовать let и const переменные. Эти две переменные не инициализируются во время поднятия (hoisting). Переменная var — инициализируется, и иногда это может привести к проблемам.

JavaScript // 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’

123456789101112131415

// var:console.log(pet)// Output:// undefined var petpet = ‘turtle’ // let and const:console.log(pet)// Output:// ReferenceError: Cannot access ‘pet’ before initialization let petpet = ‘armadillo’

В отличие от var, let и const также являются переменными с блочной областью видимости. Когда вы объявите их в каком-то блоке кода, они будут видны и доступны только там. Это означает, что переменные let и const, объявленные внутри блока кода не будут пересекатся с переменными, с тем же именем, объявленная вне этого блока.

Под блоками кода мы также говорим о блоках, созданных с помощью операторов if… else и циклов. Это не относится к переменным var. Переменная var имеет внеблочную область видимости. Она работает только в двух областях: глобальной и локальной (область действия). Объявление переменной var внутри блочного кода, который не является телом функции, или внутри него, приведет к глобальной переменной.

Эта переменная будет видима и доступна отовсюду и может конфликтовать с другими переменными.

JavaScript // 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’

123456789101112131415161718192021222324252627282930

// 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’

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Используйте по одному let и const для каждого присваивания

Может показаться, что эта практика имеет меньшее влияние, но она все же может хотя бы немного облегчить вашу работу. Есть две причины для использования одного let и const для каждого присвоения. Первая причина заключается в том, что одно let и const присвоение позволяет вам пройтись отладчиком по каждому объявлению (в инструментах разработки).

Это может упростить работу с кодом и отладить потенциальные проблемы. Вторая причина — избежать случайной замены запятой (,) точкой с запятой (;) и наоборот. Это может произойти как при написании кода, так и при его чтении. Ну особенно когда читаешь. Легко спутать «,» с «»».

JavaScript // 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’]

1234567891011

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

Инициализировать переменные при их объявлении

Есть две причины, по которым лучше инициализировать переменные JavaScript при их объявлении. Первая причина в том, что это помогает избежать потенциальных ошибок, когда некоторая переменная не определена. Иногда такое бывает. Очень легко объявить переменную и сослаться на нее, перед ее инициализацией.

Вторая причина чисто прагматическая и эстетическая. Инициализация переменных при их объявлении помогает сделать код короче. Выполняя эти две задачи по отдельности, вам понадобятся две строки или больше. Для их одновременного выполнения требуется всего одна строка кода или, по крайней мере, меньше строк, чем альтернативный вариант.

JavaScript // 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’]

123456789101112131415

// Before:// Declare variables:let name, age, hobbies // … and initialize them later:name = ‘Joe’age = 57hobbies = [‘playing games’, ‘reading books’]  // After:// Declare and initialize variables:let name = ‘Joe’let age = 57let hobbies = [‘playing games’, ‘reading books’]

Объявлять переменные в верхней части

По возможности старайтесь объявить переменные JavaScript в верхней части текущей области видимости. Это служит трем целям. Во-первых, это помогает сделать ваш код чище. Когда вы и другие люди, работающие с вашим кодом, знаете, что все переменные объявлены наверху области, они знают, где их искать, когда им будет нужно.

Без этой практики вам пришлось бы искать конкретную переменную в коде. Вторая причина заключается в том, что это помогает избежать ссылок на переменные до их определения. Когда все переменные объявлены вверху, все последующее может безопасно ссылаться на эти переменные (если вы работаете с let или const).

Третья причина заключается в том, что это позволяет избежать случайного повторного объявления существующих переменных. Это менее вероятно с современными IDE. Однако это все еще возможно. Эта вероятность ниже, когда все переменные JavaScript находятся наверху, и вы можете быстро проверить, используется ли какое-либо имя.

Создавайте переменные там, где вы их используете

Это может показаться исключением из предыдущего правила. Может быть. Однако в частных случаях иногда требуется особый подход. Один из таких случаев — когда вы назначаете переменные, которые хотите использовать в одном конкретном месте. В этой ситуации лучше создать эту переменную в этом месте или рядом с ним.

Это поможет вам сгруппировать связанный код вместе. Такая группировка сделает ваш код более чистым, более легким для поиска и понимания.

JavaScript // 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… }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

// 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…}

Заключение: 7 приемов создания хороших переменных JavaScript

Именование переменных JavaScript не имеет ничего общего с наукой о ракетах. Есть несколько легко реализуемых приемов, которые упростят вашу работу. Я надеюсь, что эти семь, которые мы обсудили, помогут вам создать хорошие переменные JavaScript и сделать ваш код чище.

Автор: Alex Devero

Источник: webformyself.com