Serials Javascript Style Guide – Destructuring

Destructuring

5.1 Object

Khi mà muốn sử dụng nhiều thuộc tính của object thì nên sử dụng object destructuring. eslint: prefer-destructuring

Tại sao ư? Nhằm tránh tạo các temporary references

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

5.2 Array

Hãy sử dụng array destructuring. eslint: prefer-destructuring

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

5.3 Object over array

Sử dụng object destructuring khi trả về nhiều giá trị, không dùng array destructuring.

Tại sao ư? Vì bạn có thể thêm các thuộc tính mới hoặc thay đổi thứ tự của chúng mà không làm hỏng cách gọi nó.

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// the caller selects only the data they need
const { left, top } = processInput(input);

Tổng hợp Serial Javascript Style Guide