구조화대입(Destructuring)

구조화대입(Destructuring)

• Use object destructuring when accessing and using multiple properties of an object.

• 하나의 오브젝트에서 복수의 프로퍼티를 억세스 할 때는 오브젝트 구조화대입을 이용해 주십시오.

  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(obj) {
    const { firstName, lastName } = obj;
    return `${firstName} ${lastName}`;
  }
  
  // best
  function getFullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`;
  }

• Use array destructuring.

• 배열의 구조화대입을 이용해 주십시오.

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

• 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.

  왜? 이렇게 함으로써 나중에 호출처에 영향을 주지않고 새로운 프로퍼티를 추가하거나 순서를 변경할수 있습니다.

  // 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, right } = processInput(input);