Array 객체 메서드 splice() vs. slice()의 차이점

Array 객체 메서드 splice() vs. slice()의 차이점

 

이전 포스팅에서 배열(Array)과 객체(Object)에 대해서 정리해보았습니다. pop()이나 push() 등 단순동작을 하는 간단한 메서들은 쉽게 이해가 되는 반면, splice()라는 녀석은 왠지 결이 좀 다르게 느껴졌을 것입니다.

 

영어 단어 splice는 밧줄이나 필름 따위를 서로 꼬거나 이어 붙이는 경우에 사용하는 단어입니다. 영화 시네마 천국 같은 곳에서 가위로 컷된 필름 조각들을 이어 붙이는 장면이 나올텐데요, 그런 행위를 splice라고 합니다.

이미지 배열인 필름을 자르거나 이어 붙여 봅시다! splice !

 

 

자바스크립트 배열의 splice() 메서드는 기존의 배열을 변경하며, 요소를 추가, 삭제, 교체하는 작업을 수행합니다. 이를 통해 배열을 유연하게 조작할 수 있다는 큰 장점을 가지고 있습니다. 어떻게 보면 현란한 배열의 마법사(?) 같은 느낌도 듭니다.

splice() 메서드의 기본적인 문법사용 방법은 다음과 같습니다.

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

 

start는 변경을 시작할 인덱스(즉, 순서 위치), deleteCount는 삭제할 요소의 개수, item1, item2는 추가할 요소입니다. deleteCount와 item1, item2는 사용목적에 따라 선택적으로 사용할 수 있습니다.

splice() 메서드의 각각의 옵션을 사용한 예제코드로 살펴보기로 합니다.

예제 1: 요소 삭제하기

let array = ['a', 'b', 'c', 'd', 'e'];
array.splice(2, 2);
console.log(array); // 출력: ['a', 'b', 'e']

splice() 메서드로 배열 요소 삭제하기

splice() 메서드를 이용해서 array 배열에서 인덱스 2부터 2개의 요소를 삭제합니다. 결과 배열에는 삭제된 요소를 제외한 요소들만 남게 됩니다. 즉, 배열에서 원하는 위치로부터 원하는 갯수만큼의 요소들을 잘라낸다고 볼 수 있습니다.

 

예제 2: 요소 추가하기

splice() 메서드는 slice와 발음이 비슷해서인지 왠지 처음 공부할 때는 배열의 요소들을 잘라내는데 사용되는 메서드인 것처럼 느껴집니다. 하지만, splice()는 배열의 요소를 추가할 수도 있다는 사실, 알고 계셨나요?

 

다음 예제를 통해 살펴보기로 합니다.

let array = ['a', 'b', 'c'];
array.splice(1, 0, 'd', 'e');
console.log(array); // 출력: ['a', 'd', 'e', 'b', 'c']

 

splice() 메서드로 배열 요소 추가하기

이 예제에서는 splice() 메서드를 이용하여 array 배열에서 인덱스 1 위치에 'd'와 'e'를 추가합니다. 삭제할 요소는 없으므로 deleteCount는 0으로 지정합니다. 결과 배열에는 원래 배열의 요소와 새로 추가된 요소들이 모두 포함됩니다.

 

만약, deleteCount를 1로 지정하면 어떤 결과를 가져다 줄까요? ['a', 'd', 'e', 'c']라구요? 정말?

맞습니다.

예제 3: 요소 교체하기

 

위 예제의 마지막에서 질문하기도 했었는데요, deleteCount를 기입하면 그 자리에 추가되는 요소를 넣어주게 되므로, splice()는 배열의 요소를 교체하는 결과를 가져다 줍니다.

 

이러한 동작 또한 replace()와 왠지 비슷한 느낌이 들죠?(참고로, replace는 string 객체의 메서드라는 차이가 있습니다.)

let array = ['a', 'b', 'c', 'd', 'e'];
array.splice(2, 2, 'x', 'y');
console.log(array); // 출력: ['a', 'b', 'x', 'y', 'e']

splice() 메서드로 배열 요소 교체하기

이 예제에서는 splice() 메서드를 이용하여 array 배열에서 인덱스 2부터 2개의 요소를 'x'와 'y'로 교체합니다. 결과 배열에는 기존 요소 중 인덱스 2부터 2개의 요소는 삭제되고, 새로운 요소 'x'와 'y'가 추가됩니다.

이와 같이 splice() 메서드는 배열의 내용을 유연하게 변경하는 데에, 매우 유용한 메서드입니다. 이를 적절히 활용하면 다양한 상황에서 배열을 조작할 수 있습니다. 배열의 마술사가 되는 것이죠!

 

이처럼 splice() 메서드는 매우 다양한 방법으로 사용할 수 있습니다. 이번에는 splice() 메서드를 활용하여 배열의 요소를 추출하는 방법과 닮은 듯 서로 다른, slice() 메서드와의 차이점에 대해 살펴보겠습니다.

 

 

예제 4: 요소 추출하기

let array = ['a', 'b', 'c', 'd', 'e'];
let extracted = array.splice(2, 2);
console.log(extracted); // 출력: ['c', 'd']
console.log(array); // 출력: ['a', 'b', 'e']

splice() 메서드로 배열 요소 추출하기

위 예제에서는 splice() 메서드를 이용하여 array 배열에서 인덱스 2부터 2개의 요소를 추출합니다. 추출한 요소는 extracted 변수에 저장됩니다. 결과 배열에는 추출된 요소가 제외되고 남은 요소들만 남게 됩니다. 즉, 원본 배열을 조작하고 변경을 가합니다.

 

예제 5: splice()와 slice() 메서드의 차이점

그렇다면, splice()와 slice()는 어떠한 차이점이 존재하는 것일까요? 다음 두 개의 예제를 통해서 살펴보겠습니다.

먼저, 앞에서 진행해본 방식과 비슷하게 splice()를 사용해봅니다.

let array = ['a', 'b', 'c', 'd', 'e'];
let extracted = array.splice(2, 2);
console.log(extracted); // 출력: ['c', 'd']
console.log(array); // ['a', 'b', 'e']

splice() 메서드는 대상 배열에 조작을 가합니다

 

익히 앞에서 보아 온 내용이죠? 눈치 빠른 분들은 이미 눈치채셨을겁니다.

이번에는 slice() 메서드를 이용해서 같은 코드를 실행해보겠습니다.(숫자만 바꿨어요~)

let array = ["a", "b", "c", "d", "e"];
let extracted = array.slice(1, 3);
console.log(extracted);   // ['b', 'c']
console.log(array);       // ['a', 'b', 'c', 'd', 'e']

slice() 메서드는 대상 배열에 영향을 끼치지 않습니다

extracted에 b와 c가 뽑혀 온 것은 알겠는데, 원본 array가 그대로~ 남아 있다는 게 인상적이지 않은가요?

위 예제는 splice() 메서드와 slice() 메서드의 차이점을 보여줍니다. splice() 메서드는 배열에서 요소를 제거하고 제거된 요소를 반환합니다. 반면, slice() 메서드는 배열에서 지정된 범위의 요소들을 새로운 배열로 반환합니다. 따라서, splice() 메서드는 원래 배열을 변경하며 반환값은 제거된 요소입니다. 반면, slice() 메서드는 원래 배열을 변경하지 않고 반환값은 새로운 배열입니다.

 

 

 

마치며

 

splice() 메서드를 활용하면 배열의 요소를 추가, 삭제, 교체하는 등의 유연한 조작이 가능합니다. 하지만, 장점만 있는 것은 아니겠죠? splice() 메서드를 남용하면 코드의 가독성이 떨어지고 예측하기 어렵게 된다는 문제가 발생할 수도 있습니다. 따라서, splice() 메서드를 사용할 때는 코딩 목적에 맞도록 신중하게 사용하는 것이 좋습니다.

마지막으로, splice() 메서드는 원래 배열을 변경하므로 배열을 복사하여 작업하는 경우 slice() 메서드를 사용하는 것이 좋습니다. 이를 통해 원래 배열을 변경하지 않고 작업할 수 있습니다.(저는 왠지 원본을 보존하면서 사용하는 방법이 더 좋긴하더라구요.)

이상으로, 자바스크립트 배열의 splice() 메서드에 대한 기본적인 내용들을 정리해보았습니다. 

오늘도 즐거운 코딩하세요~!

 

즐거운 코딩생활, 즐코딩

KINcoding.

 

https://app.kincoding.com 

WANTED MBTI