Javascript — один из лучших языков программирования, который используется для разработки веб-приложений. В настоящее время использование Javascript очень широко, мы используем их для разработки интерфейсных приложений, серверных приложений, создания баз данных и даже в машинном обучении и искусственном интеллекте с поддержкой других библиотек.
Позвольте мне быстро указать на несколько простых, но эффективных способов, которые могут помочь вам писать более качественный и читаемый код на Javascript.
Константа против Пусть:
В Javascript есть несколько способов объявления и использования переменных, в прежние времена мы использовали для объявления переменных использование «var», но у этого были свои проблемы, такие как мутации, область видимости и другие вещи. Позже, когда был представлен ES6, мы получили два новых способа объявления и использования переменных, т. е. ‘const’ и ‘let’. Но какой из них мы должны использовать?
Проще говоря, всегда придерживайтесь «const», но если у вас есть случай, когда вы можете переопределить или переназначить значение переменной, вы можете использовать «let». Соблюдение этого правила гарантирует, что значения не изменятся, и приведет к предсказуемому поведению.
// Let allows variable value to be re-assigned let marks = 90; marks = 100; console.log(marks); // prints 100; const marks = 30; marks = 100; // Throws error as we can't re-assign the values of a const
Необязательная цепочка
Отказ от ответственности: эта функция доступна только в Node.js 14+, проверьте совместимость перед использованием ее в своем коде.
Это одна из функций, которая позволяет вам писать менее читаемый код, когда вы хотите безопасно получить доступ к узлам внутри объекта и избежать исключений нулевого указателя.
Например, предположим, что у вас есть вложенный объект, и вы обращаетесь к последнему дочернему узлу объекта. Обычно, когда мы проходим через этот объект, вы можете проверить наличие каждого узла перед доступом к его дочернему узлу, как показано ниже.
const developer = {
name: 'Adam',
address: {
state: 'CA',
},
};
const state = developer && developer.address && developer.address.state;
Но с опциональной цепочкой мы могли бы написать приведенный выше код намного проще.
const developer = {
name: 'Adam',
address: {
state: 'CA',
},
};
// using optional chaining.
const state = developer?.address?.state;
Переключить регистр вместо нескольких IF-ELSE
Традиционно мы будем писать любые условные операторы, используя if-else, и это совершенно нормально, но проблема возникает, когда у вас есть несколько операторов if-else-if внутри функции.
let city = '';
if (location === 'NY') {
city = 'New York';
} else if (marks === 'LA') {
city = 'Los Angeles';
} else if (marks === 'CA') {
city = 'California';
}
В этом случае мы могли бы использовать случай Switch вместо оператора if-else-if, как правило, рекомендуется использовать случай переключения, когда у вас есть более 3 операторов if-else-if, и это чисто для удобства чтения.
switch (shortForm) {
case 'NY':
city = 'New York';
break;
case 'LA':
city = 'Los Angeles';
break;
case 'CA':
city = 'California';
break;
default:
};
Иногда даже лучше использовать карты вместо операторов switch case, как показано ниже.
const cities = {
NY: 'New York',
LA: 'Los Angeles',
CA: 'California',
};
console.log(cities.NY) // prints "New York"
Тернарный и короткозамкнутый
Еще один способ написать однострочный, читаемый условный код — использовать тернарный оператор или оператор короткого замыкания в Javascript.
// Using Ternary Operator.
const category = marks >= 80 ? 'Distinction' : 'Average';
// Using Short circuiting ( && || ) operator
const category = (marks >= 80 && 'Distinction') || 'Average';
// Using if-else
let category = 'Average';
if (marks >= 80) {
category = 'Distinction';
}
Условное добавление ключей к объекту
Обычно, если мы хотим добавить новый ключ к объекту, мы делаем что-то вроде Object.key (MyObject.newKey = value), а если мы хотим условно добавить ключ, мы используем оператор if -else, но это может стать беспорядочным, если у вас есть несколько ключей, которые необходимо добавить, и каждый из которых основан на разных условиях. Мы также можем решить эту проблему, используя оператор распространения в Javascript.
// Using if-else to add keys to the object
const developer = {
name: 'John',
techStack: 'Node.js',
};
if (data?.address?.length > 0) {
developer.address = 'CA';
}
// Using spread operator.
const developer = {
name: 'Adam',
techStack: 'c#',
...(data?.address?.length && { address: 'CA' })
};
Строгая проверка равенства (=== против ==)
Это еще одна распространенная ошибка, которую мы, разработчики, делаем при написании кода. Может показаться, что и Triple equals, и double equals делают одно и то же, но это не так. Никогда не используйте двойное равенство в javascript, всегда используйте тройное равенство (===), потому что двойное равенство не проверяет тип значений при проверке равенства, а тройное равенство всегда проверяет равенство вместе с типом значений. То же самое относится и к операторам «не равно».
const LHS = true;
const RHS = '1';
if (LHS == RHS) console.log('Both are equal') // prints the statement
// prints nothing as LHS is of type Boolean and RHS is of type String
if (LHS === RHS) console.log('Both are equal')
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true; // false
Деструктуризация объекта:
Используя реструктуризацию объектов, мы можем избежать многострочных объявлений переменных и можем просто извлекать значения из объектов и объявлять их в переменных в одной строке, как показано ниже.
// Our object
const developer = {
name: 'Andrew',
experience: 30,
techStack: 'Node.js',
}
// Traditional way
const name = developer.name;
const experience = developer.experience;
const techStack = developer.techStack;
// Using object destructuring
const { name, expericence, teckStack } = developer;
Правильные правила линтинга
Это снова важная вещь, которую вы должны настроить в своем проекте, это определенно поможет следовать общему стандарту кодирования для разработчиков. Мы могли бы обеспечить это несколькими способами.
- Если вы используете IDE VS-Code, вы можете добавить это как расширение, и оно будет показывать вам предупреждения на основе правил ES lint, которые вы можете указать в своем приложении с помощью файла .eslintrc.json
Ref: https://eslint.org/ - Кроме того, вы можете установить это как хук перед фиксацией, используя такие инструменты, как Husky и Lint-staged (модули npm). Создание хука перед коммитом гарантирует, что разработчик сможет создать коммит только тогда, когда будут выполнены все правила ES lint.
Завершающие запятые
Это снова дискуссионная тема, некоторые люди предпочитают добавлять конечные запятые при создании объектов, а некоторые нет, но лично я предпочитаю использовать конечные запятые, потому что они очень помогают мне в PR-обзорах. Допустим, у вас есть несколько ключей в объекте, и у вас нет завершающей запятой в конце. Позже вы захотите добавить дополнительные ключи сейчас, в этом случае вы добавите запятую к последнему добавленному ключу, а затем начнете добавлять новые ключи, теперь, если вы возьмете это с точки зрения GitHub, поскольку вы добавили запятую к предыдущему ключ, он будет считать, что вы изменили эту строку, и покажет, что как изменение в GitHub это может показаться проблемой не для простых объектов, но в более долгосрочной перспективе, когда приложение растет и у вас есть экспортированные функции вместо простых ключей это имело бы смысл.
В дополнение к вышесказанному мы могли бы следовать приведенному ниже, который является общим для любого языка.
- Наличие модульных компонентов и выделение одной задачи функции очень поможет с точки зрения модульного тестирования.
- Добавляйте правильные комментарии к своим блокам кода, но никогда не переусердствуйте.
- Следуйте принципу DRY (не повторяйтесь) и повторно используйте как можно больше функций.
- Добавьте к своим функциям случаи модульного тестирования и убедитесь, что охвачены как положительные, так и отрицательные случаи.
- Дайте вашим переменным правильные имена и избегайте таких имен, как x, y и value1. Всегда предоставляйте читаемые и краткие имена переменных.
- Избегайте циклической зависимости между файлами.
Удачного кодирования 👍
