[클린코드 JS] 객체 구조분해할당

Object Destructuring Assignment(객체 구조분해할당)

함수의 매개변수에 객체 구조분해할당

function Person(name, age, location) {
  this.name = name;
  this.age = age;
  this.location = location;
}

const marco = new Person('Marco', 30, 'Korea');

• 위와 같은 코드를 아래 코드처럼 구조분해할당을 활용하여 리팩토링 할 수 있다.
  • 함수의 매개변수를 객체로 받고, 인수를 객체로 전달한다면, 전달하는 매개변수를 명시적으로 쓸 수 있으며 매개변수의 key만 같으면 되므로 매개변수의 순서가 다르더라도 상관 없다.

function Person({ name, age, location }) {
  this.age = age;
  this.name = name;
  this.location = location;
}

const marco = new Person({ name: 'Marco', age: 30, location: 'Korea' });

함수의 매개변수 중 옵션 명시

• 또한 함수의 매개변수 중 옵션이 무엇인지 알려주는 데도 유용하다.
  • 아래 코드의 함수에서 매개변수 중 name은 필수적이라는 것을 명시적으로 보여주고, 객체로 묶인 매개변수 {age, location}는 그 형태를 통해 옵션임을 알려준다.

function Person(name, { age, location }) {
  this.age = age;
  this.name = name;
  this.location = location;
}

const options = {
  age: 30,
  location: 'Korea',
};

const Marco= new Person('Marco', options);
const orders = ['first', 'second', 'third'];

배열에서도 객체 구조분해할당

• 배열에 대해서도 구조분해할당을 할 수 있다.

const orders = ['first', 'second', 'third'];

const st1 = orders[0];
const rd1 = orders[2];

console.log(st1) // first
console.log(rd1) // third

• 위와 같은 코드에서 배열의 요소를 선택할 때, 아래처럼 객체로 구조분해할당하면 더 명시적으로 선택하여 사용할 수 있다.

const orders = ['first', 'second', 'third'];

const { 0: st2, 2: rd2 } = orders;  // 배열의 인덱스를 key로 객체구조분해할당한다

console.log(st2); // first
console.log(rd2); // third