[자바스크립트] 배열의 메소드 - splice, slice

 

1. splice

• 임의의 인덱스에서 원소를 추가하고 삭제한다.
• 원소 삭제, 교체, 추가 하는 경우에 사용할 수 있다.
• splice(시작 인덱스, 삭제 개수, 추가할 요소)
• 각 파라매터는 모두 필수값이 아니다.
• 제거한 요소들을 새로운 배열로 반환한다.

const arr = [1, 2, 3, 4];
const newArr = arr.splice(1, 2);
console.log(arr); // 출력: [1, 4]
console.log(newArr); // 출력: [2, 3]

 

- 시작 인덱스 1, 삭제할 개수는 2개이기에 arr 배열에서 2와 3이 삭제되고, 삭제한 2, 3을 새로운 배열로 반환했다.

const arr = [1, 2, 3, 4];
const newArr = arr.splice(1, 2, 1000);
console.log(arr); // 출력: [1, 1000, 4]
console.log(newArr); // 출력: [2, 3]

- 시작 인덱스 1, 삭제할 개수는 2개, 삭제한 자리에 1000 추가이기에 arr 배열에서 2와 3이 삭제 후 1000이 추가, 삭제한 2, 3을 새로운 배열로 반환했다.

const arr = [1, 2, 3, 4];
const newArr = arr.splice(1);
console.log(arr); // 출력: [1]
console.log(newArr); // 출력: [2, 3, 4]

- 시작 인덱스 1만 넣으면 시작 인덱스 뒤로 모두 삭제한다. 그리고 삭제한 모든 요소를 새로운 배열로 반환한다.

const arr = [1, 2, 3, 4];
const newArr = arr.splice();
console.log(arr); // 출력: [1, 2, 3, 4]
console.log(newArr); // 출력: []

- 인자를 넣지 않아도 에러는 발생하지 않는다. 삭제된 요소가 없고, 빈 배열을 새로 반환했다.

2. slice

• 배열을 자른다.
• slice(시작 인덱스, 마지막 인덱스), 이 때 마지막 인덱스 값은 포함이 아니고, 미만을 의미한다.
• 원본 배열을 수정하지 않는다. 새로운 배열을 반환한다.
• 각 파라매터는 모두 필수값이 아니다.
• 배열을 복사할 때도 사용하는데, 이 때 얕은 복사를 실행한다.

const arr = [1, 2, 3, 4];
const newArr = arr.slice(1, 3);
console.log(arr); // 출력: [1, 2, 3, 4]
console.log(newArr); // 출력: [2, 3]

- 원본 배열은 수정되지않고, 인덱스 1 이상 3 인덱스 미만인 2, 3이 새로운 배열로 반환 되었다.

const arr = [1, 2, 3, 4];
const newArr = arr.slice(1);
console.log(arr); // 출력: [1, 2, 3, 4]
console.log(newArr); // 출력: [2, 3, 4]

- 원본 배열은 수정되지않고, 인덱스 1 부터 끝까지 새로운 배열로 반환 되었다.

const arr = [1, 2, 3, 4];
const newArr = arr.slice();
console.log(arr); // 출력: [1, 2, 3, 4]
console.log(newArr); // 출력: [1, 2, 3, 4]

- 인자를 넣지 않아도 에러는 발생하지 않는다. 원본 배열을 그대로 복사한다.