Destructuring

Destructuring

  • 5.1 Use object destructuring when accessing and using multiple properties of an object. jscs: requireObjectDestructuring

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

    // 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 Use array destructuring. jscs: requireArrayDestructuring

    const arr = [1, 2, 3, 4];
    
    // bad
    const first = arr[0];
    const second = arr[1];
    
    // good
    const [first, second] = arr;
    
  • 5.3 Use object destructuring for multiple return values, not array destructuring. jscs: disallowArrayDestructuringReturn

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

    // 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);
    

⬆ Back to Table of Contents