[TIL] JS 기본편 - 배열 요소 제거하기(feat. indexOf, splice)

indexOf 메소드를 사용하여 원하는 요소의 인덱스 값을 알아내고, 반복문을 돌리면서 splice 메소드로 해당 자리의 요소를 제거하면 된다.

---

indexOf()

indexOf() 메서드는 값을 기반으로 요소를 제거할 때 배열 내부에서 특정 값의 위치를 찾아준다. 하지만 배열 내부에 요소가 없을 때는 -1을 리턴한다.

const itemsB = ["오렌지", "사과", "딸기", "바나나"]
itemsB.indexOf("귤") //배열에 없으므로 -1 출력
itemsB.indexOf("딸기") //2

💡 문자열의 indexOf() 메소드

문자열에도 indexOf() 메소드가 있다. 이를 사용하면 문자열 내부에서 특정 문자열의 위치를 찾을 수 있다.

const string = "김수한무 거북이와 두루미 삼천갑자 동방삭 치치카포 사리사리센타"
string.indexOf("두루미"); //두루미의 앞 글자인 '두'의 위치가 10번째 인덱스에 있으므로 10을 출력한다.

---

splice()

splice() 메서드는 배열의 특정 인덱스에 있는 요소를 제거할 때 사용한다. splice는 '접합'이라는 뜻으로 일부를 제거한 뒤 붙일 수도 있고, 중간에 다른 요소를 넣고 붙일 수도 있다.

const fruits = ['수박', '바나나', '망고', '두리안'];
const removed = fruits.splice(2, 1);
console.log(fruits);
// ['수박', '바나나', '두리안'];
console.log(removed);
// ['망고'];

배열의 특정 위치에 요소 추가하기

💡 splice() 메소드는 배열의 특정 위치에 요소를 추가할 때도 사용하고, 배열의 요소를 제거할 때도 사용한다.
배열.splce(인덱스, 0, 요소)

const items = ["오렌지", "사과", "딸기", "바나나"]
items.splice(1, 0, "키위") //인덱스1번째에 키위를 넣겠다. 0은 아무것도 제거하지 않는다는 뜻이다.//(5) ['오렌지', '키위', '사과', '딸기', '바나나']

---

배열 내부에서 특정 값을 가진 요소 모두 제거하기

indexOf() 메소드와 splice() 메소드는 배열 내부 요소를 하나만 제거할 수 있다. 배열 내부에서 특정 값을 가진 요소를 모두 제거하고 싶을 때는 반복문이나 filter() 메소드를 사용해야 하는데, 일반적으로 filter() 메소드를 많이 사용한다.

const itemsA = ["오렌지", "키위", "사과", "딸기", "바나나"]
itemsA.filter((item) => item !== "키위")

//(4) ['오렌지', '사과', '딸기', '바나나']

---

마무리

알고리즘을 풀다보면 배열에 관련된 문제가 너무 많다.
배열에 뭘 담아서 찾거나 꺼내거나 지우거나 하는 게 많은데, 가장 많이 사용하는 메소드가 아닐까 싶어 정리해보았다. 화이링 🙋🏼‍♀️