Маленькие хитрости JavaScript

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

О безопасности типов

Как вы знаете, JavaScript нельзя назвать статически типизированным языком. Зато можно прибегнуть к маленькой хитрости, позволяющей сделать код надёжнее. Речь идёт о том, чтобы пометить аргументы функции как необходимые. Например, код ниже выдаёт ошибку каждый раз, когда нужное значение не передано. Тут следует учесть, что этот приём не работает для нулевых значений, зато отлично защищает от undefined-значений:

const req = name => {
  throw new Error(`The value ${name} is required.`);
};

const doStuff = ( stuff = req('stuff') ) => {
  ...
}

Вычисляем условия короткого замыкания (Short-circuit)

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

const getUserCity = user =>
  user && user.address && user.address.city;

const user = {
  address: {
    city: "San Francisco"
  }
};

// Вернёт "San Francisco"
getUserCity(user);

// Оба вернут undefined 
getUserCity({});
getUserCity();

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

const userCity = getUserCity(user) || "Detroit";

Bang bang!!

Отрицать значения дважды — это прекрасный способ сделать логическим любое значение. Однако учтите, что каждое ложное значение преобразуется в false, и это не всегда то, что вам нужно. Но не стоит применять это для чисел, ведь 0 тоже будет преобразован в false.

const shouldShowTooltip = text => !!text;

// Вернёт true
shouldShowTooltip('JavaScript rocks');

// Все вернут false
shouldShowTooltip('');
shouldShowTooltip(null);
shouldShowTooltip();

Выполняем отладку с логированием на месте

Вы можете применять короткое замыкание и учитывать, что результат console.log не подойдёт для отладки функционального кода, даже включая React-компоненты:

const add = (a, b) =>
  console.log('add', a, b)
  || (a + b);

const User = ({email, name}) => (
  <div>
    <Email value={console.log('email', email) || email} />
    <Name value={console.log('name', name) || name} />
  <div/>
);

Источник