며칠 전, 현주님이 고차배열 함수 중 Array.prototype.reduce() 콜백 함수의 네 번째 인수, reduce 메서드를 호출한 배열 자체에 { length } 와 같이 전달하면 배열의 길이값이 인수로 전달된다는 신기한 정보를 주셔서 정리하고 넘어가야겠다는 생각이 들었다. 그리고 어제, 현주님이 다시 이게 const {length} = array, 즉 디스트럭처링 할당을 통해 length에 길이 값을 별도로 할당하는 것이라는 새로운 정보를 가지고 오셔서 오늘 디스트럭처링 할당에 대한 블로깅을 해보고자 한다. 사실, 저 reduce() 함수의 응용 방식이나 디스트럭처링 할당 또한 모던 자바스크립트 Deep Dive를 읽고 정리하면서 분명히 짚고 넘어갔던 부분이었을텐데, 볼때마다 새롭고 낯선거 보니 책을 그냥 수박 겉핥기 식으로 읽었던 것이 분명하다..
디스트럭처링 할당이란?
디스트럭처링 할당(Destructuring Assignment), 즉 구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
이터러블 (Iterable)
이터러블이란 자료를 반복할 수 있는 객체를 말한다. 배열은 대표적인 이터러블이며, 배열 외에도 다수의 내장 객체가 반복 가능하다. 이터러블이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있다.
배열 디스트럭처링 할당
배열을 디스트럭처링 할당하는 방법은 다음과 같다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3 배열 디스트럭처링 할당의 대상(우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스, 순서대로 할당되게 된다. 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다. 이때 우변에 이터러블을 할당하지 않으면 에러가 발생한다.
const [x, y] = [1, 2];
const [a, b] = {}; // TypeError: {} is not iterable배열 디스트럭처링 할당의 기준은 배열의 인덱스이다. 즉, 순서대로 할당되며 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
const [a, b] = [1];
console.log(a, b); // 1 undefined
const [c, d] = [1, 2, 3];
console.log(c, d); // 1 2
const [e, ,f] = [1, 2, 3];
console.log(e, f); // 1 3또한 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있는데, 이때 기본값보다 할당된 값이 우선된다.
// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3
// 기본값보다 할당된 값이 우선된다.
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있다.
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 (...)를 사용할 수 있다. 이때 나머지 요소의 오른쪽 뒤에 쉼표가 있으면 SyntaxError가 발생한다.
const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
var [c, ...d,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma객체 디스트럭처링 할당
객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 이때 객체 디스트럭처링 할당의 대상(우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 즉, 배열 디스트럭처링 할당과 다르게 순서는 의미가 없으며 그냥 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
const user = { firstName: '행갬', lastName: '김' };
const { lastName, firstName } = user;
console.log(lastName, firstName); // 김행갬객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언하면 된다.
const o = {p: 42, q: true};
const {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true객체 디스트럭처링 할당 역시 배열 디스트럭처링 할당처럼 할당을 위한 변수에 기본값을 설정할 수 있다. 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.
const str = 'Hello';
const { length } = str;
console.log(length); // 5
const todo = { id: 1, content: 'HTML', completed: true };
const { id } = todo;
console.log(id); // 1그럼 여기서 아까 현주님이 알려주신 코드를 한번 봐보자.
const values = [1, 2, 3, 4, 5, 6];
const average = values.reduce((acc, cur, i, { length }) => {
return i === length - 1 ? (acc + cur) / length : acc + cur; }, 0);여기서 {length}는 사전에 const {length} = array와 같이 디스터럭처링 할당을 해두었기 때문에 인자로 전달할 수 있었던 것이었다. 볼때는 신기했는데 지금 보니 별거 아닌 문법이었다. 공부를 열심히 했어야지!
