Параметри за замовчуванням в ES6

6 хв. читання

Пишучи якусь функцію, метод чи API, ви, рано чи пізно, задумаєтесь про параметри за замовчуванням (default parameters). Особливо, якщо ваш код будуть використувати інші люди.

Параметри функції за замовчуванням та скорочене оголошення властивостей — саме те, що допоможе вам написати свій API.

Аргументи за замовчуванням в ES6

Давайте оновимо наші знання і поглянемо на синтаксис. Аргументи за замовчуванням дозволяють передавати в функції раніше приготовані значення. Вони використовуються коли аргумент або не передано, або він undefined; тобто null є допустимим значенням. Такий аргумент може бути чим завгодно: від числа до іншої функції.

// Звичайний синтаксис
function multiply (a, b = 2) {
  return a * b;
}
multiply(5); // 10

// Аргумент також може посилатися на інші аргументи 
function foo (num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]

Приклади з реального життя

Давайте на прикладі розглянемо як ці фічі можуть прискорити вашу розробку та зробити код більш структурованим.

Наша функція буде називатися createElement(). В якості аргументів вона бере певну конфігурацію, а повертає HTML-елемент. Використовувати її потрібно наступним чином:

// Нам потрібен елемент <p> з певним текстом всередині та двома класами
// Результат: </p><p class="very-special-text super-big">Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// Щоб функція була більш універсальною, вона повинна працювати і без аргументів
createElement(); // <div class="module-text default">Very default</div>

Хоча реалізація цього коду не має якоїсь важкої логіки, вона вийшла досить великою.

// Без аргументів за замовчуванням воно виглядає роздутим
function createElement (tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

Цей код працює. Але як саме?

  1. Якщо змінні tag та config не передано, встановлюємо їм стандартні значення. (Зауважте, деякі лінтери таке не люблять)
  2. Створюємо константи з потрібними значеннями
  3. Перевіряємо чи classNames оголошений, і, якщо ні, присвоюємо масив з класами за замовчуванням
  4. Ну і нарешті створюємо, модифікуємо і повертаємо об'єкт

А тепер давайте зробимо те ж саме, але краще.

function createElement (tag = 'div', {
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  const element = document.createElement(tag);
  const text = document.createTextNode(content);

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

Ми не змінювали логіку функції а лише прибрали всі перевірки передачі того чи іншого аргумену. Тепер оголошення аргументів за замовчуванням знаходиться в сигнатурі самої функції.

А тепер дозвольте пояснити одну складну ситуацію.

// Що ж тут відбувається?
function createElement ({
  content = 'Very default',
  classNames = ['module-text', 'special']
} = {}) {
  // тіло функції
}

Ми не тільки оголосили об'єкт-аргумент, а й його властивості. Це більш наочно показує які саме аргументи потрібно передати. Можливо, відразу ви і не почнете це використовувати, але це крута фіча. Вона дуже допомагає в розробці.

Скорочене оголошення властивостей в ES6

Якщо функція приймає великий об'єкт в якості аргументу, це може спричинити незручності в процесі розробки. Тому є сенс заздалегідь підготувати деякі змінні і потім додати їх до об'єкту. Скорочене оголошення властивостей (property shorthands) є синтаксичним цукром саме для таких випадків.

const a = 'foo', b = 42, c = function () {};

// Раніше ми робили так
const alphabet = {
  a: a,
  b: b,
  c: c
};

// Але зараз можна робити так. Цей код ідентичний тому, що вище
const alphabet = { a, b, c };

Скоротіть ваш API

Повернемось до більш реального прикладу. Ця функція приймає на вхід дані, змінює їх і викликає іншу функцію.

function updateSomething (data = {}) {
  const target = data.target;
  const veryLongProperty = data.veryLongProperty;
  let willChange = data.willChange;

  if (willChange === 'unwantedValue') {
    willChange = 'wayBetter';
  }

  // Щось робить

  useDataSomewhereElse({
    target: target,
    property: veryLongProperty,
    willChange: willChange,
    // .. і так далі
  });
}

Часто ми називаємо імена властивостей та змінні однаковими іменами. Тепер, використовуючи скорочене оголошення властивостей, ми можемо скоротити наш код.

function updateSomething (data = {}) {
  const { target, veryLongProperty: property } = data;
  let { willChange } = data;

  if (willChange === 'unwantedValue') {
    willChange = 'wayBetter';
  }

  // щось робить

  useDataSomewhereElse({ target, property, willChange });
}

Спочатку важко змусити себе використовувати ці можливості, але коли звикаєш, то вже не можеш без них. І код виходить більш чистим та зрозумілим.

Але чекайте, так можна робити і в оголошенні методів!

// щоб не писати кожен раз так
const module = {
  foo: 42,
  bar: function (value) {
    // щось робить
  }
};

// можна писати так
const module = {
  foo: 42,
  bar (value) {
    // щось робить
  }
};

Висновок

Аргументи за замовчуванням та скорочене оголошення властивостей це гарний спосіб впорядкувати ваш код і зробити його трішечки кращим. Особисто мені аргументи за замовчуванням допомогли сконцентруватися на написанні логіки, а не хаків для JS.

Скорочене оголошення властивостей, на мій погляд, не так важливе. Але все одно приємніше писати красивий код меншого об'єму.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.7K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація