[JS함수] splice / filter
splice
배열에서 삭제된 요소들을 다시 새 배열로 반환한다
배열을 직접 변경하는 메소드
요소를 삭제, 추가, 교체 가능하다
return 값은 "삭제된 요소들"을 담은 새 배열
사용법: [ ]<필수아님
arr.splice(start,[deleteCount?],[...items])
- start : 변경을 시작할 인덱스, 음수면 뒤에서부터 계산한다(-1이 마지막)
- deleteCount : 삭제할 개수, 생략 시 start부터 끝까지 삭제, 0이면 삭제없이 삽입만 한다
- ...items : start 위치에 삽입할 요소들 // , 뒤로 계속 삽입한다
return값 => 삭제된 요소들의 배열 (없다면 빈 배열[ ] 리턴)
예)
- 삭제
- const arr = [1, 2, 3, 4];
- const removed = arr.splice(1, 2);
- 결과: arr = [1, 4], removed = [2, 3]
- 삽입(삭제 없이)
- const arr = [1, 4];
- arr.splice(1, 0, 2, 3); // ,뒤로 삽입할 요소들
- 결과: arr = [1, 2, 3, 4]
- 교체(삭제 + 삽입)
- const arr = ['a', 'b', 'c', 'd'];
- arr.splice(1, 2, 'x', 'y');
- 결과: arr = ['a', 'x', 'y', 'd'],
- 삭제된 요소: ['b', 'c']
- 음수 인덱스
- const arr = [10, 20, 30, 40]; //-2는 [-4,-3,-2,-1]
- arr.splice(-2, 1);
- 결과: arr = [10, 20, 40]
- const arr = [10, 20, 30, 40];
- const arrr = arr.splice(-2);
- 결과 arrr = [30, 40]
- const arr = [10, 20, 30, 40];
- const arrr = arr.splice(-3);
- 결과 arrr = [20, 30, 40]
- 끝부터 모두 삭제(배열 비우기)
- arr.splice(0); // 배열을 통째로 비움
- 마지막 요소 제거
- arr.splice(-1); // pop()과 유사하지만 반환은 배열 형태([마지막요소])
slice와의 차이
splice: 원본 배열을 “변경”합니다. 삭제/삽입/교체 가능.
slice(start, end): “새 배열”을 반환하며 원본을 변경하지 않습니다. 잘라내기만.
filter
배열에서 콜백함수를 이용하여 "새 배열"을 반환한다
- 조건을 만족하는 요소(true값)만 뽑아 새 배열을 반환한다
- 원본 배열은 변경하지 않는다!
- 콜백이 true를 반환한 요소만 배열에 포함
사용법: [ ]<필수아님
arr.filter(callback(element,[index],[array]),[thisArg?])
- callback : 배열의 각 요소가 실행하는 함수(true/false반환)
- element : 현재 요소
- index : 현재 요소의 인덱스
- array : 호출된 원본배열
- thisArg : 콜백함수가 this로 사용할 값(arrow function 에서는 사용되지 않는다!)
true 요소가 하나도 없으면 빈 배열 [] 을 반환한다!
잘 이해가 안됐던 코드
const [todos,setTodos] = useState([]);
const onDelete = (index)=>{
setTodos = ((prev)=> prev.filter((_,i) = i !== index)
}
(prev) => ...
setTodos에 그냥 값을 넣는 대신 함수를 넣는 방식입니다.
이렇게 하면 React가 바로 직전의 최신 상태를 prev라는 이름의 변수에 담아서 전달해 줍니다.
여기서 prev는 현재 화면에 있는 todos 배열이라고 생각하시면 됩니다. 안전하게 상태를 업데이트하기 위한 공식 같은 것입니다.
(_, i) => i !== index
여기가 바로 '삭제'의 마법이 일어나는 부분입니다.
filter는 배열의 모든 요소를 하나씩 순회합니다. 예를 들어 배열에 3개의 할 일이 있다면, 이 함수는 3번 호출됩니다.
_: filter의 첫 번째 인자는 '요소 자체'입니다. _ (언더스코어)는 "이 값은 받긴 할 건데, 이번엔 사용하지 않을 거야"라는 개발자들 사이의 약속입니다.
i: filter의 두 번째 인자는 '현재 요소의 인덱스(위치 번호)'입니다.
index: 우리가 삭제하고 싶은 항목의 인덱스입니다. (예: 사용자가 두 번째 항목의 삭제 버튼을 눌렀다면 index는 1이 됩니다.)
i !== index: 이 조건의 의미는 다음과 같습니다.
"지금 보고 있는 항목의 인덱스(i)가 우리가 삭제하려는 인덱스(index)와 다른가요?"