splice, slice 배열객체 함수로서 자주 사용하지 않아 헷갈려서 정리했다.

splice

• 꼬아서 잇다 라는 의미로 배열 중간에 요소를 넣고 잇는다.(요소를 넣지 않으면 자르는 기능으로 된다.)
• 추가할 item을 입력하지 않고 splice함수를 사용하면 return으로 잘린 배열을 반환, 원본 array도 자른 요소가 빠진다.( 아래 예제 첫번째 참고 )
• 추가할 itme을 입력하고 splice함수를 사용하면 return으로 빈배열을 반환하고 원본 array에 item을 추가한 array를 반환받는다.

• syntax

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

  • start
  • The index at which to start changing the array.
  • deleteCount
  • 첫번째 배개변수부터 얼마나 제거할것인가
  • itemX
  • 삽입할 배열 요서소
  • splice 안에서는 함수 메소드 call 함수를 사용해서 호출할것이라고 예상

  const months = ['Jan', 'March', 'April', 'June'];
  console.log(months.splice(1));  //Array ["March", "April", "June"]
  console.log(months); //['Jan']

  const months1 = ['Jan', 'March', 'April', 'June'];
  // inserts at index 1
  console.log(months1.splice(1, 0, 'Feb')) // []
  console.log(months1);  //Array ["Jan", "Feb", "March", "April", "June"]


  const months2 = ['Jan', 'March', 'April', 'June'];
  // replaces 1 element at index 4
  console.log(months2.splice(4, 1, 'May')); //[]
  console.log(months2); //Array ["Jan", "Feb", "March", "April", "May"]

slice

• syntax

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

• 자른다는 의미에서 원본은 그대로 두고 shallow coopy를 통해서 시작과 끝을 매개변수로 받아 새로운 배열을 return 한다.

  • 첫번째 매개 변수
  • "Zero-based index at which to begin extraction."
  • 음수 입력시 뒤에서 부터 자른다.
  • 두번째 매개 변수
  • Zero-based index before which to end extraction. slice extracts up to but not including end.
  • 그 숫자를 포함하지 않는다.(직전까지 자른다.)

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

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

비교

• splice

  var array=[1,2,3,4,5];
  console.log(array.splice(2));

  • array.splice(2) return [3,4,5].
  • 원래 배열은 [1,2]이 된다.

• slice

  var array=[1,2,3,4,5]
  console.log(array.slice(2));

  • array.slice(2) return [3,4,5]
  • 원래 배열은 그대로 [1,2,3,4,5]
  • tip array.slice(0)이 되면 shallow copy가 된다.
  • 참고 url