splice ?

배열의 기존 요소를 삭제 혹은 교체하거나 새 요소를 추가하여 배열의 내용을 변경할 때 쓰는 매서드

문법)

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

매개변수)

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

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

item1, item2, ...
배열에 추가할 요소(아무 요소도 지정하지 않으면 요소를 제거하기만 함)

예시)

var test = ["angel", "clown", "drum", "cup"];
var removed = test.splice(2, 1, "trumpet");
// 배열의 2번 인덱스부터 1번째 요소를 제거하고 "trumpet" 넣기

// test is ["angel", "clown", "trumpet", "cup"]
// removed is ["drum"]

slice ?

어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환하는 매서드.
원본 배열은 바뀌지 않음.

• slice()는 배열을 나누고, 새로운 배열을 반환하기 때문에 각각쪼개진 새로운 arr가 생성된다.

문법)

arr.slice([begin[, end]])

매개변수)

begin-0을 시작으로 하는 시작점에 대한 인덱스. 

end-반환을 종료할 0 기준 인덱스이며, end 인덱스를 제외하고 반환함.  


* 음수 인덱스는 배열의 끝에서부터의 길이를 나타냄
	ex) slice(-2) 는 배열에서 마지막 두 개의 요소 반환
    ex) slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 반환
    
* begin이 undefined인 경우에는 0번 인덱스부터, begin이 배열의 길이보다 큰 경우에는 빈 배열을 반환

* end가 생략되면 slice()는 배열의 끝까지(arr.length) 반환

예시)

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, 3); // 1번째 인덱스부터 3번째 인덱스 전(2번째 인덱스)까지 요소 반환

• slice 함수의 내부 구현을 보다 구체적으로 파악해보기

reduce 함수의 원리를 펼쳐서 적어보면,

function _slice(arr, startidx, endidx) { // 배열과 시작인덱스, 끝인덱스가 필요.
  const newArr = [];

  for (let i = startidx ; i < endidx; i++) {
      const newValue = arr[i];
      newArr.push(newValue);   
  }   // i로 반복문을 돌면서 현재 인덱스가 startidx보다 같거나 크고 
         endidx보다 작을때(slice함수는 startidx부터 endidx가 아닌 
         바로 전 index까지 반환하기 때문) 해당 원소를 newArr에 push한다.
         
  return newArr;
} 

const test = ['apple','grape', 'banana', 'pineapple']
const result = _slice(test, 1, 3)
console.log(result);  // result는 ['grape', 'banana']