array의 splice, slice함수 정리

React 공부를 하다가 javascript에 splice 함수가 있다는 것을 알게 되어서 정리를 하려고 한다. slice함수와 비교해 보면 좋을 것 같다.

splice()

javascript 배열 객체에서 제공돠는 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있다.

첫번째 인자로 시작 인덱스(index), 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환한다.

예를 들어 확인해보자

let a = ['A', 'B', 'C', 'D', 'E' ]
a.splice(2, 0, "7");
console.log(a) //  ['A', 'B', '7', 'C', 'D', 'E' ]

7이 추가가 되었다. 다시 처음으로 돌아가 다음 코드를 실행해 보자

let a = ['A', 'B', 'C', 'D', 'E' ]
a.splice(0, 0, "7");
console.log(a) //  ['7', 'A', 'B', 'C', 'D', 'E' ]

이제 추가가 아닌 삭제에 대한 예를 보자

let a = ['A', 'B', 'C', 'D', 'E' ]
a.splice(2, 1);
console.log(a) //  ['A', 'B', 'D', 'E' ]

slice()

slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환한다.

slice()는 몇번 써봤기 때문에 예를 2개만 들어서 익숙해져 보자

let a = ['A', 'B', 'C', 'D', 'E' ]
let b = a.slice(0, 2);
console.log(b)  // ['A', 'B']

주의할 점은 첫번째 인자로 넘어온 시작 인덱스가 가리키는 값은 포함하지만, 두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않는다는 것이다.

두번째 인자를 넘기지 않으면, 시작 인덱스가 가리키는 값부터 배열의 마지막 값까지 모두 복사해준다.

let a = ['A', 'B', 'C', 'D', 'E' ]
let b = a.slice(2);
console.log(b)   // ['C', 'D', 'E']

첫번째 인자도 넘기지 않으면, 배열의 처음 값부터 마지막 값까지 전체를 복제해버리는 효과를 낼 수 있다.

slice() 함수는 밑에서 다룰 splice() 함수와 달리 아무리 많이 호출해도 원본 배열의 값은 절대 건드리지 않는다. 따라서 원본 배열이 그대로 보존되야 하는 상황에서 매우 유용하게 사용된다.