Destructuring

  • 5.1 Use object destructuring when accessing and using multiple properties of an object. eslint: prefer-destructuring

    Why? Destructuring saves you from creating temporary references for those properties.

    1. // bad
    2. function getFullName(user) {
    3.   const firstName = user.firstName;
    4.   const lastName = user.lastName;
    6.   return `${firstName} ${lastName}`;
    7. }
    9. // good
    10. function getFullName(user) {
    11.   const { firstName, lastName } = user;
    12.   return `${firstName} ${lastName}`;
    13. }
    15. // best
    16. function getFullName({ firstName, lastName }) {
    17.   return `${firstName} ${lastName}`;
    18. }

  • 5.2 Use array destructuring. eslint: prefer-destructuring

    1. const arr = [1, 2, 3, 4];
    3. // bad
    4. const first = arr[0];
    5. const second = arr[1];
    7. // good
    8. const [first, second] = arr;

  • 5.3 Use object destructuring for multiple return values, not array destructuring.

    Why? You can add new properties over time or change the order of things without breaking call sites.

    1. // bad
    2. function processInput(input) {
    3.   // then a miracle occurs
    4.   return [left, right, top, bottom];
    5. }
    7. // the caller needs to think about the order of return data
    8. const [left, __, top] = processInput(input);
    10. // good
    11. function processInput(input) {
    12.   // then a miracle occurs
    13.   return { left, right, top, bottom };
    14. }
    16. // the caller selects only the data they need
    17. const { left, top } = processInput(input);