배열 구조 분해

• 배열의 요소를 해체하고 필요한 요소를 꺼내어 선정하는 간편한 방식입니다.

• 기존의 배열을 해체해서 별개의 변수 형태로 만들 수 있다.

• 배열이므로 순서를 기준으로 분해 & 선정 됩니다.

/* 기존 방식에서 배열의 요소를 변수에 옮기기 */
const score = [1,10,30,50,80,100];

const highScore = score[4];	// 80을 저장
const lowScore = score[0];	// 1을 저장 

/* 배열을 분리하는 최근 방식 */
const score = [1, 2, 30, 50, 80, 100];

const [first, second] = score;

console.log(first);		// 출력 : 1, score[0]이 복사됨
console.log(second);	// 출력 : 2, score[1]이 복사됨

/*
first, second 변수를 만들어서 score 배열의 인덱스 가장 작은 값부터 복사합니다.
*/

1.1 나머지 연산자로 분해한 배열 복사하기

const score = [1, 2, 30, 50, 80, 100];

const [first, second, ...everyoneElse] = score;

console.log(everyoneElse);
/*
출력 :

30, 50, 80, 100
score[0], [1]을 제외한 나머지 요소들이 everyoneElse 변수에 저장됩니다.
*/

객체 분해

• 객체안의 키와 쌍으로 된 요소들을 분해하고 꺼내서 변수에 저장할 수 있습니다.

• 배열이 아니므로 순서에 상관이 없다.

/* 기존 방식으로 변수에 객체 값을 저장 */

const user = {
    id: 'chulsu1234',
    password: 'chulsu',
    email: 'cc@naver.com',
    birthday: '02.10',
    city: 'Seoul'
};

const userId = user['id'];		// user.id 프로퍼티를 변수에 할당
const password = user.password;	// user.password 프로퍼티를 변수에 할당

/* 
이 방식은 번거로워 복사 대상이 많으면 추천하지 않는다.
*/ 

/* 최근 방식으로 변수에 객체 값을 저장 */
const user = {
    id: 'chulsu1234',
    password: 'chulsu',
    email: 'cc@naver.com',
    birthday: '02.10',
    city: 'Seoul'
};

const { email, id, city } = user;

console.log(email)
console.log(id)
console.log(city)
/*
출력 : 

cc@naver.com
chulsu1234
Seoul

객체를 분해해서 변수에 저장하는 방식은 순서는 중요하지 않지만
변수에 이름과 복사할 객체의 프로퍼티 이름은 동일해야 한다. 
*/

2.1 프로퍼티 이름 수정

const user = {
    id: 'chulsu1234',
    password: 'chulsu',
    email: 'cc@naver.com',
    birthday: '02.10',
    city: 'Seoul'
};

const { email : mail , password : pawd } = user;	
// email과 password 프로퍼티키를 mail과 pawd 변수에 저장

console.log(mail)
console.log(pawd)
/* 
출력 :

cc@naver.com
chulsu

: 콜론을 이용해서 기존 객체의 프로퍼티명을 다른 이름으로 변경해서 변수에 저장할 수 있다.
*/

2.2 기본 값 추가

const user = {
    id: 'chulsu1234',
    password: 'chulsu',
    email: 'cc@naver.com',
    birthday: '02.10',
    city: 'Seoul'
};

const { email : mail , password : pawd , name = 'kimchulsu' } = user;

console.log(name)	
/* 
출력 : kimchulsu

user 객체에는 name 이라는 프로퍼티가 없습니다.
존재하지 않는 프로퍼티는 = 할당연산자를 통해서 기본값을 추가해줄 수 있다.

만약 name이라는 프로퍼티가 존재한다면 해당 프로퍼티의 값으로 출력되었을 것 입니다.
*/

매개변수 분해

• 매개변수로 전달되는 값의 구조를 분해할 수 있다.

const user = {
    firstName : '김',
    lastName : '철수',
    year : 1996,
    talent : 'study'
};

function fullName(user) {
    const { firstName, lastName } = user;	// 인자값을 받아와서 구조분해
    return console.log(`${firstName}, ${lastName}`);
}

fullName(user);
/*
출력 : 김, 철수

함수 내부에서 인자로 받아온 매개변수를 구조분해해서 필요한 특성만 반환할 수 있습니다.
*/

1.1 매개변수를 분해해서 전달받기

const user = {
    firstName: '김',
    lastName: '철수',
    year: 1996,
    talent: 'study'
};

function fullName({ year, talent }) {	// 매개변수 구조분해
    return console.log(`${year}, ${talent}`);
}

fullName(user);
/*
출력 : 

1996, study

매개변수를 전달받는 과정에서도 구조분해를 할 수 있습니다.
변수를 선언할필요도 없기에 훨씬 간편하다
*/

1.2 배열메서드에서 구조분해 사용하기

// const highScore = movies.filter( (movie) => movie.score >= 92 );
const highScore = movies.filter( ({score}) => score >= 92 );

console.log(highScore);
/*
출력 : 

[
  { title: '컨져링', score: 98, year: 1990 },
  { title: '인시디어스', score: 92, year: 2004 }
]

구조분해를 사용하면 많이 차이나지는 않지만 이전 코드보다 가독성있게 코드를 간소화 시킬 수 있습니다.
*/

// const highScore = movies.map( (movie) => `${movie.title}, ${movie.score}, ${movie.year}` );
const highScore = movies.map( ({title, score, year}) => `${title}, ${score}, ${year}` );

console.log(highScore);
/* 
출력 :

[ '킹콩, 90, 1928', '컨져링, 98, 1990', '인시디어스, 92, 2004' ]

위 코드와 같은 결과지만, 프로퍼티 특성이 많아질수록 구조분해의 코드가 점차 더 간소화 됩니다
*/