[javascript] 배열 slice() & splice() 사용법 및 예시

 

 

javascript에서 배열 요소를 삭제하거나 추가, 기존값을 대체할 때 활용할 수 있는 slice() 함수와 spliece() 함수에 대해 알아보자 🤓

 

---

 

slice() 함수

 

인자로 받은 인덱스에 따라 배열의 특정 범위를 복사하여 반환하는 함수이다.

첫 번째 인자엔 시작 인덱스, 두 번째 인자엔 종료 인덱스가 들어간다. slice() 함수는 값을 복사하여 반환하기 때문에 원본 배열은 그대로 유지된다.

• 시작 인덱스부터 (종료인덱스-1)까지 잘라서 반환한다. 종료인덱스는 포함하지 않는다는 것을 유념!
• 두 번째 인자가 없을 경우엔 시작 인덱스부터 끝까지 값을 모두 복사하여 반환한다.
• 모든 인자가 없다면 배열의 처음부터 끝까지 모든 값을 복사하여 반환한다.

const data=[0,1,2,3,4,5,6,7]
data.slice(3,5); // [3,4]

 

 

 

 

splice() 함수

인자 값에 따라 배열의 특정 범위를 삭제하거나 새로운 값을 추가, 기존 값을 대체할 수 있는 함수이다. 첫 번째 인자엔 시작 인덱스, 두 번째 인자엔 몇 개의 값을 삭제할지, 세 번째 인자부턴 추가할 값이 들어간다. splice() 함수는 배열을 복사하지 않기 때문에 원본 데이터 유지 없이 함수를 거친 결과값이 실제 배열에 반영된다.

아래 예시 배열로 인자를 다양하게 변환해 splice() 함수 사용법을 알아보자.

 

• 특정 범위를 삭제

const data=[0,1,2,3,4,5,6,7]

data.splice(5,3) // [5, 6, 7] 삭제되는 요소를 반환한다.
data // [0, 1, 2, 3, 4]

 

• 특정 인덱스부터 값 삭제 없이 새로운 값 추가

const data=[0,1,2,3,4,5,6,7]

data.splice(1, 0, 10, 11, 12) // []
data // [0, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7]

 

• 특정 인덱스의 기존 값 대체
  : 첫 번째 인자엔 값을 대체하려는 시작 인덱스, 두 번째는 몇 개를 대체할 것인지, 세 번째부턴 무엇으로 대체할 것인지

const data=[0,1,2,3,4,5,6,7]

data.splice(0, 2, 20, 21) // [0, 1]
data // [20, 21, 2, 3, 4, 5, 6, 7]

 

 

❓ 만약 3개의 값을 삭제하고 4개의 값을 추가하면 어떻게 될까?
  : 기존 배열의 크기보다 하나 더 커진다.

const data=[0,1,2,3,4,5,6,7]

data.splice(0, 3, 20, 21, 22, 23) // [0, 1, 2]
data // [20, 21, 22, 23, 3, 4, 5, 6, 7]

 

• 특정 인덱스부터 끝까지 삭제
  : 시작하는 인덱스만 채워주면 된다. 만약 배열의 모든 원소를 삭제하려면 splice(0)을 넘겨주면 모두 삭제된 배열 확인할 수 있다.

const data=[0,1,2,3,4,5,6,7]

data.splice(5) // [5, 6, 7]
data // [0, 1, 2, 3, 4]

 

 

 

---

 

slice() vs splice() 

 

slice()는 원본 배열은 유지된 채 복사된 배열에서 slice 결과를 반환하는 반면 splice()는 원본 배열이 유지되지 않고 실제 배열에 splice 결과가 반영되어 반환된다.

원본 배열 데이터를 이후에 사용해야 한다면 splice보단 slice를, 변경된 값이 적용된 배열을 사용해야 한다면 splice 함수를 쓰는 것을 추천한다.