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
- react 배열 재정렬하기
- search input
- 자바스크립트 reduce 함수 직접 만들어보기
- compose 함수
- 리액트 dragdrap
- 자바스크립트
- new Promise()
- 순수함수
- 넥스트 검색엔진최적화
- 러닝리액트
- 자바스크립트로 하는 자료 구조와 알고리즘
- range 함수 직접 만들기
- JavaScript
- next seo
- debound
- react-beautiful-dnd
- 초집합
- 노드교과서
- 리엑트 검색 기능 구현하기
- 프로미스 직접 구현하기
- 프로미스
- 코어자바스트립트
- 검색 자동완성
- 자바스크립트로 달력만들기
- 올리브영 발색비교 기능구현하기
- react search input
- 자바스크립트 검색 구현하기
- 리액트 이미지 미리보기
- 유저접근제한
- 리액트 고차컴포넌트
Archives
- Today
- Total
미주알고주알
[Javascript] splice 메소드 - 순수 함수로 만들어보기 본문
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);
'Javascript' 카테고리의 다른 글
[Javascript] Stack, Queue, ArrayList 클래스 만들어보기 (0) | 2023.03.29 |
---|---|
[Javascript] (Array, Object) DeepCopy 구현하기 (0) | 2023.03.29 |
[Javascript] push, pop, shift, unshift 배열 메소드 - 순수 함수로 만들어보기 (0) | 2023.03.29 |
[Javascript] 배열 뒤집기 (0) | 2023.03.29 |
[React.js] 리액트로 검색 filter 및 highlight 기능 구현하기(+ debounce, throttle) (0) | 2023.03.28 |