Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- debound
- 자바스크립트로 하는 자료 구조와 알고리즘
- 리액트 dragdrap
- 코어자바스트립트
- 프로미스
- 리액트 고차컴포넌트
- 자바스크립트 reduce 함수 직접 만들어보기
- next seo
- 순수함수
- 넥스트 검색엔진최적화
- 자바스크립트로 달력만들기
- 리액트 이미지 미리보기
- react 배열 재정렬하기
- 노드교과서
- 올리브영 발색비교 기능구현하기
- 러닝리액트
- JavaScript
- search input
- react-beautiful-dnd
- range 함수 직접 만들기
- 리엑트 검색 기능 구현하기
- compose 함수
- 유저접근제한
- 검색 자동완성
- 프로미스 직접 구현하기
- 자바스크립트
- react search input
- 초집합
- 자바스크립트 검색 구현하기
- new Promise()
Archives
- Today
- Total
미주알고주알
[Javascript] push, pop, shift, unshift 배열 메소드 - 순수 함수로 만들어보기 본문
배열의 메소드를 사용하는 일이 많은데,
다음의 네 메소드는 순수함수라기 보다.. 배열의 값 자체를 바꿔버리는 함수들이기 때문에 함수 실행의 시기 및 횟수에 따라 변경된 배열을 참조하게 된다.
이런 점에서 빈번하게 사용되는 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]
'Javascript' 카테고리의 다른 글
[Javascript] (Array, Object) DeepCopy 구현하기 (0) | 2023.03.29 |
---|---|
[Javascript] splice 메소드 - 순수 함수로 만들어보기 (0) | 2023.03.29 |
[Javascript] 배열 뒤집기 (0) | 2023.03.29 |
[React.js] 리액트로 검색 filter 및 highlight 기능 구현하기(+ debounce, throttle) (0) | 2023.03.28 |
[Javascript] reduce 함수 직접 만들어보기 (0) | 2023.03.24 |