[JS] 전개문법(+배열 복사, rest 파라미터), Splice() 메서드

✅ splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

array.splice(start, deleteCount, item1, item2, .. )

 

• start: 배열의 변경을 시작할 인덱스

- 배열의 길이보다 큰 값이 들어가면 배열 길이로 설정된다.

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

arr1.splice(4, 0, arr2); // arr1 뒤에 arr2를 넣는다.
console.log(arr1); // [1, 4, [2, 3]]

- 음수인 경우 배열 끝에서부터 센다.

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

arr1.splice(-1, 0, arr2); // arr1[-1]번째 뒤에 arr2를 넣는다.
console.log(arr1); // [1, [2, 3], 4]

 

• deleteCount: 배열에서 제거할 요소의 수

- 생략하면 start부터 모든 요소 제거

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

arr1.splice(1); // arr1의 인덱스 1부터 모두 제거
console.log(arr1); // [1]

- 0 이하면 어떤 요소도 제거하지 않는다.

 

• item1, item2, ..: 배열에 추가할 요소

- 아무 요소도 지정하지 않으면 요소를 제거하기만 한다.

 

---

✅ 전개문법

배열이나 문자열처럼 반복 가능한 문자를 0개 이상의 인수나 요소로 확장해서, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다. 즉, 이름 그대로 객체나 배열들을 펼칠(전개) 수 있다.

console.log(...'Hello'); // H e l l o

 

위에서 정리한 splice와 같이 사용해보면,

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

arr1.splice(4, 0, arr2); // arr1 뒤에 arr2를 넣는다.
console.log(arr1); // [1, 4, [2, 3]]

// 전개문법 사용
const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(4, 0, ...arr2); // arr1의 1번째 자리에 arr2를 넣는다.
console.log(arr1); // [1, 2, 3, 4]

전개문법을 사용하지 않았을 때는 배열 채로 넣는 반면,

전개문법을 사용하면 기존 배열을 펼쳐서 각 요소들을 넣어준다.

 

➕ 배열 복사

일반적으로 배열을 복사할 때는 값을 변경해주면 기존의 배열도 영향을 받는다.

const origin = [1, 2];
const copy = origin;
copy[2] = 3;

console.log(origin); // [1, 2, 3]
console.log(copy); // [1, 2, 3]
console.log(copy === origin); // true

 

전개문법을 활용하면 기존 배열이 영향을 받지 않도록 따로 생성해줄 수 있다.

const origin = [1, 2];
const copy = [...origin];

console.log(copy); // [1, 2]
console.log(copy == origin); // false
console.log(copy === origin); // false

origin 배열을 복사할 때 사용한 [...origin]는 새로운 배열을 생성한다.
새 배열은 origin 배열의 내용을 포함하고 있어서 배열의 내용은 동일하지만

두 배열은 서로 다른 메모리 위치에 저장되어 있어서 동일한 배열이라고 보지 않는다.

let origin = [1, 2];
let copy = [...origin1];
copy[2] = 3;

console.log(origin); // [1, 2] -> 3 영향 안 받음
console.log(copy); // [1, 2, 3]
console.log(copy == origin); // false
console.log(copy === origin); // false

기존 배열은 그대로이며, copy 배열의 값만 변경된다.

 

➕ rest 파라미터

 rest는 인수들의 목록을 배열로 전달받는 Rest 파라미터

function foo(...rest) {
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

결과값이 배열로 출력된다.

 

• rest 이전에 인수들 설정 가능

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

 

function foo(...rest, param1, param2) { }

foo(1, 2, 3, 4, 5);
// SyntaxError: Rest parameter must be last formal parameter

다만, rest는 가장 마지막에 와야 하는 파라미터이다.