[Javascript] 배열 추가, 삭제, 수정 메서드 splice

코딩테스트를 준비하다 보니 메서드에 대해서 제대로 알고 있지 못하다는 생각이 들었다.

해당 메서드가 기존 배열을 수정하는지 안 하는지, 어떤 것을 리턴하는지 등을 정확하게 알고 있어야 코드를 클린 하게 짤 수 있을 거 같다.

따라서 앞으로 코테 문제에 사용했던 메서드들을 정리하려 한다.

 

첫 스타트는 splice!

1. splice

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

 

splice는 배열의 기존 요소를 삭제 또는 교체 하거나 새 요소를 추가해서 배열의 내용을 변경하는 메서드이다.

splice를 통해 배열을 수정하면, 기존 배열도 같이 변경된다. 

 

1) start

배열 변경의 시작 인덱스를 입력한다. 입력된 인덱스부터 배열이 변경된다.

음수인 경우, 배열의 끝에서부터 요소를 선택한다.

 

ex) 1 : 배열의 1번째 인덱스부터 변경 & 삭제

ex) -1 : 뒤에서 1번째 인덱스부터 변경 & 삭제 = arr.length - 1

 

 

2) deleteCount

배열에서 제거할 요소의 개수를 입력한다.

값을 생략하면, start부터 모든 요소를 제거한다. 

값이 array.length - start 보다 큰 경우에도 start부터 모든 요소를 제거한다. 

 

0 이하라면, 어떤 요소도 제거하지 않는다. 단, 이때는 최소한 하나의 새로운 요소를 지정해야 한다.

 

 

3) item

배열에 새로 추가할 요소이다.

아무 요소도 지정하지 않으면, 요소를 제거하기만 한다. 

 

 

4) return 

제거한 요소를 담은 배열을 반환한다. 

만일 하나의 요소만 제거한 경우, 길이가 1인 배열을 반환하며, 아무것도 제거하지 않았으면 빈 배열을 반환한다.

 

 

2. 예시 

 

1) 삭제

var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

 

3번째 Index에서 한 개의 요소를 삭제했으므로, myFish는 mandarin을 제외한 배열이 출력된다.

removed는 삭제된 값이 배열로 출력되므로, mandarin이 출력된다.

 

 

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]

 

이런 식으로 몇 개의 요소를 삭제할지 지정하지 않았다면, 2번 인덱스부터 끝까지 모든 요소가 삭제된다.

따라서 myFish에는 angel, clown만 남게 된다.

 

removed에는 삭제된 요소들의 배열인 mandarin, sturgeon이 들어가게 된다.

 

 

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

 

만일 뒤에서부터 배열의 요소를 삭제하고 싶다면, 위처럼 음수를 사용하면 된다.

음수를 사용할 경우 가장 끝에 있는 요소가 -1, 그 앞이 -2가 된다.

 

따라서 위 예시는 -2, 뒤에서 두 번째 요소부터 한 개의 요소를 제거하므로 mandrin이 삭제된다.

 

 

2) 추가

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum", "guitar");

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

 

2번째 index에서 0개를 제거하므로 삭제된 요소는 없다.

drum과 guitar는 2번째 인덱스인 drum 이후에 추가된다.

 

삭제한 요소는 없으므로 removed는 아무것도 출력하지 않는다.

 

 

 

3) 수정(삭제 후 추가)

var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2, 1, "trumpet");

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

 

2번째 인덱스부터 하나의 요소를 삭제하므로, drum이 삭제된다.

그리고 해당 자리에 trumpet이 추가된다.

 

removed는 삭제된 요소인 drum을 반환한다.

 

 

3. 코딩테스트 문제 : 프로그래머스 0v, 배열 조각하기

정수 배열 arr와 query가 주어집니다.

query를 순회하면서 다음 작업을 반복합니다.

짝수 인덱스에서는 arr에서 query[i]번 인덱스를 제외하고 배열의 query[i]번 인덱스 뒷부분을 잘라서 버립니다.
홀수 인덱스에서는 arr에서 query[i]번 인덱스는 제외하고 배열의 query[i]번 인덱스 앞부분을 잘라서 버립니다.
위 작업을 마친 후 남은 arr의 부분 배열을 return 하는 solution 함수를 완성해 주세요.

 

해당 문제는 splice를 사용하면 간단하게 풀 수 있는 코딩테스트 문제이다.

 

 

답 

function solution(arr, query) {    
    query.forEach((item, i) => {
        if(i%2 === 0) arr.splice(item+1)
        else arr.splice(0, item)
    })
    
    return arr;
}