Mutable(가변) 방식
shift
배열의 첫번째 요소를 삭제시키고 삭제된 요소를 반환한다
const foods = ['🌭','🍗','🍕','🍟'];
const firstFood = foods.shift();
console.log(lastFood); // 🌭
console.log(foods); // ['🍗','🍕','🍟']pop
배열의 마지막 요소를 삭제 시키고 삭제된 요소를 반환한다
const foods = ['🌭','🍗','🍕','🍟'];
const lastFood = foods.shift();
console.log(lastFood) // 🍟
console.log(foods); // ['🌭','🍗','🍕']splice
splice(시작 인덱스, 삭제 시킬 요소의 개수 [,요소1, 요소2, 요소N])
```
특정 인덱스에 요소를 추가시킬때도 사용했었지만 삭제하는 것도 가능하다.
배열에 요소를 추가해줄때는 삭제시킬 요소의 개수를 0 그리고 추가시킬 요소들을 순서대로 전달해줬지만
삭제를 하기 위해선 시작 인덱스와 삭제 시킬 요소의 개수만 전달해주면 된다. 반환 값은 삭제된 요소를 배열 형태로 반환한다.
```
const foods = ['🌭','🍗','🍕','🍟'];
const extractedFood = foods.splice(2, 1); // 인덱스는 0 부터 시작함으로 3 - 1 = 2 인덱스에있는 피자 요소 삭제
console.log(extractedFood) // ['🍕']
console.log(foods); // ['🌭','🍗','🍟']delete
해당 키워드로 요소를 삭제시킬순 있지만 배열의 length가 업데이트되지 않고 빈 공간이 생기므로(희소 배열) 추천되는 방법은 아니다.
다시 인덱스 2 (피자)를 삭제 시켜보자.
```
const foods = ['🌭','🍗','🍕','🍟'];
delete foods[2];
console.log(foods) // ['🌭','🍗',undefined,'🍟']
console.log(foods.length) // 4
크롬 콘솔에서는 undefined라고 나오지만 정확하게 말하면 해당 위치의 값은 비어있다. 따라서 forEach, map, reduce 등 배열을 순회하는 함수를 사용하면 해당 인덱스에서는 콜백 함수를 실행하지 않는다.
foods.forEach(food => console.log('음식 있음)); // foods의 length는 4이지만 음식 있음 3번만 콘솔에 찍힌다
권장하진 않지만 만약 undefined라는 값을 굳이 넣어야겠다면 delete 가 아닌 undefined로 지정을 해주라고 mdn 문서에서 안내하고 있다.
foods[2] = undefined;
```
희소 배열을 만들지 않으면서 특정 요소를 삭제하기 위해선 해당 방법이 아닌 splice 메서드를 사용하길 바란다.
Immutable(불변) 방식
slice
slice([시작 인데스, [,끝 인덱스]])기존 배열에서 일부분을 잘라서 얕은 복사본 배열을 생성할 수 있다.
splice와 크게 다른 점은 기존 배열을 변경하지 않는다는 점 그리고 해당 방법으로 요소를 추가할 수는 없다는 점이다.
반환 값은 잘라낸 요소들을 배열 형태로 반환한다.
전달받은 시작 인덱스에서 시작해 끝 인덱스 - 1까지의 요소들의 복사본을 반환한다.
끝 인덱스를 지정해주지 않으면 시작 인덱스 이후 모든 요소들을 포함하여 반환한다.
위 예제와 마찬가지로 2번째 인덱스에 있는 피자만 삭제를 한다면 아래와 같이 사용할 수 있다.
```
const foods = ['🌭','🍗','🍕','🍟'];
const slicedFood = foods.slice(2, 3)
console.log(slicedFood); ['🍕']; // 잘라낸 배열 반환
console.log(foods); // ['🌭','🍗','🍕','🍟']; // 기존 배열는 변화가없음
```
filter
filter((요소값 [,인덱스, 순회하는 대상 배열]) => { /* ... */ } )특정 조건에 부합하는 요소를 삭제시키기 위해 많이 사용되는 메서드로
콜백 함수에서 true가 반환되는 요소로 새로운 배열을 생성한다.
이를 응용해서 피자만 삭제된 배열을 새로 만들고 싶다면 아래와 같이 사용하면 된다.
```
const foods = ['🌭','🍗','🍕','🍟'];
const filteredFood = foods.filter(food => food !== '🍕'); // 순회중인 요소가 피자가 아닐경우 true로 평가되므로 피자를 제외한 모든 요소들은 남고 피자는 false로 평과 되기때문에 새로운 배열에 복사되지않는다
console.log(filteredFood); // ['🌭','🍗','🍟'];
console.log(foods) // ['🌭','🍗','🍕','🍟'] - 기존 배열 유지
