Destructuring

Destructuring#

prefer-destructuring :#

  • 임시 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}`;
}

prefer-destructuring : 배열 destructuring#

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);
Last updated on