29_[vanillajs]비구조화 할당(=구조 분해)

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

객체의 비구조화 할당

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

위와 같이 객체가 있을 때, 객체의 key를 뽑아서

const {키}=객체;

로 명시해주었을 때

객체.키 가 아닌 “키”로 사용이 가능해지는 것!

또한 함수의 매개변수로 전달해주면 자동 매칭되어 사용할 수도 있다!

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

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

---

객체에 없는 키값을 매개변수로 사용하려고 할 경우

• ES6에서 적용된 기본 매개변수 적용 방법을 이용

const obj={a:1};

function print({a,b = 3}){
    console.log(a);//1
    console.log(b);//3
}
print(obj);

비구조 할당을 할 때 이름을 바꾸는 방법

기존에 비구조 할당을 사용하지 않는다면 아래와 같이 사용할 수 있을 것이다

const animal = {
    name:'멍멍이',
    type:'개'
};
const nickname=animal.name;
console.log(nickname);//멍멍이

이를 비구조할당을 적용해본다면

const {객체의 이름(=key): 바꿀이름}=객체;

로 바꿀 수 있다

즉 위의 코드는 아래처럼 변경될 수 있다

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

const {name:nickname}=animal;
console.log(nickname);//멍멍이

⚠️단, 기존의 객체의 name-value는 훼손하지 않음!

console.log(animal);
/*
{name: "멍멍이", type: "개"}
*/

---

배열의 비구조화 할당

1. const [배열의 각 요소를 저장할 각각의 변수명] =배열; 로 매칭시키기

const array=[1,2];
const [one, two] = array;
console.log(one,two);//1 2

1. 배열의 갯수 < 비구조화 할당에 사용되는 변수의 갯수 일 때, 초기화하는 방법

(마치 객체 비구조화 할당에서 없는 키값에 대해서 초기화된 값을 넣는 것과 동일)

const arr=[1];
const [o,t=3]=arr;
console.log(o,t);//1 3

---

객체의 깊숙한 곳에 있는 값을 꺼내기

⚠️ 특정 객체를 만들 때, 특정 key 이름으로 선언된 값 이름이 이미 존재한다면

key 이름:value 이름을 key이름만으로도 작성 가능!

[방법 1] 비구조화 할당을 깊숙한 곳까지 사용

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

//방법 1.비구조화 할당을 두번사용
const {name,languages}=deepObj.state.information;
const {value}=deepObj;
//비구조화 할당으로 추출된 이름을 묶어주기
const extracted={
    name,
    languages,
    value
};
console.log(extracted);//{name: "velopert", languages: Array(3), value: 5}

[방법 2] 비구조화 할당을 이용하여 구조화된 개념으로 접근

const {
    state:{
        information:{
            name,languages:[first,second,third]
        }
    },
    value
}=deepObj;
const extracted={
    name,
    first,second,third,
    value
};
console.log(extracted);
/**
 * {name: "velopert", first: "korean", second: "english", third: "chinese", value: 5}
 */