4. Destructuring (JS style guide)

[JS] 구조 분해 할당 (destructing assignment)

• Use object destructuring when accessing and using multiple properties of an object.
  • 단일 오브젝트의 여러 프로퍼티에 접근하는 경우 Destructing을 사용합니다.
  • 이를 통해 프로퍼티를 위한 임시적인 참조를 줄일 수 있습니다.

 

prefer-destructuring 

---

• 임시 references 생성을 줄여 줍니다. 

// 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}`;
}

 

prefer-destructuring : 배열 destructuring

---

Use array destructing

• 배열 또한 destructing을 활용합니다.

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

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

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

 

리턴값이 여러개 일 때 : 객체 비구조화 > 배열 비구조화

---

• 객체 비구조화는, 추후에 코드에 새 속성을 추가 할 수 있다.
• 리턴 값을 순서에 상관없이 가져올 수 있다.
•  호출 할 때, 원하는 data 를 선택할 수 있다.

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

// 호출을 할 때 반환값의 순서를 고려해야 하는 문제가 있다.
const [left, __, top] = processInput(input);

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

// 호출 할 때, 원하는 data 를 선택할 수 있다.
const { left, top } = processInput(input);