구조분해할당

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

1. 배열의 구조분해할당

배열 값을 각각 꺼내오고자 할 때
1) 기존

	const arr = [1,2,3,4,5];
    
    console.log(arr[0]); // 1
    console.log(arr[1]); // 2

배열명에 대괄호를 붙인 뒤 부르고자 하는 index번호를 넣어 해당 데이터를 호출할 수 있다.
2) 구조분해할당 사용

	const [one, two, three] = arr;

이렇게 작성할 수 있으며 오른쪽의 배열을 분해해 좌변에 위치한 변수들에 각각 할당한다.

배열 구조분해할당의 활용

1) 일부 반환값 무시(불필요한 배열 요소 버림)

공백과 쉼표를 사용하여 불필요한 배열 요소를 버릴 수 있다.

const [one, ,two] = [1,2,3,4,5];

console.log(two); // 3

할당된 변수가 없으면 생략된다.

2) 기본값 설정

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 클 때,
할당할 값이 없으면 undefined로 취급된다.
할당할 값이 없을 때 기본으로 할당해 줄 값이 기본값을 설정하여 에러를 방지할 수 있다.

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

const [one=3, two=4, three=5] = [1,2];
console.log(three); // 5

3) 변수 교환

이미 할당된 변수를 바꾸려면
1) 기존

let one = 1;
let two = 2;
//one에 two 값을 넣고, two에 one값을 넣고 싶다면?
let three = one;
one = two;
two = three;

three라는 (불필요한)변수를 만들어 기존 값 one을 담아둔다.

2) 구조분해할당

	[a,b] = [b,a];

임시 변수를 쓰지 않아도 된다.

4) '...'로 나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇개만 필요하고 그 이후의 나머지 값들은 한데 모아서 저장하고 싶을 때 '...'(점 세개)를 붙일 후 매개변수를 추가하면 나머지 요소를 가져올 수 있다.

	let [one, two, ...rest] = [1,2,3,4,5];
    
    console.log(one); // 1
    console.log(two); // 2
    
    console.log(rest[0]); // 3
    console.log(rest[1]); // 4
    console.log(rest.length); // 3

2. 객체의 구조분해할당

1) 기존

const obj = {
	id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};

console.log(obj.id); // 1
console.log(obj.name); // joy
console.log(obj.age); // 20
console.log(obj.city); // seoul

2) 구조분해할당

const obj = {
	id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};
const { id, name, age, city } = obj;
    
console.log(obj.id); // 1
console.log(obj.name); // joy
console.log(obj.age); // 20
console.log(obj.city); // seoul

객체를 분해할 때도 배열처럼 기본값을 줄 수 있다.

const obj = {
	id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};
const { id, name, age, city, gender } = obj;

console.log(obj.gender); // undefined

const obj = {
	id : 1,
    name : 'joy',
    age : '20',
    city : 'seoul'
};
const { id, name, age, city, gender = 'femail } = obj;
console.log(obj.gender); // femail

중첩구조분해

const obj = {
	one : {
    	two : {
        	three : 'Hi'
        },
    },
};
console.log(obj.one.two.three);

const obj = {
	one : {
    	two : {
        	three : 'Hi'
        },
    },
};

const { one:{ two:{ three }, }, } = obj;
console.log(three); // Hi

요약

• 구조분해할당은 간결하고 직관적인 코드작성을 가능하게 한다.
• 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요할 경우,
  객체나 배열을 변수로 '분해'하는 문법인 구조분해할당을 활용한다.
• 이외에도 함수의 매개변수가 많거나 기본값이 필요한 경우에도 활용할 수 있다.