미주알고주알

[Javascript] push, pop, shift, unshift 배열 메소드 - 순수 함수로 만들어보기 본문

Javascript

[Javascript] push, pop, shift, unshift 배열 메소드 - 순수 함수로 만들어보기

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

배열의 메소드를 사용하는 일이 많은데,

다음의 네 메소드는 순수함수라기 보다.. 배열의 값 자체를 바꿔버리는 함수들이기 때문에 함수 실행의 시기 및 횟수에 따라 변경된 배열을 참조하게 된다.

 

이런 점에서 빈번하게 사용되는 push, pop, shift, unshift 메소드를 순수 함수로 바꿔 만들어 보기로 했다.

들어온 인자에 대해 결과를 리턴할 뿐이기 원래의 배열 값을 변경시키지 않는다. 구현에 사용한 배열의 filter 함수 및 새로운 객체 변화시키는 것은 기존 객체를 활용할 뿐이지, 변경시키지는 않기 때문이다.

const push = (arr, ...args) => [...arr, ...args];
const pop = (arr, cnt = 1) => arr.filter((_, i) => i < arr.length - cnt);

const shift = (arr, cnt = 1) => arr.filter((_, i) => i >= cnt);
const unshift = (arr, ...args) => [...args, ...arr];

const arr = [1, 2, 3, 4];
console.log(push(arr, 5, 6)); // [1, 2, 3, 4, 5, 6]
console.log(pop(arr)); // [1, 2, 3]
console.log(pop(arr, 2)); // 2개 팝! ⇒ [1, 2]
console.log(unshift(arr, 0)); // [0, 1, 2, 3, 4]
console.log(unshift(arr, 7, 8)); // [7, 8, 1, 2, 3, 4]
console.log(shift(arr)); // [2, 3, 4]
console.log(shift(arr, 2)); // [3, 4]
console.log(arr); // [1, 2, 3, 4]