Section 7. 자바스크립트 배열의 스프레드와 디스트럭쳐링

I. 스프레드 spread

1. 기본 문법

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); //[1, 2, 3]

const arr1 = ['B', 'C'];
const arr2 = ['D'];
const arr3 = ['E'];

const arr4 = ['A', ...arr1, ...arr2, ...arr3, 'F']

console.log(arr4); //['A', 'B', 'C', 'D', 'E', 'F']

2. 활용

a. 배열을 다수의 인자들로 펼칠 수 있다

const arr1 = [1, 2, 3, 4, 5];

console.log(arr1); //[1, 2, 3, 4, 5]

console.log(...arr1); //1 2 3 4 5

console.log(
  Math.max(...arr1),
  Math.min(...arr1)
); //5 1

const arr = [1, 2, 3, 4, 5, 6, 7];
const toAdd = ['둘', '셋', '넷'];

arr.splice(1, 3, ...toAdd);

console.log(arr); //[1, '둘', '셋', '넷', 5, 6, 7]

b. concat보다 가독성있는 배열 결합이 가능하다

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = arr1.concat(arr2);
const arr4 = [...arr1, ...arr2];

console.log(arr3, arr4); //[1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6]

c. 배열의 얕은 복사가 일어난다

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr1 === arr2); //false

// ⚠️ 깊은 복사는 되지 않음
const arr1 = [{ x: 1 }, { x: 2 }];
const arr2 = [...arr1];

arr1[0].x = 0;
console.log(arr1, arr2);

여기도 마찬가지로 원시값은 값 자체가 복사가 되는 것임을 명심하고 참조자료형은 주소가 복사(얕은 복사)가 되는 것이기 때문에 참조하는 값이 바뀌면 같은 주소를 바라보고 있는 참조 자료형들에 영향을 미친다.

 

d. push, unshift 대신 사용한다

let arr = [1, 2, 3];

arr = [...arr, 4];
console.log(arr); //[1, 2, 3, 4]

arr = [0, ...arr];
console.log(arr); //[0, 1, 2, 3, 4]

이렇게 하면 가독성이 향상되는 장점이 있다.

 

e. 원본배열을 유지한 채 일정부분만 연결하여 복사할 수 있다

splice는 원본배열을 변경한다는 점을 잊지 말자.

const orgArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 4 ~ 6을 제외한 새 배열 만들기

// 💡 slice는 원본을 변경하지 않음
const arr1 = [
  ...orgArr.slice(0, 3),
  ...orgArr.slice(6, 9)
];
console.log(arr1); //[1, 2, 3, 7, 8, 9]

// 원본은 유지
console.log(orgArr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

II. 디스트럭쳐링

1. 문법

const arr = [1, 2, 3];

const x = arr[0];
const y = arr[1];
const z = arr[2];

console.log(x, y, z); //1 2 3

간략화

const arr = [1, 2, 3];
const [x, y, z] = arr;

console.log(x, y, z); //1 2 3

const arr = [1, 2, 3];
const [x, y] = arr;

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

일부만 가져오는 것도 가능하다.

 

기본값 설정

const arr = [1, 2, 3];

const [a, b, c, d = 4, e = 5] = arr;
console.log(a, b, c, d, e); //1 2 3 4 5

const [f, g, h = 4] = arr;
console.log(f, g, h); //1 2 3

두 번째 출력문을 보면 기본값보다 할당값이 우선되는 것을 알 수 있다.