ES6 : 객체 비구조화 할당

 

 

해당 블로그를 참고하여 작성하였으며, 공부하고 정리하기 위해 작성한 글입니다.

---

 객체 비구조화 할당 

위 소스코드는 이전 글에서 했던 예제와 같은 것으로, 해당 코드를 바탕으로 진행해보자.

 ( 객체 : 2021/02/15 - [언어/Javascript] - ES6 : 객체 )

const Man = {
  name: '남도산',
  actor: '남주혁',
  job: 'CTO'
};

const Girl = {
  name: '서달미',
  actor: '배수지',
  job: 'CEO'
};

function print(person) {
  const text = `${person.job} ${person.name} 역할을 맡은 배우는 ${person.actor} 입니다.`;
  console.log(text);
}

print(Man);
print(Girl);

위 소스 코드에서 print함수를 보면, 파라미터로 받아온 person 내부의 값을 조회할 때마다 person. 를 입력하고 있다.

 

이것은 '객체 비구조화 할당' 문법을 이용하면 코드를 더욱 짧고 보기 좋게 작성이 가능하다.

이 문법은 '객체 구조 분해'라고 불리기도 한다.

---

위 코드에서 객체에 대한 값들을 추출해서 새로운 상수로 선언해주는 것은 아래와 같다.

const { job, name, actor } = person;

이를 이용해서 소스코드를 작성하면, 아래와 같이 조회할 때마다 person. 를 입력하지 않아도 된다.

const Man = {
    name: '남도산',
    actor: '남주혁',
    job: 'CTO'
};

const Girl = {
    name: '서달미',
    actor: '배수지',
    job: 'CEO'
};

function print(person) {
    const {job, name, actor} = person;
    const text = `${job} ${name} 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
}

print(Man);
print(Girl);

다음과 같이, 같은 결과가 출력된다.

---

여기서, 매개변수에 person 대신 객체에서 조회하는 값들을 넣으면 '객체 비구조화 할당'이라고 할 수 있다.

function print({job, name, actor}) {
    const text = `${job} ${name} 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
}

이런 식으로 바꿔주면, 훨씬 더 깔끔해지고 짧아진 것을 확인할 수 있다.

 

총 코드는 아래와 같다.

const Man = {
    name: '남도산',
    actor: '남주혁',
    job: 'CTO'
};

const Girl = {
    name: '서달미',
    actor: '배수지',
    job: 'CEO'
};

function print({job, name, actor}) {
    const text = `${job} ${name} 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
}

print(Man);
print(Girl);