[JS] splice(), slice()

KJA·2022년 7월 15일
0

Splice()

원본 배열에 새로운 요소를 추가하거나 기존 요소를 삭제 또는 교체하여 원본 배열을 변경하고 제거된 배열을 반환 합니다.

syntax

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

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

  • 음수를 지정한 경우 : 배열의 끝에서부터 요소를 센다.
  • 배열의 길이보다 큰 수를 지정한 경우 : 실제 시작 인덱스는 배열의 길이로 설정
  • 절대값이 배열의 길이보다 큰 경우 : 0으로 세팅

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

  • 생략 / 값이 array.length - start보다 큰 경우 : start부터의 모든 요소를 제거.
  • 0 이하의 수를 지정: 어떤 요소도 제거되지 않는다.

item1, item2, ... : 배열에 추가할 요소.
지정하지 않는 경우 : splice()는 요소 제거만 수행한다.

반환값: 제거한 요소를 담은 배열.

  • 아무 값도 제거하지 않았으면 빈 배열을 반환한다.

예제

1. 요소를 제거하지 않고 2번 index에 'add1', 'add2' 추가

const arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(2, 0, 'add1', 'add2'); // []

console.log(arr); // (7) ['A', 'B', 'add1', 'add2', 'C', 'D', 'E']

2. 2번 index에서 1개 요소 제거

const arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(2, 1); // ['C']

console.log(arr); // (4) ['A', 'B', 'D', 'E']

3. 1번 index에서 2개 요소 제거 후 'add1' 추가

const arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(1, 2, 'add1'); // (2) ['B', 'C']

console.log(arr); // (4) ['A', 'add1', 'D', 'E']

4. 끝에서 2번째 요소부터 2개의 요소를 제거

const arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(-2, 2); // (2) ['D', 'E']

console.log(arr); // (3) ['A', 'B', 'C']

5. 1번 index 포함 이후의 모든 요소 제거

const arr = ['A', 'B', 'C', 'D', 'E'];
arr.splice(1); // (4) ['B', 'C', 'D', 'E']

console.log(arr); // ['A']

Slice()

slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다.

syntax

slice(start[, end])

start : 추출 시작점에 대한 인덱스.

  • undefined인 경우 : 0 부터 slice
  • 음수를 지정한 경우 : 배열의 끝에서부터 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출한다.
  • 배열의 길이와 같거나 큰 수를 지정한 경우 : 빈 배열을 반환한다.

end : 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출한다.)

  • 지정하지 않을 경우 : 배열의 끝까지 slice
  • 음수를 지정한 경우 : 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출한다.
  • 배열의 길이과 같거나 큰 수 를 지정한 경우 : 배열의 끝까지 추출

반환값 : 추출한 요소를 포함한 새로운 배열.

예제

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const arr1 = arr.slice(3, 5);			
console.log(arr1);						// (2) [4, 5]

const arr2 = arr.slice(undefined, 5);
console.log(arr2);						// (5) [1, 2, 3, 4, 5]

const arr3 = arr.slice(-3);
console.log(arr3);						// (3) [8, 9, 10]

// 뒤에서부터 3번째 숫자인 8부터 추출하기 시작해서 앞에서부터 9번째 숫자(10) 전까지 추출하므로 숫자 8과 9 추출
const arr4 = arr.slice(-3, 9);
console.log(arr4);						// (2) [8, 9]

// index번호 5번인 6부터 추출 시작하여 끝에서부터 -4번째인 7 전까지 추출하므로 숫자 6을 추출
const arr5 = arr.slice(5, -4);
console.log(arr5);						// (1) [6]

const arr6 = arr.slice(-5, -1);
console.log(arr6);						// (4) [6, 7, 8, 9]

0개의 댓글