Nghiên cứu JavaScript [2]: Clean Code với ES6 Default Parameters & Property Shorthands

Việc tạo một method, viết một API – dù đó là cho chính bạn, một dev khác trong nhóm của bạn hay các dev khác đang sử dụng dự án của bạn. Tùy thuộc vào kích thước, độ phức tạp và mục đích của chức năng, bạn phải nghĩ đến các cài đặt mặc định và API input/output.

Default function parameters và property shorthands là hai tính năng của ES6 có thể giúp bạn viết API.

ES6 Default Parameters

Các tham số mặc định cho phép chúng ta khởi tạo các hàm với các giá trị mặc định. Mặc định được sử dụng khi một đối số bị bỏ qua hoặc không được xác định – nghĩa là null là một giá trị hợp lệ. Tham số mặc định có thể là bất kỳ thứ gì từ một số đến một function khác.

// Basic syntax
function multiply (a, b = 2) {
  return a * b;
}
multiply(5); // 10

// Default parameters are also available to later default parameters
function foo (num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]

Ví dụ thực tiễn

Hãy thực hiện một function cơ bản và chứng minh cách các tham số mặc định có thể tăng tốc độ dev của bạn và làm cho code được tổ chức tốt hơn.

Phương thức ví dụ của chúng ta được gọi là createElement(). Nó cần một vài đối số cấu hình và trả về một phần tử HTML. API trông như thế này:

// Trả về <p class="very-special-text super-big">Such unique text</p>. Khi chúng ta điền tham số
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// Giá trị mặc định
createElement(); // <div class="module-text default">Very default</div>

Việc triển khai cái này không có nhiều logic, nhưng có thể trở nên khá lớn do phạm vi mặc định của nó.

// Khi không có giá trị mặc định (default parameters), code nhìn cồng kềnh và không cần thiết
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;
}

Bây giờ chúng ta hãy sử dụng chức năng này và tối ưu hóa nó để rõ ràng hơn, viết nhanh hơn và để rõ ràng hơn mục đích của nó là gì:

// Mặc định toàn bộ
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;
}

Chúng tôi đã không chạm vào logic của hàm, nhưng đã xóa tất cả các xử lý mặc định. Function signature giờ bao gồm toàn giá trị mặc định.

ES6 Property Shorthands

Nếu một method chấp nhận các đối tượng có cấu hình lớn như một đối số, thì code của bạn có thể trở nên khá lớn. Thông thường, Ta chuẩn bị một số variables và thêm vào đối tượng. Property Shorthards là syntactic sugar khiến cho bước này ngắn và dễ đọc hơn:

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

// Cách cũ
const alphabet = {
  a: a,
  b: b,
  c: c
};

// Cách ngắn gọn
// Với kết quả giống với bên trên
const alphabet = { a, b, c };

Rút gọn API

Okay, quay lại một ví dụ khác, phổ biến hơn. Function sau lấy một số dữ liệu, biến đổi nó và gọi một function khác:

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

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

  // Do more.
  useDataSomewhereElse({
    target: target,
    property: veryLongProperty,
    willChange: willChange,
    // .. more
  });
}

Thường xảy ra khi ta đặt tên biến và thuộc tính đối tượng giống nhau. Sử dụng Property shorthand, kết hợp với cấu trúc hủy, chúng ta có thể rút gọn code một chút:

function updateSomething (data = {}) {
  // Here we use destructuring to store the constants from the data object.
  const { target, veryLongProperty: property } = data;
  let { willChange } = data;
  if (willChange === 'unwantedValue') {
    willChange = 'wayBetter';
  }
  // Do more.
  useDataSomewhereElse({ target, property, willChange });
}

Property Shorthand cũng có thể được áp dụng cho các function bên trong một đối tượng:

// Thay vì viết tên function mọi nơi,
const module = {
  foo: 42,
  bar: function (value) {
    // do something
  }
};

// Ta có thể loại bỏ nó
const module = {
  foo: 42,
  bar (value) {
    // do something
  }
};

Kết luận

Default parameters và property shorthands là một cách tuyệt vời để làm cho các method của bạn có tổ chức hơn và thậm chí còn ngắn hơn.

Property shorthands thực sự là một tính năng thẩm mỹ, nhưng tôi thấy mình làm việc hiệu quả hơn và dành ít thời gian hơn để viết tất cả các biến, đối tượng cấu hình và từ khóa function.