[자바스크립트_개념정리] 구조 분해

구조 분해 할당 distructuring assignment

: 주로 배열이나 객체의 속성을 해체해서 원하는 값을 선정해 복사한 후 별도의 변수에 저장한다

- 배열 리터럴의 구조 분해

배열의 구조 분해에서는 순서가 중요하다

[ syntax ]

const a = [1, 2, 3, 4];
const [x, y] = a;  //=> a배열을 구조 분해

console.log(x)  //1
console.log(y)  //2

[ 구문 연습하기 ]

=> 두 번째 줄에서 ‘ = ‘ 좌측의 대괄호는 raceResults 배열에서 분해한 각 요소를 어떻게 지칭할지 결정한다

=> 배열 요소는 순서대로 gold, silver, bronze의 값이 된다 ( gold = raceResults[0] , silver = raceResults[1] … ) 

=> 나머지 ‘sera’, ‘tomi’는 나머지 매개변수 everyoneElse에 모여 저장됨

해당하는 값이 없을 때에는 undefined가 할당되는데 기본값을 설정해 이를 방지할 수 있다

할당된 값을 서로 바꿀 때 새로운 변수를 만들지 않아도 된다

// 구조 분해 할당을 이용하지 않으면 임시의 변수 z를 선언해야 한다
let x = 1;
let y = 2;
let z = x;
x = y;
y = z;

// 구조 분해 할당 이용
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x);		//2
consnole.log(y);	//1

- 객체 리터럴의 구조분해

순서를 따르지 않아 배열 구조 분해보다 실용적이다

객체의 값을 기반으로 새로운 변수를 만든다

[ syntax ]

const 객체리터럴명 = {
  속성1: 값1,
  속성2: 값2,
  속성3: 값3
}

const {속성1, 속성2} = 객체리터럴명;   // 구조 분해로 속성1,2 를 복사

//속성1이라는 변수에 '속성1:값1'을 속성2라는 이름의 변수에 '속성2:값2'를 저장한 셈이다

[ 구문 연습하기 ]

=> 구조분해로 변수에 저장한 firstName, age, email의 값은 반환이 되지만, 저장하지 않은 city, lastName의 값은 반환되지 않는다

구조 분해 방법을 쓰지 않으면 아래와 같이 따로 따로 변수에 저장해야 해서 번거롭다

- 객체 리터럴의 속성명과 다른 ‘ 새로운 이름 ‘으로 변수 저장하기

=> 객체 리터럴에서 ‘ born ‘ 이라는 속성명의 값이 ‘ birthYear ‘ 변수에 저장됨

- 디폴트 값 추가

=> 값이 존재하는 ‘ birthYear ‘는 그 값(born : 1999)이 나오고, 새로운 속성이라 값이 존재하지 않는 gender는 디폴트 값인 ‘female’ 이 반환됨

- 함수 매개변수의 구조분해

함수를 정의할 때 괄호안에 매개변수 작성으로 전달되는 값의 구조를 분해할 수 있다

주로 객체에 사용되는 방법

user라는 객체 리터럴을 가지고 ‘ lastName ‘ 과 ‘ firstName ‘ 의 값으로 함수를 실행하려 할 때

구조 분해를 하지 않으면 

구조분해를 하면 아래와 같다

이때 더 간단히 구조 분해 하는 방법이 있는데

=> 함수를 정의할 때 매개변수 자리에서 구조를 분해한다 (이때 객체이름 user를 쓰지 않음)

=> 함수를 실행할 때 구조 분해한 매개변수 자리에 user를 쓰면 user객체가 구조 분해되어 firstName과 lastName 값이 뽑혀 나온다

배열 메서드와 구조 분해 활용

[ 활용 1 ]

=> 위와 같이 객체 리터럴이 들어있는 배열이 있을 때, 구조 분해를 하지 않으면

filter메서드의 인수인 화살표 함수에서 movie라는 매개변수가 필요하다

하지만 매개변수자리를 구조 분해하면

=> movie와 같은 매개변수가 없어도 같은 결과가 나온다

[ 활용 2 ]

=> map메서드를 사용할 때도 마찬가지로 구조 분해를 하지 않은 방식을 사용하면 movie라는 매개변수가 필요하고

=> 구조 분해를 하면 movie라는 매개변수를 넣지 않아 더 간편하다