[Javascript] 배열 요소 찾아서 제거 / includes, indexOf, lastIndexOf 기능

배열에서 원하는 요소를 찾아 삭제해야 하는 경우가 있다. 우선 배열에서 특정 요소를 찾는 방법을 알아보고 그 요소만 골라서 삭제하는 방법에 대해 알아보자. splice 기능에 대해 아직 모른다면 먼저 아래 페이지를 참고하여 공부하고 오길 바란다.

 

 

 

 

[Javascript] splice 기능 - 배열에서 원하는 요소 제거, 추가

 

 

 

목차

1. includes
2. indexOf, lastIndexOf
3. 배열에서 원하는 요소를 찾아 제거하는 방법

 

 

 

 

 

1. includes

includes는 특정 요소가 배열 안에 있는지 없는지 true와 false로 알려주는 기능이다. 배열 내에 요소가 있다면 true, 없다면 false가 된다.

 

const array = ['a', 'b', 'c', 'd'];
const item1 = array.includes('a');
const item2 = array.includes('z');

console.log(item1); 
// true

console.log(item2);
// false

 

 

 

 

2. indexOf, lastIndexOf

배열에서 찾는 특정 요소의 인덱스를 알려주는 기능도 있다. indexOf는 앞에서부터 해당 요소를 찾고, lastIndexOf는 뒤에서부터 해당 요소를 찾는다. 존재하지 않는 요소의 인덱스는 -1로 나타낸다.

 

const array = ['a', 'b', 'c', 'a', 'd'];
const idx1 = array.indexOf('a');
const idx2 = array.lastIndexOf('a');
const idx3 = array.includes('z');

console.log(idx1); 
// 0

console.log(idx2);
// 3 (뒤에서부터 a를 찾을 때, 인덱스 값이 3인 a를 먼저 찾게 된다.)

console.log(idx3);
// -1

 

 

 

 

3. 배열에서 원하는 요소를 찾아 제거하는 방법

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

 

 

while 문 사용

while 문을 사용하면 해당 요소가 존재하는지 아닌지 여부부터 파악하고 존재할 시에만 반복문이 돌아간다.

 

const array = ['a', 'b', 'c', 'd', 'c'];
let idx = array.indexOf('c');

while (idx > -1) { //c가 존재할 때에만 반복문이 돌아감
	array.splice(idx, 1);
	idx = array.indexOf('c'); //c의 인덱스 값 새로 담기
}

console.log(array);
// ["a", "b", "d"]

 

 

 

for 문 사용

for 문을 사용한 코드를 살펴보면, 배열의 첫 번째 요소부터 탐색하여 특정 요소의 인덱스 값과 일치할 경우 삭제하는 방식이다. 이 경우 반복문이 배열의 요소만큼 돌아가기 때문에 요소의 개수가 많으면 코드가 무거워진다.

 

const array = ['a', 'b', 'c', 'd', 'c'];
let idx = array.indexOf('c');

for (i = 0; i < array.length; i++) {
	if (i == idx) {
		array.splice(idx, 1);
		idx = array.indexOf('c');
	}
}

console.log(array);
// ["a", "b", "d"]

 

 

결과적으로 while 문과 for 문 두 가지 반복문 모두 사용해도 되지만, for문은 코드가 더 길어지고 전체 요소를 처음부터 살펴보기 때문에 코드가 더 무거워질 수 있다. while 문을 사용하면 반복문이 돌아가기 전에 배열에 해당 요소가 있는지 없는지 확인부터 한다. 해당 요소가 없다면 반복문이 애초에 시작하지 않기 때문에 코드가 더 간결해진다. 특정 요소가 배열 내에 두 개가 있다면 두 번만 탐색하는 것이다. 따라서 while 문을 사용하는 것이 더 바람직하다.

 

 

while 문

 

 

for 문