[JS] 배열 요소 삭제 및 추가하기 (slice)

1. slice를 이용한 배열 요소 삭제

• arr.slice(i, j)
  => arr의 i번 인덱스부터 j-1번 인덱스까지의 요소를 잘라냄

• arr.slice(i)
  => arr의 i번 인덱스부터 마지막 인덱스까지의 요소를 잘라냄

예시1)

let arr1 = ['a', 'b', 'c', 'd', 'e'];

let newArr1 = arr1.slice(1, 3);
// => arr1의 1번 인덱스부터 2번 인덱스까지의 요소를 잘라내서 newArr1에 저장


결과 :

console.log(arr1)  => ['a', 'b', 'c', 'd', 'e'];
console.log(newArr1)  => ['b', 'c']

예시2)

let arr2 = ['a', 'b', 'c', 'd', 'e'];

let newArr2 = arr2.slice(3);
// => arr2의 3번 인덱스부터 마지막 인덱스까지의 요소를 잘라내서 newArr2에 저장


결과 :

console.log(arr2)  => ['a', 'b', 'c', 'd', 'e'];
console.log(newArr2)  => ['d', 'e']

*slice를 이용한 배열 요소 삭제 시 원본 배열은 변경되지 않는 것에 주의하자.

2. slice를 이용한 배열 요소 추가

(slice에는 배열 요소를 추가하는 직접적인 기능은 없고, slice와 스프레드 문법(...)을 이용해 직접 새로운 배열 생성하고 이를 다시 할당하는 방식으로 마치 배열의 요소를 추가한 것처럼 동작시킬 수 있다.)

arr = [...arr.slice(0, i), ...newArr, ...arr.slice(i)]
=> arr의 0번 인덱스부터 i-1번 인덱스에 해당하는 요소, newArr의 모든 요소,
arr의 i번 인덱스부터 마지막 인덱스에 해당하는 요소를 갖는 새로운 배열을 arr에 저장함(덮어쓰기)

예시1)

let arr1 = ['a', 'b', 'c', 'd', 'e'];

let newArr1 = ['ㄱ', 'ㄴ', 'ㄷ'];

arr1 = [...arr1.slice(0, 2), ...newArr1, ...arr1.slice(2)];
// => arr1의 0번 인덱스부터 1번 인덱스까지의 요소와 newArr1의 모든 요소,
arr1의 2번 인덱스부터 마지막 인덱스까지의 요소를 갖는 새로운 배열을 arr1에 저장(덮어쓰기)


결과 :

console.log(arr1)  => ['a', 'b', 'ㄱ', 'ㄴ', 'ㄷ', 'c', 'd', 'e'];

예시2)

let arr2 = ['a', 'b', 'c', 'd', 'e'];

let newArr2 = ['ㄱ', 'ㄴ', 'ㄷ'];

arr2 = [...arr2.slice(0, 1), ...newArr2, ...arr2.slice(3, 4)];
// => arr2의 0번 인덱스의 요소와 newArr2의 모든 요소,
arr2의 3번 인덱스의 요소를 갖는 새로운 배열을 arr2에 저장(덮어쓰기)


결과 :

console.log(arr2)  => ['a', 'ㄱ', 'ㄴ', 'ㄷ', 'd'];

*slice는 인덱스를 기반으로 동작함을 기억하자.