구조분해할당이 필요한 이유?
개발을 하다보면 함수에 변수나 객체의 일부값만 필요할때가 있습니다. 이때 구조분해할당을 이용할경우 전체값이 아닌 일부의 값을 참조해 오기때문에 사용합니다.
배열 구조 분해
기본 구조
let [me,boyfriend,secondboyfriend] =['수연','송강','육성재'];
console.log(me) //수연
console.log(boyfriend)//송강
console.log(secondboyfriend)//육성재예시코드 2)
let users =['수연','송강','육성재'];
let [user1,user2,user3] = users ;
//이때 user1은 수연, user2는 송강, user3은 육성재가 됩니다.그렇다면 구조분해할당을 받은 배열의 요소에 값이 없을 경우는 어떻게 될까요? 아래의 예시코드를 참고해 주세요.
let [a,b,c] =[1,2];
// 이경우에 a는 1,b는 2,c는 undifiend가 됩니다. 이런경우 기본값을 설정하여 이를 미연에 방지할수 있습니다.
let [a=1,b=2,c=4] = [1,2];
//이렇게 기본값을 설정하면 c의 값은 4로 할당됩니다.일부 반환값을 무시하는것도 가능합니다.
let [user1 , ,user2] =["수연","형호","송강","육성재];
//이경우에는 user1에는 수연이, user2에는 송강이 할당되고 나머지값은 무시됩니다.자 이제 임의의 변수 a,b가 있다고 가정을 합니다. a에 b값을 넣고 싶다면 어떻게 해야될까요? a=b를 하는순간 a의 값은 사라지기때문에 옳지않습니다. 이럴경우 구조분해 할당을 이용한다면 간단히 이용할수 있습니다.
[a,b] =[b,a];
//이렇게 할경우 기존의 a값은 남아있으며 a는 b의 값을 받게 됩니다.객체 구조분해
let user ={name:"수연",age:20}
let {name,age} = user;
//객체 구조분해 할당은 순서를 신경안써도 됩니다.
// 이코드는 아래의 코드와 같은 의미입니다.
let name = user.name
let age =user.age
새로운 변수 이름으로도 할당이 가능합니다.
let {name:userName,age:userAge} = user객체에서도 기본값 설정이 가능합니다.
let {name,age,gender="female"} = user;실제 앨리스 코딩에서 사용한 코드
form.addEventListener('click', e => {
e.preventDefault();
let { value } = input;
answer.innerText = value;
console.log(value);
});이벤트 타켓의 값도 구조분해할당으로 가능합니다.
wrapper.addEventListener('click', (e) => {
const {target} = e;
const index = parseInt(target.dataset.index) ;
iList[index].classList.add('on');
if(currentHighLightIndex !== -1){
iList[currentHighLightIndex].classList.remove('on');
}
currentHighLightIndex = index;
})
