Vinh Web
  • Dự án
  • Blog
Vinh Web > Blog > Nghiên cứu JavaScript [2]: Clean Code với ES6 Default Parameters & Property Shorthands

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

22/02/2021 vinhnguyenhubt@gmail.com 44 lượt xem 0 bình luận

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.

Nội dung

  1. ES6 Default Parameters
  2. Ví dụ thực tiễn
  3. ES6 Property Shorthands
  4. Rút gọn API
  5. Kết luận

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.

Cùng Chuyên Mục

  • Cách chạy quảng cáo facebook hiệu quả tại Lào Cai

    Chạy quảng cáo facebook là bạn chủ động tiếp cận khách hàng thông qua marketing trên Facebook

  • Chạy quảng cáo facebook nhanh chóng ở Lào Cai

    Chạy quảng cáo facebook nhanh chóng ở Lào Cai sẽ giúp bạn tư vấn chiến dịch quảng cáo phù hợp, hiệu quả, tối ưu ngân sách mà vẫn đạt hiệu quả quảng cáo cao nhất.

  • Một số thuật ngữ trong chạy quảng cáo Facebook

    Thuật ngữ trong chạy quảng cáo facebook là một trong những kiến thức quan trọng mà người chạy quảng cáo cần nắm rõ.

  • Onepage là gì? Onepage chuẩn bao gồm những yếu tố nào?

    Onepage là một trang web duy nhất giới thiệu về một dịch vụ hoặc một sản phẩm trên internet

  • Thuê người quản trị fanpage tại Lào Cai

    Thuê người quản trị fanpage sẽ giúp các doanh nghiệp tiết kiệm được thời gian, chi phí và đảm bảo cho fanpage được phát triển theo hướng bài bản, đạt hiệu quả cao.

  • Website Doanh nghiệp chuẩn bao gồm những phần nào?

    Website doanh nghiệp là một trang web giới thiệu về doanh nghiệp, hoạt động, sản phẩm, dịch vụ của doanh nghiệp cho khách hàng, giúp hỗ trợ việc kinh doanh, hoạt động của doanh nghiệp

Danh mục: Blog

Subscribe
Login
Notify of
guest
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Hosting Việt Tốt

Có thể Quan tâm
  • Việc xây dựng hình ảnh đẹp, chất lượng ảnh hưởng thế nào tới doanh nghiệp
  • Nghiên cứu JavaScript [2]: Clean Code với ES6 Default Parameters & Property Shorthands
  • Website Doanh nghiệp chuẩn bao gồm những phần nào?
  • Thuê người quản trị fanpage tại Lào Cai
  • Thuê người quản trị nội dung website ở đâu?

Liên Hệ

Hotline: 0979.788.685
Email: vinhnguyenhubt@gmail.com
Địa chỉ: Lê Khôi, Phố Mới, Lào Cai.

Link

  • Dự án
  • Blog

Comment mới nhất

  • asdasd tại Tại sao Doanh nghiệp nhỏ, Cửa hàng nhỏ cũng cần website?
  • asdasd tại Tại sao Doanh nghiệp nhỏ, Cửa hàng nhỏ cũng cần website?
  • asdasd tại Tại sao Doanh nghiệp nhỏ, Cửa hàng nhỏ cũng cần website?
  • vinhnguyenhubt@gmail.com tại Nghiên cứu JavaScript [3]: Mẹo tối ưu hóa hiệu suất JavaScript
  • Nguyễn Tuấn Vinh tại Website Doanh nghiệp chuẩn bao gồm những phần nào?
VinhWeb © 2020
wpDiscuz