Не тратьте время на написание длинного кода, вы можете сделать его коротким, но при этом более понятным и легким для чтения.

У всех есть двадцать четыре часа в сутки.

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

Один из способов сделать это - сократить код с помощью следующих 15 приемов.

1. Сокращение объявления переменных

Если это не имеет смысла, не объявляйте каждую переменную в каждой строке. Одной строки достаточно, сэкономьте места.

Вместо того:

let name;
let price = 12;
let title;
let discount = 0.3;

Сделай это:

let name, price = 12, title, discount = 0.3;

2. Условное обозначение

Я думаю, что это так очевидно, но пока это служит предмету обсуждения, я вставляю это.

Вместо того:

if (isUsernameValid === true) {}
if (isExist === false) {}

Сделай это:

if (isUsernameValid) {}
if (!isExist) {}

3. Использование десятичной базовой экспоненты

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

Вместо того:

let length = 10000;
for (let i = 0; i < length; i++) {}

Сделай это:

let length = 1e4;
for (let i = 0; i < length; i++) {}

4. Параметры по умолчанию

Иногда вам нужно определить функцию с несколькими параметрами. Вам нужно передавать все значения параметров каждый раз, когда вы вызываете функцию? Не совсем, если вы инициализируете значения по умолчанию.

Вместо того:

let generateBookObject = (name, price, discount, genre) => {
  let book = { name, price, discount, genre };
  return book;
};
let book = generateBookObject(‘JavaScript’, 12, 0.3, ‘Technology’); // { name: ‘JavaScript’, price: 12, discount: 0.3, genre: ‘Technology’ }

Сделай это:

let generateBookObject = (name = ‘JavaScript’, price = 12, discount = 0.5, genre = ‘Technology’) => {
  let book = { name, price, discount, genre };
  return book;
};
// In case discount and genre are the same as the default values, you don’t need to pass them to the function
let book = generateBookObject(‘JavaScript’, 12); // { name: ‘JavaScript’, price: 12, discount: 0.5, genre: ‘Technology’ }

5. Тернарный оператор

Если в условном операторе есть только один оператор, сократите его до одной строки с помощью тернарного.

Вместо того:

let name = ‘Amy’;
let message;
if (name === ‘Amy’) {
  message = ‘Welcome back Amy’;
} else {
  message = ‘Who are you?’;
}

Сделай это:

let name = ‘Amy’;
let message = name === ‘Amy’ ? ‘Welcome back Amy’ : ‘Who are you?’;

6. Краткий вариант перебора списка

Не в каждом случае вы можете заменить метод цикла на короткий, но если это произойдет, то сделайте это.

Вместо того:

let names = [‘Amy’, ‘James, ‘David’, ‘John’];
for (let i = 0; i < names.length; i++) {}

Сделай это:

let names = [‘Amy’, ‘James, ‘David’, ‘John’];
for (let name of names) {}

В случае, если индексы имеют значение:

for (let [index, name] of names.entries()) {}

7. Минимальная оценка

Вы должны убедиться, что переменные в порядке (под OK я имею в виду, что они не равны null или undefined), прежде чем использовать их для каких-либо вычислений.

В этом случае подходит if… else, но лучше использовать минимальную оценку.

Вместо того:

let book = {
  name: ‘Learn JavaScript’,
  price: 15
};
let finalPrice;
if (book.discount !== undefined || book.discount !== null) {
  finalPrice = book.price — book.price * book.discount;
}

Сделай это:

let book = {
  name: ‘Learn JavaScript’,
  price: 15
};
let finalPrice = book.price — book.price * (book.discount || 0);

8. Сокращение объявления объектов

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

let name = ‘Amy’;
let age = 28;
let person = { name, age }; // { name: ‘Amy’, age: 28 }

Обратите внимание, что имя свойства совпадает с именем существующей переменной.

9. Использование функции стрелки

Это отличный способ значительно сократить количество строк кода.

Вместо того:

function add(a, b) {
  return a + b;
}
collection.map(function(item) {
  console.log(item);
});

Сделай это:

let sum = (a, b) => a + b;
collection.map(item => console.log(item));

10. Сокращение преобразования строки в число

Вместо того:

let string = ‘2020’;
let number = parseInt(string);

Сделай это:

let string = ‘2020’;
let number = +string;

11. Использование деструктуризации

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

Вместо того:

let company = {
  name: ‘Apple’,
  industry: ‘Technology’,
  CEO: ‘Tim Cook’,
  stockPrice: 364,
  products: [‘iPhone’, ‘Macbook’, ‘Apple Watch’]
};
let name = company.name;
let stockPrice = company.stockPrice;
let products = company.products;

Сделай это:

let { name, stockPrice, products } = company;
// In case you want to use different variable name. For example, companyName instead of name
let { name:companyName, stockPrice, products } = company;

12. Шаблонные строки

Вместо того:

let name = ‘Amy’;
let time = ‘yesterday’;
let welcomeMessage = ‘Welcome back ‘ + name + ‘. Your last time is ‘ + time;

Сделай это:

let name = ‘Amy’;
let time = ‘yesterday’;
let welcomeMessage = `Welcome back ${name}. Your last time is ${time}`;

Примечание. welcomeMessage использует обратную кавычку (`), а не апостроф (‘) или цитату (“).

13. Math.pow () Сокращение.

Вместо того:

let result = Math.pow(3, 5); // 243

Сделай это:

let result = 3**5; // 243

14. Использование обратных кавычек для многострочной строки

Вместо того:

let greeting = ‘Hi, I am Amy\n’
             + ‘I am a programmer.\n’
             + ‘Nice to meet you.’;

Сделай это:

let greeting = `Hi, I am Amy
 I am a programmer.
 Nice to meet you.`

15. Использование распространения для добавления вещей

Insteand из:

let arr1 = [3, 5, 1];
let arr2 = [2, 4, 8];
let result = arr1.concat(arr2);

Сделай это:

let arr1 = [3, 5, 1];
let result = [...arr1, 2, 4, 8]
// Or even at any index you want
let result = [2, ...arr1, 4, 8]
// You can also use spread with objects
let person = {
  name: ‘Tony’,
  age: 43
};
let superHero = {
  heroName: ‘Ironman’,
  ...person
};

Вышеупомянутые методы должны дать вам ощущение короче, понятнее и легче для чтения.

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



Кто еще хочет писать чистый код JavaScript?
7 советов, которые помогут вашим коллегам полюбить ваш код. medium.com



JavaScript на простом английском языке

Вы знали, что у нас четыре публикации и канал на YouTube? Найдите их все на plainenglish.io и подпишитесь на Decoded, наш канал YouTube!