구조분해할당(Destructor)란?

자바스크립트 공부 할떄 같이 공부하던분들이 디스트럭쳐 디스트럭쳐 한걸 들을수 있었다.

그게 뭔데.. 하면서 정말 어렵다 느끼곤 재대로 공부는 하지 않았던걸로 기억하는데

자바스크립트를 다시 공부하면서 꼭 필요한 최신문법인걸 알고나서 구조분해할당을 다시 공부하게 되었다.

구조분해할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다

배열 구조 분해 할당

보통 우리가 원하는 배열의 값을 변수에 담을라면 아래의 코드처럼 일일이 인덱스에 접근하여서 새로 변수에 담아야 하는데
숫자가 몇개 없으면 문제가 없지만 만약에 100개 200개 있으면 코드를 작성하는게 굉장히 번거로운 작업일것이다

const scores = [41214, 1232, 4124, 51252, 51251, 55125125];
const one = scores[0] // 41214
const two = scores[1] // 1232
const three = scores[2] // 4124

그래서 이때 구조분해 할당을 하면 정말 편하게 변수에 값을 담을수 있다
이렇게 하면 scores 값을 각각 one, two, three 라는 배열안에 변수에 담을수 있다
여기서 one two three는 변수이다!

const [one, two, three] = scores 
one // 41214
two // 1232
three //  4124

객체 구조 분해 할당

- 객체 구조 분해 할당은 아주 많이 사용되며 순서를 따르지 않기에 배열 구조분해 보다 실용적이다

const user = {
    email : "woghfhgf@naver.com",
    password : 123123,
    firstName : "Lee",
    lastName : "jaeho",
    born : 1996,
    died : "no die", 
    city : "gyunggi-do",
    state : "yangju-si"
}
const {email,password,lastName} = user 

객체구조분해할당에 다른 특징이라면 값을꺼내오는거 뿐만 아니라 변수의 이름을 기존이름에서 새로운 이름으로 바꿀수도 있습니다.

const {born : birthDay, died : live }

기존 변수 뒤에 :(콜론)을 붙히고 새롭게 작성하고 싶은 변수 이름을 작성하면 기존 변수에서 새로운 이름으로 바뀝니다<! 값은 그대로 입니다.>

// birthDay = 1996 , live : "no died"

객체에 디폴트(기본값)도 지정이 가능한데요
아래 코드를 보면 user에는 없는 died2 라는 변수가 존재 합니다

const {city : birthYear , state,  died2 = "N/A"} = user

console.log로 찍어보면 undefined가 나오는데요 기본값을 지정해주는 방법은 다음과 같습니다
died2에 기본값을 지정해주는것입니다 방법은 간단합니다 died2에 = 입력하고 넣고 싶은 디폴트 값을 넣어주면 끝입니다.

const {city : birthYear , state,  died2 = "N/A"} = user
// 결과 "gyunggi-do" , "yangju-si", "N/A"

died2에 기본값을로 "N/A" 가 나오는걸 볼수 있습니다.

매개변수 구조분해

 - 함수를 정의할떄 괄호안에 매개변수를 적성하면 전달되는 값으 구조를 분해할수 있습니다.
- 객체에 주로 사용되는 방법입니다.

const user = {
    email : "woghfhgf@naver.com",
    password : 123123,
    firstName : "Lee",
    lastName : "jaeho",
    born : 1996,
    died : "no die", 
    city : "gyunggi-do",
    state : "yangju-si"
}


function fullName({firstName , lastName}){
    return `${firstName} ${lastName}`
} 

fullName(user)

// 결과값  "Leejaeho"

filter와 map 메서드를 이용한 구조분해할당

const items = [
    {
       name : "box",
       price : 50
    }, 
    {
       name : "toy",
       price : 110
    }, 

    {
       name : "phone",
       price : 30
    }, 

    {
       name : "cup",
       price : 20
    }, 

   ]

items 에서 10보다 큰 price 값을 찾고 싶을때 구조분해 할당을 이용한 로직입니다

기존 
items.filter((item)=> item.price > 10)


구조분해할당

items.filter(({price})=> price >= 10)

item이라는 price 매개변수만 작성하면 된다

Map을 이용해 name과 price만을 뽑아내기

기존
items.map((a , b) =>{
return  return `${name} ${price}`


구조분해할당 

items.map(({item})=>{
    return `${item.name} ${item.price}`
})

간단한 예제이지만 잘 활용하면 정말 유용하게 쓰일 문법인거 같다는 생각이 든다.. 더 열심히 공부해야겠다!