[자바스크립트] slice와 splice의 차이점에 대해 알아보자

 

들어가며

알고리즘 문제를 하나씩 풀면서, slice와 splice의 차이점에 대해 문득 궁금해졌습니다. 비슷한 기능을 수행하는 것 같은데, 어떤 차이점이 있고, 어느 상황에서 메서드를 사용해야 하는지 잘 알지 못했습니다. 이번 기회에 이 부분을 제대로 정리해봐야겠다고 생각했습니다.

 

 

 

 

---

 

 

 

 

 

Array.prototype.slice()

slice() 메서드는 어떤 배열의 start부터 end 전까지의 복사본을 새로운 배열 객체로 반환합니다. 즉, 원본 배열은 수정되지 않습니다.

 

위의 설명이 좀 어려울 수 있습니다. 이를 다르게 해석하면, slice(start, end) 메서드는 start와 end 인자를 받습니다. start는 추출 시작점에 대한 인덱스를 말하며, end는 추출을 종료할 인덱스를 말합니다. 메서드의 사용방법과 메서드를 사용하는 다양한 경우의 수를 적어보려 합니다.

 

 

 

 

 

---

 

 

 

 

 

slice 메서드 사용방법

slice(start, end)

 

start: 추출 시작점에 대한 인덱스.

• undefined인 경우: 0부터 slice 합니다.
• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출합니다.
• 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환합니다.

 

end: 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출합니다.)

• 지정하지 않을 경우: 배열의 끝까지 slice 합니다.
• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세 번째부터 끝에서 두 번째 요소까지 추출합니다.
• 배열의 길이와 같거나 큰 수를 지정한 경우: 배열의 끝까지 추출합니다.

 

반환 값이란, 추출한 요소를 포함한 새로운 배열입니다. 즉 원본 배열에 영향을 주지 않습니다.

 

 

 

 

 

 

 

---

 

 

 

예시로 알아보는 slice 메서드

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(1, animals.slice());
// 1, ["ant", "bison", "camel", "duck", "elephant"]

console.log(2, animals.slice(3, 5));
// 2, ["duck", "elephant"]

console.log(3, animals.slice(undefined, 5));
// 3, ["ant", "bison", "camel", "duck", "elephant"]

console.log(4, animals.slice(-3));
// 4, ["camel", "duck", "elephant"]

console.log(5, animals.slice(-3, 4));
// 5, ["camel", "duck"]

console.log(6, animals.slice(5));
// 6, []

console.log(7, animals.slice(4));
// 7, ["elephant"]

console.log(8, animals.slice(undefined));
// 8, ["ant", "bison", "camel", "duck", "elephant"]

console.log(9, animals.slice(0, -4));
// 9, ["ant"]

console.log(10, animals.slice(2, 15));
// 10, ["camel", "duck", "elephant"]

 

1. 1번은 만약 start와 end가 둘 다 적혀있지 않다면, 배열의 첫 번째 인덱스부터 그대로 잘라옵니다. 

 

2. 2번은 slice에 start로 3과 end값으로 5가 적혀있습니다. 즉 배열의 세 번째 인덱스부터 배열의 다섯 번째 인덱스 전까지 추출한다는 뜻입니다. 즉 배열의 끝에 해당하는 값까지 추출합니다.

 

3. 3번은 slice에 start로 undefined값이 있고, end값으로 5가 적혀있습니다. start가 undefined인 경우 0부터 추출한다는 뜻이고, 배열의 다섯 번째 인덱스 전까지 추출한다는 뜻입니다. 즉 처음부터 배열의 끝에 해당하는 값까지 추출합니다.

 

4. 4번은 slice에 start로 -3이 적혀있습니다. 이는 배열의 끝에서부터의 길이를 나타냅니다. 즉 배열의 마지막 3개의 요소를 추출합니다. 

 

5. 5번은 slice에 start로 -3이 적혀있고, end로 4가 적혀있습니다. 이는 배열의 마지막 3개의 요소에서 시작해서 배열의 네 번째 요소 전까지 추출한다는 뜻입니다. 

 

6. 6번은 slice에 start로 5가 적혀있습니다. 만약 배열의 길이와 같거나 큰 수를 지정하면 빈 배열을 반환합니다.

 

7. 7번은 slice에 start로 4가 적혀있습니다. 이는 4번 인덱스의 값부터 끝까지 추출합니다. 즉 4번 인덱스인 'elephant'만이 추출됩니다.

 

8. 8번은 slice에 start로 undefined가 적혀있습니다. 이는 1번 콘솔 값과 같이 처음 인덱스부터 그대로 잘라옵니다.

 

9. 9번은 slice에 start로 0, end로 -4가 적혀있습니다. 이는 0번째 인덱스부터 값을 가져오고, 끝에서 4번째의 순서까지의 값을 잘라옵니다. 즉 0번째 인덱스인 'ant'값만이 출력됩니다. 

 

10. 10번은 slice에 start로 2, end로 15가 적혀있습니다. 이는 2번째 인덱스부터 15번째 인덱스 전까지 값이 추출됩니다. 하지만 배열은 4번째 인덱스까지밖에 존재하지 않습니다. 이에 따라 2번째 인덱스인 camel부터 배열의 끝까지의 값이 추출됩니다. 

 

 

 

 

 

 

---

 

 

 

 

Array.prototype.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 즉 이 메서드는 원본 배열 자체를 수정합니다. slice는 원본 배열을 수정하지 않고 새로운 배열을 만드는 것과 다르게 splice는 원본 배열 자체를 수정한다는 것에서 큰 차이점이 있습니다. 메서드의 사용방법과 메서드를 사용하는 다양한 경우의 수를 적어보려 합니다.

 

 

 

 

---

 

 

 

 

splice 메서드 사용방법

slice(start, deleteCount, item1, item 2,...)

 

start: 배열의 변경을 시작할 인덱스.

• 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. 
• 배열의 길이보다 큰 수를 지정한 경우: 실제 시작 인덱스는 배열의 길이로 설정
• 절댓값이 배열의 길이보다 큰 경우 : 0으로 세팅

 

deleteCount: 배열에서 제거할 요소의 수.

• 생략 또는 값이 array.length - start보다 큰 경우 : start로부터의 모든 요소를 제거
• 0 이하의 수를 지정 : 어떤 요소도 제거되지 않음

 

item1, item 2,... : 배열에 추가할 요소

• 지정하지 않은 경우 : splice()는 요소 제거만 수행한다.

 

반환 값: 제거한 요소를 담은 배열 : 아무 값도 제거하지 않았으면 빈 배열을 반환

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

예시로 알아보는 splice 메서드

const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(3, 2, 'cat', 'dog', 'cow');

console.log(animals);
// ["ant", "bison", "camel", "cat", "dog", "cow"]

console.log(animals1);
// ["duck", "elephant"]

 

splice() 메서드를 사용하면 원본 배열인 animals가 변경됩니다. 그리고 3번째 인덱스부터 2개의 요소를 삭제합니다. 즉 3번째 인덱스 값은 duck이며, duck을 포함한 elephant까지 해서 2개의 요소를 삭제합니다. 그 후, 'cat', 'dog', 'cow'를 추가했습니다.

 

또한 삭제된 요소인 'duck'과 'elephant'는 animals의 배열에서는 삭제됐지만, 이 삭제된 배열의 요소는 animals1 변수에 담깁니다. 

 

const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(3, 0, 'cat');

console.log(animals);
// ["ant", "bison", "camel", "cat", "duck", "elephant"]

console.log(animals1);
// []

 

splice를 하면 두 번째 매개변수는 deleteCount입니다. deleteCount가 0이거나 0보다 작은 수이면 어떤 요소도 삭제되지 않습니다. 그러므로 animal 배열에는 3번째 인덱스에 'cat'이 추가되며, animals1은 아무것도 삭제된 요소가 없기 때문에 빈 배열을 반환합니다. 

 

const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(-3, 2);

console.log(animals);
// ["ant", "bison", "elephant"]

console.log(animals1);
// ["camel", "duck"]

 

splice의 첫 번째 매개변수는 start입니다. 만약 -3을 넣으면 뒤에서부터 3번째인 camel부터 시작하며, deleteCount가 2이기 때문에 2개의 요소를 삭제합니다. 즉 camel을 포함하여 duck까지의 요소 2가지를 삭제합니다. 

 

const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(-6, 1);

console.log(animals);
// ["bison", "camel", "duck", "elephant"]

console.log(animals1);
// ["ant"]

splice의 첫 번째 매개변수는 start인데, start가 만약 배열의 길이보다 큰 경우에는 0으로 세팅합니다. start 변수로 -6을 받았는데, 절댓값이 0번째 요소부터 1개의 요소를 삭제합니다. 즉 animals 배열에서 'ant'가 삭제되고, animals1 배열에 'ant'가 담깁니다.

 

const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(3);

console.log(animals);
// ["ant", "bison", "camel"]

console.log(animals1);
// ["duck", "elephant"]

const animals2 = animals1.splice(1, 1);

console.log(animals1);
// ["duck"]

console.log(animals2);
// ["elephant"]

 

splice의 메서드에서 두 번째 매개변수 값인 deleteCount가 생략되거나 array.length - start의 값보다 큰 경우 지정한 start 인덱스부터 끝까지 모두 제거합니다. 삭제된 값들은 animals1 배열에 담겼고, animals1의 배열에서도 첫 번째 인덱스의 값을 삭제한 값을 animals2 배열에 담았습니다. 

 

 

 

 

 

---

 

 

 

 

 

 

 

마치며

알고리즘 문제를 풀면, 문제를 푸는 것에서 마치는 것이 아니라, 좀 더 효율적인 코드를 고민하고, 더 나은 코드를 작성하기 위해서 고민해야 할 필요성을 계속 느낍니다. 앞으로도 메서드를 활용할 때 상황에 맞는 적합한 메서드의 사용방법에 대해 공부하고 싶습니다. 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

참고

[JS/Array] slice()와 splice()의 차이점

Array.prototype.splice() - JavaScript | MDN

Array.prototype.slice() - JavaScript | MDN