#18. 자바스크립트(javascript) - 비구조화 할당

---

비구조화 할당

사용자의 정보를 간단히 보여주는 함수를 만들어보도록 하겠습니다.

객체 및 함수에 대해 잘 모르시는 분들은 클릭해서 읽어보시기 바랍니다.

const AXCE = {
  name: 'Sudon Noh',
  age: 30,
  birth: '1992.10.16',
  alias: 'AXCE'
};

function print(main) {
  const text = `'${main.alias}'의 이름은 '${main.name}'입니다.
  나이는 ${main.age}이고, 생일은 ${main.birth} 입니다.`;
  console.log(text);
}

print(AXCE);

새로 만든 print라는 함수는 파라미터(main)을 받아 정보들(name, age, birth, alias)을 출력해주는 함수입니다. 이 함수에서 이름, 나이, 생일, 별명 등을 불러오기 위해서는 "파라미터.정보(main.alias)"의 형식을 갖추어야 합니다.

위 코드의 출력물

이를 비구조화를 통해 조금씩 간단한 형태로 바꾸어보도록 하겠습니다.

---

첫번째, 함수 내부에서 비구조화

function print(main) {
  const { alias, age, birth, name} = main;
  const text = `'${alias}'의 이름은 '${name}'입니다.
  나이는 ${age}이고, 생일은 ${birth} 입니다.`;
  console.log(text);
}

function 부분에서 "const { alias, age, birth, name} = main;" 이 추가되었고, 
"const text = `'${alias}'의 이름은 '${name}'입니다. 나이는 ${age}이고, 생일은 ${birth} 입니다.;" 부분이 수정되었습니다.

파라미터인 main의 key와 값들을 key로 받아 key만 작성해도 값이 출력되도록 했습니다.

---

두번째, 함수 파라미터에서 비구조화

function print({ alias, age, birth, name}) {
  const text = `'${alias}'의 이름은 '${name}'입니다.
  나이는 ${age}이고, 생일은 ${birth} 입니다.`;
  console.log(text);
}

이번에는 함수의 파라미터 부분에서 파라미터로 받는 객체의 key와 value를 직접 key로 받아 사용합니다.

위의 두 가지 비구조화 방법으로 만들어낸 print를 출력하면 처음 출력했던 값과 동일한 값이 출력되는 것을 확인하실 수 있습니다.

---

세번째, 함수 밖에서 직접 할당

const { birth } = AXCE;
console.log(birth);

이때, 비어있는 값의 경우를 위해 default 값을 지정할 수 있습니다. job에 대해 입력이 없는 경우 default 값으로 '직업'이라는 값이 들어가도록 설정했습니다. 이 규칙은 배열(array)에서도 동일하게 적용됩니다.

const AXCE = {
    name: '이름',
    age: '나이',
    phone: '번호',
    birth: '생년월일',
    address: '주소'
}

const { name, age, phone, birth, address, job = '직업' } = AXCE;
console.log(name);
console.log(age);
console.log(job);

---

 

네번째, 객체의 깊숙한 곳에 있는 값을 꺼내는 방법

const deepObject = {
    state: {
        information: {
            nick_name: 'AXCE',
            languages: ['Korean', 'English', 'Spanish']
        }
    },
    value: 5
}

1. 첫번째 방법: 비구조 할당을 두 번 실행

const { nick_name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
    nick_name,
    languages,
    value
};

console.log(extracted);
console.log(nick_name);
console.log(value);

2. 두번째 방법: 비구조 할당을 한 번 실행

const {
    state: {
        information: {
            nick_name, languages: [firstLang, secondLang, thirdLang]
        }
    },
    value
} = deepObject;

const extracted = {
    nick_name,
    firstLang, 
    secondLang, 
    thirdLang,
    value
};

console.log(extracted);