Javascript) 구조분해할당 -객체

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

구조분해할당 (Destructuring Assignment)

- 비구조할당

- 배열/객체 요소를 손쉽게 변수에 옮겨담는 문법

 

 

객체 구조분해할당 - 기본

- 객체의 요소 (속성값)를 변수에 쉽게 옮겨담는 문법

 

HTML 코드

<button onclick="test5();">기본</button>

 

Javascript 코드

 

구조분해할당을 사용하지 않을 때

const test5 = () => {
    const obj = {
        a : 1,
        b : '안녕',
        c : true
    };
    const a = obj.a;
    const b = obj.b;
    const c = obj.c;

    console.log(a, b, c);
};

구조분해할당을 사용하지 않으면, 속성명으로 값을 가져와 변수에 대입해줘야 합니다.

 

구조분해할당 사용 시

const obj = {
    a : 1,
    b : '안녕',
    c : true
};
// const a = obj.a;
// const b = obj.b;
// const c = obj.c;
const {a, b, c} = obj;

console.log(a, b, c);

속성명으로 값을 가져와 속성명과 동일한 변수명에 속성 값을 대입하였습니다.

인덱스로 값을 가져오는 배열과 달리 속성명으로 값을 가져옵니다.

 

존재하지 않는 속성명은 undefined 처리

const obj = {
    a : 1,
    b : '안녕',
    c : true
};
const {a, b, d} = obj;

console.log(a, b, d);

존재하지 않는 d 속성명을 가져와 변수에 대입하려고 할 때, 오류가 발생하진 않으며 undefined가 대입됩니다.

 

속성명으로 찾기 때문에 변수 선언 순서는 중요하지 않음

const obj = {
    a : 1,
    b : '안녕',
    c : true
};
const {b, c, a} = obj;

console.log(a, b, c);

변수 선언 순서를 변경해도 a에는 1, b에는 '안녕', c에는 true가 대입된 것을 확인할 수 있습니다.

 

존재하지 않는 속성명에는 기본 값 처리 가능

const obj = {
    a : 1,
    b : '안녕',
    c : true
};
const {b, a, d='abcd'} = obj;

console.log(a, b, d);

존재하지 않는 속성명인 d에는 'abcd' 기본 값 처리를 했기 때문에 'abcd'가 출력되었습니다.

 

변수명 변경하기

const obj = {
    a : 1,
    b : '안녕',
    c : true
};
const {a : num, b : str} = obj;

console.log(num, str);

a, b 속성명으로 값을 가져와 num, str에 대입하였습니다.

따라서 호출 시 a, b가 아닌 num, str로 호출해야 값이 정상적으로 출력됩니다.

 

a, b로 호출하게 되면 오류 발생!

// console.log(a, b);  // Uncaught ReferenceError: a is not defined

 

나머지 파라미터

const obj = {
    a : 1,
    b : '안녕',
    c : true
};

const {a, ...foo} = obj;
console.log(a, foo);

나머지 파라미터를 이용하여 나머지 속성 값들을 foo배열에 대입하였습니다.

 

---

중첩객체 구조분해할당

 

HTML 코드

<button onclick="test6();">중첩객체</button>

 

Javascript 코드

const test6 = () => {
    const user = {
        id : 'honggd',
        username : {
            firstName : '길동',
            familyName : '홍'
        },
        age : 33,
        sns : ['twitter', 'instagram', 'ticktok']
    };

    const {id, username : {firstName}, age, sns : [,mainSns]} = user;
    console.log(id, firstName, age, mainSns)
};

속성 안의 속성이 있는 것이기 때문에 속성명 : {속성명}으로 중첩 객체의 값을 가져올 수 있습니다.

배열 또한 sns 속성 안의 배열이 있기 때문에 속성명 : [값]으로 가져오며, 0번지 값이 아닌 1번지 값을 가져오기 위해 ','로 0번지 값을 버림처리 하였습니다.

 

// console.log(username, sns); // Uncaught ReferenceError: username is not defined

 

속성명과 다른 변수명을 사용하는 경우

const user = {
    id : 'honggd',
    username : {
        firstName : '길동',
        familyName : '홍'
    },
    age : 33,
    sns : ['twitter', 'instagram', 'ticktok']
};

const {username : {firstName : name}} = user;
console.log(name);

가져온 속성명(firstName)의 속성 값을 name 변수에 담아 출력하였습니다.

 

동일한 객체를 매개인자로 전달 할 때, 각 함수 별로 원하는 속성만 꺼내서 작업 가능

const test6 = () => {
    const user = {
        id : 'honggd',
        username : {
            firstName : '길동',
            familyName : '홍'
        },
        age : 33,
        sns : ['twitter', 'instagram', 'ticktok']
    };

    processId(user);
    processName(user);
    processSns(user);
};

const processId = ({id}) => console.log('processId : ', id);
const processName = ({username : {familyName, firstName}}) => console.log('processName : ', familyName, firstName);
const processSns = ({sns : [mainSns, , subSns]}) => console.log('processSns : ', mainSns, subSns);

user 객체를 매개인자로 넘겨주었으며 각 함수마다 속성을 꺼내서 출력하였습니다.

 

---

@실습 - academy info

- getAcademyInfo 함수에서 제공하는 객체의 정보를 활용해 다음 정보를 출력

- 교육원 이름, url, 대표번호 1개

- 각 지원 별 주소와 강의장 개수

 

HTML 코드

<button onclick="test7();">@실습문제 - academy info</button>

 

Javascript 코드

const test7 = () => {
    const {name, url, tel:[mainTel], branches} = getAcademyInfo();
    console.log(`${name}, ${url}, ${mainTel}`);

    Object.keys(branches).forEach((branch) => {
        const {addr, classroom} = branches[branch];
        console.log(`> ${branch} : ${addr}, ${classroom.length}개 강의장`);
    });
};

const getAcademyInfo = () => ({
    name : '채니교육원',
    url : 'https://chanychu.tistory.com',
    tel : ['070-1234-5678', '070-1234-5050', '070-1234-5959'],
    branches : {
        '강남 지원' : {
            addr : '서울시 강남구 역삼동',
            classroom : ['A', 'B', 'C', 'D', 'M']
        },
        '종로 지원' : {
            addr : '서울시 종로구 삼청동',
            classroom : ['X', 'Y', 'Z']
        },
        '당산 지원' : {
            addr : '서울시 영등포구 당산동',
            classroom : ['101', '102', '103', '104']
        }
    }
});

branches의 키 값을 가져와 해당 키 값으로 접근하여 addr, classroom 속성값을 가져왔습니다.

 

 

@실습 - 가족관계 출력

HTML 코드

<button onclick="test8();">@실습문제 - 가족관계 출력</button>

 

Javascript 코드

const test8 = () => {
    getPeople().forEach((person) => {
        const {name, family:{father, mother, ...sisbro}} = person;
        console.log(`이름 : ${name}, 아빠 : ${father}, 엄마 : ${mother}, 형제자매 : ${Object.values(sisbro)}`)
    })
};

 const getPeople = () => [
    {
        name : '홍길동',
        family : {
            father : '홍진수',
            mother : '홍진경',
            sister : '홍지민'
        },
        age : 35
    },
    {
        name : '신사임당',
        family : {
            father : '신강춘',
            mother : '하희라',
            brother : '신하준'
        },
        age : 25
    }
 ];

형제자매는 나머지 파라미터로 값을 다 가져온 후 Object.values()를 이용하여 값을 가져왔습니다.