{Es6} 구조 분해 할당 (Destructuring assignment)에 대해서 알아보자.

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

배열이나 객체는 데이터를 괄호라는 그릇 안에 담아 두는 일종의 데이터 그릇입니다. 간혹 개발을 하다 보면 이런 데이터 그릇에서 일부 자료만을 뽑아서 사용하는 경우가 종종 있습니다. 또한 이렇게 뽑아낸 자료들을 변수로 만들어서 다른 곳에서 더 쉽고 편리하게 사용하는 것이 가능한데, 이를 도와주는 문법이 바로 구조 분해 할당(destructuring assignment)입니다.

배열 구조 분해 할당

예시1 배열 안에 있는 데이터를 변수로 만들기

	let animals = ['강아지', '고양이'];	// 배열 선언

    let [a, b] = ['강아지', '고양이'];	// 구조 분해 할당

animals라는 배열 안에 담긴 자료들을 다시 비슷한 형태로 짝을 맞춰 [a, b] 안에 재할당했습니다. 이렇게 되면 a, b라는 변수가 선언되고 이 변수들은 각각 '강아지', '고양이'라는 자료를 할당받게 됩니다.

하지만 간혹 짝이 안맞는 경우가 있습니다.

예시2 짝이 맞지 않는 경우

	let animals = ['강아지', '고양이'];	// 배열 선언

    let [a, b, c] = ['강아지', '고양이'];	// 구조 분해 할당
    
    console.log(c)	// undefined

이렇게 배열 안의 자료와 변수가 짝이 맞지 않는 경우에도 물론 사용이 가능합니다. 다만 짝이 맞지 않아 남는 변수는 아무것도 할당 받지 못했다는 undefined가 출력이 됩니다.

undefined가 출력되는 것을 방지하려면 기본값(default)을 할당해주면 됩니다.

예시3 기본값 설정하기

	let animals = ['강아지', '고양이'];	// 배열 선언

    let [a, b, c = '다람쥐'] = ['강아지', '고양이'];	// 구조 분해 할당
    
    console.log(c)	// '다람쥐'

아무 값이 없는 c라는 변수에 '다람쥐' 라는 값을 기본값으로 할당해줬습니다. 이러면 짝이 맞지 않아 남는 변수에 undefined가 출력되는 것을 방지할 수 있습니다.

---

객체 구조 분해 할당

예시4 객체 안에 있는 데이터를 변수로 만들기

	let dog = {
        name:"paul",
        color:'brown',
        age: 5,
    }
   
   	let {name, color, age} = dog;

객체의 구조 분해 할당 역시 배열과 비슷합니다. 주로 key 값을 변수명으로 받을 수 있지만 더 간략하게 변수명을 재할당하는 것 역시 가능합니다.

예시5 변수 재할당

	let dog = {
        name:"paul",
        color:'brown',
        age: 5,
    }
    
    let {name : n, color: c, age : a} = dog

예시처럼 콜론을 기준으로 왼쪽의 key 값이 오른쪽에 있는 값에 담겨 더 간략한 변수명을 작성할 수 있습니다.

예시6 기본값 설정하기

	let dog = {
        name:"paul",
        color:'brown',
        age: 5,
    }
    
    let {name : n, color: c, age : a, weight: w = '20kg'} = dog
    
    console.log(w) 	// '20kg'

객체를 구조 분해 할당시 짝이 맞지 않아 변수가 남는 경우, 배열과 마찬가지로 등호(=)를 사용해서 기본값을 설정하는 것이 가능합니다.

예시7 computed property

	let name = 'paul'
    let color : 'brown';
    
    let obj = {name : name, color : color}
    let obj = {name, color} 	//key와 value가 같다면 축약 가능 

반대로 변수를 객체 안에 대입하는 것 역시도 가능합니다. 이때 대입해주는 key와 value가 동일하다면 한 단어로 축약할 수 있습니다.

---

중첩 구조 분해 (nested destructuring)

예시8 복잡한 패턴의 자료형

	let animal = {
        dog: {
            name: 'paul',
            age: 5
        },
        food: ["chicken", "feed"]
    }

지금까지 객체와 배열에서 자료를 뽑는 방법에 대해서 알아봤다면 이번에는 조금 더 복잡한 구조에 대해서 살펴보겠습니다. 간혹 객체나 배열이 다른 객체와 배열을 포함하는 경우가 있습니다. 이런 복잡한 자료에서 우리가 원하는 자료를 뽑는 것을 증첩 구조 분해(nested destructuring)라고 합니다.

예시9 중첩 구조 분해

	let {
        dog:{name, age},
        food:[c, f],
    } = animal

    console.log(name)
    console.log(age)
    console.log(c)
    console.log(f)

자료형이 상당히 복잡해 보이지만 위에서 했던 것과 마찬가지로 짝만 잘 맞춰준다면 우리가 필요로 하는 자료를 뽑아낼 수 있습니다.

---

정리

구조 분해 할당
1. 배열, 객체를 해체해서 변수에 담는 문법
2. 변수에 담은 배열과 객체의 속성은 함수나 필요에 따라 다른 곳에 값을 대입하기 편리하다는 장점
3. 배열, 객체의 속성별로 변수 대입이 가능함
4. 만약 속성보다 변수가 많아 할당 받지 못한다면 undefined를 출력함,
5. 할당받지 못한 변수에 기본값(default) 할당이 가능함.
6. 중첩 구조 분해 역시 짝을 맞춰주면 변수에 값을 할당 할 수 있음

구조 분해 할당에 대해서 알아보자. 끝