Destructuring Assignment

구조 분해 할당, 또는 비구조화 할당.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수로 담을수 있게 하는 표현식.

객체 비구조화 할당

01.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

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

  print(batMan);
  print(catWoman);
  const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 변수로 선언해 주는 것.
여기서 파라미터 단에서 객체 비구조화 할당을 하면 더 심플한 코드를 작성할 수 있음.
02.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

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

  print(batMan);
  print(catWoman);

배열 비구조화 할당.

03.js

  const arr = [1, 2];
  const [one, two, three = 3] = arr;

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

깊은 비구조화 할당.

  const deepObject = {
    state: {
      information: {
        name: 'jeaha',
        languages: ['javascript', 'java', 'sql']
      }
    },
    value: 5
  };

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

  const extracted = {
    name,
    languages,
    value
  };

  console.log(extracted);
728x90
반응형

'Language > JavaScript' 카테고리의 다른 글

[Modern JS] Promise  (0) 2020.06.14
[Modern JS] spread 와 rest  (0) 2020.06.14
[Modern JS] 화살표 함수 (Arrow Function)  (0) 2020.06.05
[Modern JS] Template Literal  (0) 2020.05.29
[Modern JS] keyword ? var : ( let || const )  (0) 2020.05.29

+ Recent posts