미주알고주알

[Javascript] splice 메소드 - 순수 함수로 만들어보기 본문

Javascript

[Javascript] splice 메소드 - 순수 함수로 만들어보기

미주알고주알 2023. 3. 29. 15:21

Javascript의 splice 메소드는 독특하게도  배열의 기존 요소를 "삭제", "교체", 그리고 새 요소를 "추가"하여 기존 배열의 내용을 변경하는 기능을 갖고 있다.

참 다재다능한 친구구만. 

 

매개 변수에 대한 설명은 mdn 문서를 참고!!!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

Array.prototype.splice() - JavaScript | MDN

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

developer.mozilla.org

 

 

근데, 이런 splice 는 기존의 배열을 변경한다는 점에서 비순수 함수이다.

저번 배열 함수와 동일하게 splice 메소드 역시 순수 함수로 만들어보자.

 

추가 요소을 원하는 만큼 넣기 위해 인자에 rest 연산자를 사용하였고,

순수 함수로서 새로운 객체를 리턴하기 위해 스프레드 문법을 사용하였다.

const arrX = [1, 2, 3, 4, 5];

const splice = (arr, idx, delCnt = arr.length - 1, ...insertions) => [
	...arr.slice(0, idx),
	...insertions,
	...arr.slice(idx + delCnt),
];

const a1 = splice(arrX, 1, 3); // a1 = [1, 5]
console.log('a1=', a1);
const a2 = splice(a1, 1, 0, 2, 3, 4); // a2 = [1, 2, 3, 4, 5]
console.log('a2=', a2);
const a3 = splice(a2, 2); // a3 = [1, 2]
console.log('a3=', a3);
const a4 = splice(a3, 1, 1, 3, 4, 5); // a4 = [1, 3, 4, 5]
console.log('a4=', a4);
const a5 = splice(a4, 2, 2, 7, 8, 9); // a5 = [1, 3, 7, 8, 9]
console.log('a5=', a5);