잠시 헷갈리는 것을 복습해보자.
Rest 파라미터는 함수의 가변 인자를 배열로 받기 위해 사용된다.
스프레드 문법은 이터러블인 객체를 개별적인 값들의 목록으로 변환하기 위해 사용된다.
그럼 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 즉 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
과거 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다.
var arr = [1,2,3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다.
이때 배열 디스트럭처링 할당의 대상은 이터러블이여야 하며, 할당 기준은 배열의 인덱스이다.
즉 순서를 지키면서 할당된다.
const arr = [1,2,3];
const [one, two, three] = arr;
배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다.
객체 디스트럭처링 할당
매우 자주사용되는 문법 중 하나이다. ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.
var user = { firstName: 'Once', lastName : 'Run'};
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName);
ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상 변수에 할당한다.
이때 우변은 객체이여야 하며, 할당 기준은 프로퍼티 키이다. 이는 순서에 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.(이걸 몰라서 고생했다.)
const user = {firstName : 'Once', lastName : 'Run'};
const { lastName, firstName } = user;
배열 디스트럭처링 할당은 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언하는데 배열 리터럴 형태로 선언하였다.
객체 디스트럭처링 할당을 위해서는 왼쪽에 프로퍼티 값을 할당받을 변수를 선언하되 객체 리터럴 형태로 선언해야 한다.
위 예제는 프로퍼티 축약 표현을 통해 선언한 것으로 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.
const { lastName: ln, firstName: fn} = user;
배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.
const todos = [
{id: 1, content: 'work'},
{id: 2, content: 'study'}
];
const [, { content }] = todos;
댓글