설명

배열이나 객체의 구조를 분해한다.

1. 배열 분해

1) 배열 destructuring의 활용

const rank = ['한국', '미국', '일본', '영국']

const 1st = rank[0];
const 2nd = rank[1];
const 3rd = rank[2];
const 4th = rank[3];

console.log(1st) // 한국
console.log(2nd) // 미국
console.log(3rd) // 일본
console.log(4th) // 영국

위와 같이 순서를 구할 수 있고 배열의 순서가 바뀌면 랭킹 또한 배열의 순서대로 변경된다.

const rank = ['한국', '미국', '일본', '영국']

const [1st, 2nd, 3rd, 4th] = rank

console.log(1st) // 한국
console.log(2nd) // 미국
console.log(3rd) // 일본
console.log(4th) // 영국

변수가 배열의 형태로 선언되어 있고 rank 배열을 할당했다.
그러면 rank의 요소들이 변수에 순서대로 할당된다.

배열을 분해하여 할당한다.

이때 배열의 형식이 아니거나 아무것도 할당하지 않는다면 오류가 발생한다.

2) 변수의 개수와 배열의 길이가 다른 경우

기본동작

const rank = ['한국', '미국', '일본', '영국', '중국']

const [1st, 2nd, 3rd, 4th] = rank

console.log(1st) // 한국
console.log(2nd) // 미국
console.log(3rd) // 일본
console.log(4th) // 영국

순서대로 할당되며 변수에 할당되지 않은 요소는 그냥 할당되지 않는다.

모두 할당하기

const rank = ['한국', '미국', '일본', '영국', '중국', '핀란드']

const [1st, 2nd, 3rd, ...unrank] = rank

console.log(1st) // 한국
console.log(2nd) // 미국
console.log(3rd) // 일본
console.log(unrank) // (3) ['영국', '중국', '핀란드']

마지막 변수에 점을 세개 붙여주면 앞선 변수에 각각 배열을 할당하고 점이 붙은 마지막 변수에 남은 배열을 모두 할당한다.

마지막 변수에만 사용해야한다.

변수의 개수가 더 많을 때

const rank = ['한국', '미국', '일본']

const [1st, 2nd, 3rd, 4th] = rank

console.log(1st) // 한국
console.log(2nd) // 미국
console.log(3rd) // 일본
console.log(unrank) // undefined

변수의 개수가 더 많으면 할당되지 않은 변수는 undefined가 나타난다.

const rank = ['한국', '미국', '일본']

const [1st, 2nd, 3rd, 4th = "없음"] = rank

console.log(1st) // 한국
console.log(2nd) // 미국
console.log(3rd) // 일본
console.log(unrank) // undefined

함수의 파라미터와 같이 기본값을 작성하여주면 undefined가 아닌 기본값이 할당된다.

3) 변수의 할당된 값 교환

let winner = '한국'
let secondWin = '미국'

console.log("우승자 :" , winner);
console.log("준우승자 :" , secondWin);

//우승자 : 한국
//준우승자 : 미국

우승자와 준우승자를 바꾸고자할 때 destructuring문법을 사용할 수 있다.

let winner = '한국'
let secondWin = '미국'

console.log("우승자 :" , winner);
console.log("준우승자 :" , secondWin);

//우승자 : 한국
//준우승자 : 미국

[winner, secondWin] = [secondWin, winner]

console.log("우승자 :" , winner);
console.log("준우승자 :" , secondWin);

//우승자 : 미국
//준우승자 : 한국

할당 연산자는 오른쪽의 값을 왼쪽에 할당하기 때문에 winner가 secondWin의 값으로 바뀌게 된다.

2. 객체 분해

1) 객체 destructuring의 사용

객체는 프로퍼티 네임값을 사용

이때 점표기법으로 사용하지 않고 프로퍼티 네임을 변수처럼 사용할 수 있다.

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
};

const title = movie.title
const genre = movie.genre

console.log(title); // La La Land
console.log(genre); // 2016

destructuring 문법으로 작성

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
};

const { title, genre } = movie;

console.log(title); // La La Land
console.log(genre); // 2016

객체를 보낼 때 중괄호로 변수를 감싼다.
할당연산자 오른편 객체에서 왼쪽 변수의 이름과 같은 프로퍼티 네임이 있으면 변수에 값이 할당된다.

2) 객체에 존재하지 않는 property name

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
};

const { title, director } = movie;

console.log(title); // La La Land
console.log(director); // undefined

객체에 존재하지 않는 property name이 있으면 undefined가 나타나고

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
};

const { title, director = 'Damien Chazelle' } = movie;

console.log(title); // La La Land
console.log(director); // Damien Chazelle

기본값을 지정해줄 수도 있다.

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
};

const { title, genre, ...rest } = movie;

console.log(title); // La La Land
console.log(genre); // drama
console.log(rest); //  { release : '2016', rating : '9' }

배열 할당 연산자와 마찬가지로 점 세개를 활용하면 앞서 모든 객체가 할당되면 남은 프로퍼티들을 하나의 객체로 모아 변수에 담긴다.

3) 변수이름 설정하기

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
};

const { title: name, genre, ...rest } = movie;

console.log(title) ; // error
console.log(name); // La La Land
console.log(genre); // drama
console.log(rest); //  { release : '2016', rating : '9' }

이름을 바꾸고자하는 변수에 :{바꿀이름}을 적으면 변수를 다른이름으로 설정가능하다.

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
    'actor-name': 'ryan'
};

const { title: name, genre, 'actor-name':actor, ...rest } = movie;

console.log(title) ; // error
console.log(name); // La La Land
console.log(genre); // drama
console.log(actor); // ryan
console.log(rest); //  { release : '2016', rating : '9' }

변수로 사용할 수 없는 이름도 변수로 사용가능하다.

3. 함수와 함께 사용법

1) 함수의 리턴값이 배열일 때 그 값을 활용

function arr() {
	return ['a', 'b', 'c']
}

const [el1, el2, el3] = arr()

console.log(el1); // a
console.log(el2); // b
console.log(el3); // c

2) rest parameter가 배열

function attend([first, second, third, ...etc ]) {
	console.log(`선착순 1등은 '${first}') 
    console.log(`선착순 2등은 '${second}')
    console.log(`선착순 3등은 '${third}')
    console.log(`나머지 학생들은') 
    
    for (let student of etc) {
    	console.log(${student})
    }
    
    console.log(`나머지 ${etc.length}명`)
}

const call = ['민정', '수영', '윤호', '정국', '슬기', '미수' ]
attend(call)

//선착순 1등은 '민정'
//선착순 2등은 '수영'
//선착순 3등은 '윤호'
//나머지 학생들은
//정국
//슬기
//미수
//나머지 3명

변수를 파라미터로 선언하여 배열을 할당했다.

3) 파라미터를 객체로 활용한 함수

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
    'actor-name': 'ryan'
};

function movieInfo (object) {
	console.log(`영화 제목은 '${object.title}'입니다.`)
    console.log(`개봉년도는 '${object.release}'년도이고`)
    console.log(`장르는 '${object.genre}'입니다.`)
};

movieInfo (movie);

위처럼 매번 파라미터의 객체에 접근하는 것이 아니라

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
    'actor-name': 'ryan'
};

function movieInfo (object) {
	const {title, release, genre } = object

	console.log(`영화 제목은 '${title}'입니다.`)
    console.log(`개봉년도는 '${release}'년도이고`)
    console.log(`장르는 '${genre}'입니다.`)
};

movieInfo (movie);

destructuring 문법을 사용하여 간결하게 표현 할 수 있다.

추가로 함수 내 사용할 프로퍼티들이 정해져있으면

const movie = {
	title : 'La La Land'
    release : '2016'
    genre : 'drama'
    rating : '9'
    'actor-name': 'ryan'
};

function movieInfo ({title, release, genre } ) {
	console.log(`영화 제목은 '${title}'입니다.`)
    console.log(`개봉년도는 '${release}'년도이고`)
    console.log(`장르는 '${genre}'입니다.`)
};

movieInfo (movie);

파라미터에서 바로 활용할 수도 있다.

4) HTML에서 DOM 이벤트에서의 활용

const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
	event.target.classList.toggle('checked');
})

파라미터로 이벤트 객체가 전달되기 때문에 target프로퍼티로 간결하게 사용가능하다.
아래 참조

const btn = document.querySelector('#btn');

btn.addEventListener('click', ({target}) => {
	target.classList.toggle('checked');
})

const btn = document.querySelector('#btn');

btn.addEventListener('click', ({target}) => {
	const {classList} = target;
	classList.toggle('checked');
})

target은 위와 같이 함수 내에서 한번 더 분해가능하다.