Руководство по написанию однострочников на javascript

Советы, чтобы писать меньше javascript

30 дней кода и написания кода: часть 4

Если вы новичок в javascript или всегда хотите улучшить свои навыки, рассмотрите возможность написания сокращенного javascript когда это уместно.

Прежде чем использовать какой-либо из этих методов, спросите, делает ли это мой код более читабельным и удобным для сопровождения?

Цель состоит не в том, чтобы оптимизировать скорость/производительность, а в том, чтобы написать меньше кода и улучшить ремонтопригодность. Любое преимущество в производительности — это просто дополнительное преимущество. Чтобы помочь новым разработчикам понять все, я включаю сокращенные и сокращенные версии. В целом, я хочу подчеркнуть, что более важно писать код, который читается как можно ближе к обычному английскому языку и не нуждается в комментариях. Имена функций, имена переменных и т. д. всегда должны быть как можно более описательными.

Функции со стрелками

Всякий раз, когда я не имею дело со сложными объектами и this, я всегда начинаю с написания именованных функций с помощью ES6. В этом нет ничего нового для опытных разработчиков javascript, и на самом деле это старые новости. Также для новых разработчиков, которые не понимают ограничений стрелочных функций и лексической области видимости (this), ознакомьтесь с разделом когда не использовать стрелочные функции.

// Long Hand
function greaterThan () { 
console.log('greater than 10'); 
}
const greaterThan = () => console.log('greater than 10');

Если вы хотите узнать об этом больше, я настоятельно рекомендую 1-лайнеры. Обязательно прочитайте документы, ознакомьтесь с исходным кодом и попробуйте их.

Сокращенные условные операторы

Условные операторы часто могут быть излишне длинными, как показано в длинной версии. Одна вещь, которая помогает, — перенос логики в именованные функции, чтобы объяснить, что делает код, без необходимости комментариев кода. Здесь мы просто регистрируем сообщение, но с таким же успехом могли бы выполнять некоторые операции. Поскольку большая часть нашей «логики» уже находится в именованной функции, описывающей ожидаемый результат, нет необходимости в одной или двух строчках кода.

// Long Hand
const x = 20
const doSomething = () => console.log('SOMETHING');
const greaterThan = () => console.log('greater than 10');
const lessThan = () => console.log('less than 10');
if (x > 10) {
    greaterThan();
} else {
    lessThan();
}
// Short Hand
if (x>10) greaterThan(), doSomething()
else lessThan();

Мы можем либо просто использовать стандартную одну строку if() doSomething();, либо мы можем добавить несколько частей с запятой и новой функцией, а затем еще условия, опять же с чистыми вкладышами. Единственным недостатком является то, что оператор else должен находиться в отдельной строке, поэтому, если вы действительно помешаны на однострочниках, вам нужно либо реализовать короткие замыкания, либо тернарные операторы.

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

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

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

const evaluateX = x > 10 ? greaterThan() : lessThan(); 
// console logs 'greater than 10'

Самое приятное в этом то, что мы просто задаем машине вопрос, больше или меньше x 10. Поскольку мы уже установили const x = 20, мы знаем, что оно больше 10 и останется прежним, потому что мы не можем изменить примитивное значение.

Объявление переменных

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

// Long Hand
let x;
let y;
let z = 3;
// Short Hand 
let x, y, z = 3;

Оценка короткого замыкания

Часто, когда мы пишем приложения для узлов, у нас есть значение для чего-то в разработке (localhost) и другое значение для производства. Написание операторов if для изменения значения переменной не всегда эффективно.

// Long Hand
let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}
// Short Hand
const dbHost = process.env.DB_HOST || 'localhost';

Вместо этого мы можем просто определить переменную и установить производственное значение слева и локальное значение разработки справа. Таким образом, более вероятно, что он потерпит неудачу в разработке, чем в производстве (при условии, что переменные среды определены). Это также сделано из соображений безопасности. Например, если вы находитесь на Heroku и загружаете файл .env со всеми своими учетными данными или случайно публикуете .env на github, и у хакера есть эта информация. Однако, если вы определяете переменные в приборной панели, их гораздо сложнее получить, а случайная фиксация GitHub не так уж серьезна, потому что состоит только из среды разработки (нет ничего страшного, если вы не используете учетные данные повторно).

JavaScript для сокращения цикла

Этот пример, на мой взгляд, больше касается читабельности. Вместо циклов for мы используем forEach и регистрируем каждый элемент в списке. Таким образом, на простом английском языке это, по сути, читалось бы как «Для каждого ToDoList регистрируйте элементы». Здесь нет никакой математики, только стрелочная функция обратного вызова с элементом в качестве параметра, и она неявно возвращает элемент в журнале консоли.

// Long Hand
const _ToDoList = ['get bread', 'get meat', 'get dressing'];
for (let item = 0; item < _ToDoList.length; item++){
  console.log(_ToDoList[item])
}
// Short Hand
_ToDoList.forEach((item) => console.log(item) );

Значения параметров по умолчанию

Часто при написании функций люди используют условные операторы для определения значений по умолчанию для параметров функции. В ES6 мы можем принять функцию короткой стрелки и определить значения в параметрах.

// Long Hand
function volume(l, w, h) {
  if (w === undefined) w = 3;
  if (h === undefined)h = 4;
  return l * w * h;
}
// Short Hand
volume = (l, w = 3, h = 4 ) => (l * w * h);

Если вам понравилось, хлопните в ладоши или оставьте комментарий, дайте мне знать, что вы хотите видеть больше таких коротких материалов javascript.

Увидимся в следующий раз !