자바스크립트
Section 7. 자바스크립트 배열의 스프레드와 디스트럭쳐링
포칼이
2023. 4. 5. 16:35
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
두 번째 출력문을 보면 기본값보다 할당값이 우선되는 것을 알 수 있다.