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

Курсы

Программирование
iOS Developer. Basic
-23%
Python Developer. Professional
-13%
Golang Developer. Professional
-17%
Python Developer. Basic
-16%
iOS Developer. Professional
-13%
C# ASP.NET Core разработчик
-18%
Unity Game Developer. Professional
-11%
React.js Developer
-12%
Android Developer. Professional
-7%
Software Architect
-12%
C++ Developer. Professional
-8%
Разработчик C#
-8%
Backend-разработчик на PHP
-8%
Архитектура и шаблоны проектирования
-12%
Программист С Разработчик на Spring Framework MS SQL Server Developer AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Vue.js разработчик VOIP инженер Нереляционные базы данных Супер - интенсив по паттернам проектирования Супер-практикум по использованию и настройке GIT IoT-разработчик Advanced Fullstack JavaScript developer Супер-интенсив Azure
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-17%
DevOps практики и инструменты
-18%
Архитектор сетей
-21%
Инфраструктурная платформа на основе Kubernetes
-22%
Супер-интенсив «IaC Ansible»
-16%
Супер-интенсив по управлению миграциями (DBVC)
-16%
Administrator Linux. Professional
-5%
Administrator Linux.Basic
-10%
Супер-интенсив «ELK»
-10%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив «СУБД в высоконагруженных системах»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Маленькие хитрости 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/>
);

Источник

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться