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)를 하면 세 번째부터 끝에서 두 번째 요소까지 추출한다.
-배열의 길이와 같거나 큰 수를 지정한 경우: 배열의 끝까지 추출한다.
반환 값: 추출한 요소를 포함한 새로운 배열, 즉 원본 배열에 영향을 주지 않는다.
예시
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"]원본 배열이 수정되지 않는다는 특징을 이용해서 오름차순이나 내림차순을 할 때 사용하는 sort(원본 배열을 바꾸는 매서드)를 사용할 때 원본을 유지하기 위한 목적으로 slice()를 사용할 수 있다.
array=[3,6,7,5,4,2,1,8,9]
array.sort((a,b)=>a-b //array 배열의 원본이 수정되면서 오름차순 정렬
array.slice().sort((a,b)=>a-b//원본을 유지하며 array 배열 오름차순 정렬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()는 요소 제거만 수행한다.
반환 값: 제거한 요소를 담은 배열 : 아무 값도 제거하지 않았으면 빈 배열을 반환
예시
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 배열에 담았다.
