[Javascript] slice() 사용법, splice()와 비교

배열 메서드인 slice()는 기존 배열에서 원하는 만큼 가져와 새로운 배열로 반환한다. splice()와 비슷하게 생겼지만, 기능은 다르니 확실하게 구분하여 사용하여야 한다.

 

 

 

 

목차

1. slice()와 splice()의 비교
2. slice()

 

 

 

 

1. slice()와 splice()의 비교

slice(시작인덱스, 끝인덱스)	시작 인덱스 자리에 있는 요소부터 끝 인덱스 전까지 요소를 추출하여 가져옴
splice(시작요소, 삭제개수, 기존배열추가요소)	시작 요소부터 끝 인덱스까지 추출하여 가져옴

 

 

[Javascript] splice 기능 - 배열에서 원하는 요소 제거, 추가

 

 

 

 

2. slice()

slice() 함수는 새로운 배열로 반환하기 때문에 기존 배열은 수정되지 않는다. 시작 인덱스와 끝 인덱스 모두 선택사항(optional)으로, 지정하지 않으면 디폴트 값으로 설정된다.

 

 

시작 인덱스 (선택사항)

• 기본적으로 인덱스 0을 시작으로 한다.
• 음수로 지정할 경우 배열의 끝부터의 인덱스 값을 나타낸다.
• undefined인 경우 인덱스 0부터 시작한다.
• 시작 인덱스 값이 배열의 길이보다 같거나 크면 빈 배열을 반환한다.

 

 

끝 인덱스 (선택사항)

• 끝 인덱스 값의 요소는 제외하고 그 전까지 가져온다.
• 끝 인덱스 값을 생략할 경우 시작 인덱스부터 배열의 끝까지 추출한다.
• 끝 인덱스를 제외하고 추출한다. ex) slice(3, 5)는 인덱스 3부터 4인 요소를 추출
• 음수로 지정할 경우 배열의 끝부터의 인덱스 값을 나타낸다. ex) slice(2, -1)은 인덱스 2인 요소부터 뒤에서 두 번째 요소까지 추출
• 끝 인덱스 값이 배열의 길이보다 클 경우 배열의 끝까지 추출한다.

 

예제

 

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
console.log(arr.slice(2, 5));                 // [3, 4, 5]
console.log(arr.slice(3, -2));                  // [4, 5, 6, 7, 8]
console.log(arr.slice(-3));                    // [8, 9, 10]
console.log(arr.slice(-3, 8));                  // [8, 9]
console.log(arr.slice(undefined, 4));        // [1, 2, 3, 4]
console.log(arr.slice(undefined));            // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.slice(20, 5));                // []
console.log(arr.slice(10));                    // []