JavaScript 비구조화 할당(구조분해)

함수에서 객체를 파라미터로 받기

const ironMan = {
    name: '토니 스타크',
    actor: '로버트 다우니 주니어',
    alias: '아이언맨'
  };
  
  const captainAmerica = {
    name: '스티븐 로저스',
    actor: '크리스 에반스',
    alias: '캡틴 아메리카'
  };
  
  function print(hero) {
    const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${hero.actor} 입니다.`;
    console.log(text);
  }
  
  print(ironMan);
  print(captainAmerica);

아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.

파라미터로 받아온 hero 내부의 값을 조회 할 때 마다 hero. 를 입력하고 있는데, 객체 비구조화 할당이라는 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성 할 수 있다.

---

객체 비구조화 할당

const ironMan = {
    name: '토니 스타크',
    actor: '로버트 다우니 주니어',
    alias: '아이언맨'
  };
  
  const captainAmerica = {
    name: '스티븐 로저스',
    actor: '크리스 에반스',
    alias: '캡틴 아메리카'
  };
  
  function print(hero) {
    const {alias, name, actor} = hero;
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }
  
  print(ironMan);
  print(captainAmerica);

아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.

const { alias, name, actor } = hero; 코드가 객체에서 값들을 추출해서 새로운 상수로 선언
hero 생략 가능

---

함수 파라미터에서 객체 비구조화 할당

const ironMan = {
    name: '토니 스타크',
    actor: '로버트 다우니 주니어',
    alias: '아이언맨'
  };
  
  const captainAmerica = {
    name: '스티븐 로저스',
    actor: '크리스 에반스',
    alias: '캡틴 아메리카'
  };
  
  function print({alias, name, actor}) {
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }
  
  print(ironMan);
  print(captainAmerica);

아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.

---

const object = {a: 1, b: 2};

function print({a, b}) {
    console.log(a);
    console.log(b);
}

print(object);

1
2

---

상수/변수값으로 객체 파라미터를 이용

const ironMan = {
    name: '토니 스타크',
    actor: '로버트 다우니 주니어',
    alias: '아이언맨'
  };
  
  const {name} = ironMan;
  console.log(name);

  const captainAmerica = {
    name: '스티븐 로저스',
    actor: '크리스 에반스',
    alias: '캡틴 아메리카'
  };
  
  function print({alias, name, actor}) {
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }
  
  print(ironMan);
  print(captainAmerica);

토니 스타크
아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다.
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다.

const {name} = ironMan; 이렇게도 비구조화 가능
비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언

---

const object = {a: 1, b: 2};
const {a, b} = object;
console.log(a);
console.log(b);

1
2

---

기본값 설정

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);

1
2

b의 기본값을 정해주지 않으면 undefined 출력됨

---

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

---

비구조화 할당 이름 바꾸기

const animal = {
    name: '멍멍이',
    type: '개'
};

const nickname = animal.name;

console.log(nickname); // 멍멍이

animal.name 값을 nickname 값에 담고 있다.
이름이 다른 nickname 값을 비구조화 할당하는 방법

const animal = {
    name: '멍멍이',
    type: '개'
};

const {name: nickname} = animal;

console.log(nickname);

멍멍이

{원래이름 : 새로운 이름}
'animal 객체 안에 있는 name 을 nickname 이라고 선언하겠다.' 라는 의미
animal 이 가지고 있는 본래의 값은 바뀌지 않는다.

---

배열 비구조화 할당

const array = [1,2];

const one = array[0];
const two = array[1];

console.log(one);
console.log(two);

위의 코드를 비구조화 할당해 보기

const array = [1,2];

const [one, two] = array;

console.log(one);
console.log(two);

1
2

const [one, two] 에 배열 순서대로 값이 들어간다.

---

배열 기본값 설정

const array = [1];
const [one, two = 2] = array;

console.log(one);
console.log(two);

---

깊은 값 비구조화 할당

const deepObject = {
    state: {
      information: {
        name: 'velopert',
        languages: ['korean', 'english', 'chinese']
      }
    },
    value: 5
};

name, languages, value 값들을 밖으로 꺼내주고 싶다면 2가지 방법이 있다.

---

첫번째 방법

비구조화를 2번 사용

const deepObject = {
    state: {
      information: {
        name: 'velopert',
        languages: ['korean', 'english', 'chinese']
      }
    },
    value: 5
};
  
const {name, languages} = deepObject.state.information;
const {value} = deepObject;

const extracted = {name, languages, value};

console.log(extracted);

{
  name: 'velopert',
  languages: [ 'korean', 'english', 'chinese' ],
  value: 5
}

---

배열 응용

const deepObject = {
    state: {
        information: {
            name: 'velopert',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
};
  
const {
    name,
    languages: [firstLang, secondLang]
} = deepObject.state.information;
const {value} = deepObject;

const extracted = {
    name,
    firstLang, secondLang,
    value
};

console.log(extracted);

{
  name: 'velopert',
  firstLang: 'korean',
  secondLang: 'english',
  value: 5
}

---

두번째 방법

한번에 모두 추출

const deepObject = {
    state: {
      information: {
        name: 'velopert',
        languages: ['korean', 'english', 'chinese']
      }
    },
    value: 5
};
  
const {
    state: {
        information: {
            name, languages
        }
    },
    value
} = deepObject;

const extracted = {name, languages, value};

console.log(extracted);

{
  name: 'velopert',
  languages: [ 'korean', 'english', 'chinese' ],
  value: 5
}

---

배열 응용

const deepObject = {
    state: {
      information: {
        name: 'velopert',
        languages: ['korean', 'english', 'chinese']
      }
    },
    value: 5
};
  
const {
    state: {
        information: {
            name, languages: [firstLang, secondLang]
        }
    },
    value
} = deepObject;

const extracted = {
    name,
    firstLang, secondLang,
    value
};

console.log(extracted);

{
  name: 'velopert',
  firstLang: 'korean',
  secondLang: 'english',
  value: 5
}