Попрощайтесь с Spread Operator: используйте Default Composer

Используйте Default Composer на JS, если нужно заменить исходные данные — это библиотека, которая максимально упрощает Spread Operator.

584 открытий2К показов

При работе с объектами в JavaScript часто требуется установить значения по умолчанию для пустых свойств strings, objects, arrays, null или undefined.

При работе с вложенными объектами это может стать еще сложнее. Однако с библиотекой default-composer эта задача становится простой и легкой.

GitHub - aralroca/default-composer: A tiny (~500B) JavaScript library that allows you to set default values for nested objects

github.com

Что такое Default Composer

Default Composer – это легкая (~300 байт) библиотека JavaScript, которая позволяет вам устанавливать значения по умолчанию для вложенных объектов.

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

Преимущества перед Spread Operator и Object.assign

Хотя Spread Operator и Object.assign() также могут использоваться для установки значений по умолчанию, у Default Composer есть несколько преимуществ.

Default Composer работает с вложенными объектами, тогда как оператор расширения и Object.assign() работают только с поверхностными объектами.

Учимся iOS-разработке: что должен знать любой разраб в 2024 году

tproger.ru

У Default Composer куда более лаконичный код, чем у Spread Operator или Object.assign(). Их код, напротив, слишком огромный и трудный для чтения, особенно при работе с вложенными объектами.

Представьте, что у нас есть этот исходный объект:

			const original = {
  name: "",
  score: null,
  address: {
    street: "",
    city: "",
    state: "",
    zip: "",
  },
  emails: [],
  hobbies: [],
  another: "anotherValue"
};

А это значения по умолчанию:

			const defaults = {
  name: "John Doe",
  score: 5,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
  },
  emails: ["john.doe@example.com"],
  hobbies: ["reading", "traveling"],
};

Мы хотим объединить эти объекты, заменив исходные значения. Итак, идея состоит в том, чтобы получить: []undefined{}.

			console.log(results)
/**
 * {
 * "name": "John Doe",
 * "score": 5,
 * "address": {
 *   "street": "123 Main St",
 *   "city": "Anytown",
 *   "state": "CA",
 *   "zip": "12345"
 * },
 * "emails": [
 *   "john.doe@example.com"
 * ],
 * "hobbies": [
 *   "reading",
 *   "traveling"
 * ],
 * "another": "anotherValue"
 **/

Вероятно, со Spread Operator придется написать что-то подобное:

			const results = {
  ...defaults,
  ...original,
  name: original.name || defaults.name,
  score: original.score ?? defaults.score, // "??" beacause 0 is valid
  address: {
    ...defaults.address,
    ...original.address,
    street: original.address.street || defaults.address.street,
    city: original.address.city || defaults.address.city,
    state: original.address.state || defaults.address.state,
    zip: original.address.zip || defaults.address.zip,
  },
  emails: original.emails.length ? original.emails : defaults.emails,
  hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies,
};

С использованием Object.assign получится что-то такое:

			const results = Object.assign({}, defaults, original, {
  name: original.name || defaults.name,
  score: original.score ?? defaults.score, // "??" beacause 0 is valid
  address: Object.assign({}, defaults.address, original.address, {
    street: original.address.street || defaults.address.street,
    city: original.address.city || defaults.address.city,
    state: original.address.state || defaults.address.state,
    zip: original.address.zip || defaults.address.zip,
  }),
  emails: original.emails.length ? original.emails : defaults.emails,
  hobbies: original.hobbies.length ? original.hobbies : defaults.hobbies,
});

Поддерживать такой код со вложенными объектами будет утомительно.

С defaultComposer мы могли бы обойтись двумя строками кода:

			import defaultComposer from 'default-composer'; // 300B
// ...
const results = defaultComposer(defaults, original);

Но что, если в нашем проекте есть специальное свойство, которое работает не так, как другие, и к нему нужно применить другую логику замены?

Что ж, вы можете настроить defaultComposer по своему усмотрению.

			import { defaultComposer, setConfig } from 'default-composer';

setConfig({
  // This function is executed for each value of each key that exists in 
  // both the original object and the defaults object.
  isDefaultableValue: (
    // - key: key of original or default object
    // - value: value in the original object
    // - defaultableValue: pre-calculed boolean, you can use or not, 
    //   depending if all the rules of the default-composer library are correct
    //   for your project or you need a totally different ones.
    { key, value, defaultableValue }
    ) => {
    if (key === 'rare-key') {
      return defaultableValue || value === 'EMPTY'
    } 

    return defaultableValue;
  },
});

Выводы

Мы расмсотрели библиотеку default-composer как решение для установки значений по умолчанию для вложенных объектов в JavaScript.

Библиотека легкая и предоставляет более лаконичный и удобный для чтения код, чем оператор расширения и Object.assign.

Профессионал или профан: хорошо ли вы знаете CSS Flexbox — тест

tproger.ru

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

В целом, default-composer — полезная библиотека, которая упрощает замену значений по умолчанию для вложенных объектов в JavaScript.

584 открытий2К показов

Также рекомендуем

Собираем портфолио программиста с помощью no-code и low-code

Рассказали, что такое no-code и low-code, зачем нужны программы без программирования и какую выгоду из этого можно извлечь.

Как хакеры используют блокчейн для заражения вирусами через NPM

Исследователи Phylum раскрыли масштабную вредоносную кампанию через NPM, использующую тайпсквоттинг для распространения вирусов и кражи данных разработчиков

Почему Node.js такой популярный

Node.js занял 50,4% рынка, поэтому мы попросили мидл и сеньор-программистов рассказать, в чём причина популярности Node.js и какие у него перспективы. Вот, что они ответили.

JavaScript: Всё ли ты знаешь о работе с асинхронностью?

Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.