문제 정의
다음과 같은 객체 배열과 이름 배열이 있다고 가정해 보겠습니다.
객체 배열
const main = [
{name: "Karan", age: 34},
{name: "Aayush", age: 24},
{name: "Ameesh", age: 23},
{name: "Joy", age: 33},
{name: "Siddarth", age: 43},
{name: "Nakul", age: 31},
{name: "Anmol", age: 21},
];이름 배열
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];
여기서 작성해야 할 함수는 두 개의 배열을 인자로 받아, 첫 번째 배열을 제자리(in-place)에서 필터링하여 name 속성 값이 두 번째 배열에 포함된 객체만 남기는 JavaScript 함수입니다.
구현 예제
이 기능을 구현한 코드는 다음과 같습니다.
const main = [
{name: "Karan", age: 34},
{name: "Aayush", age: 24},
{name: "Ameesh", age: 23},
{name: "Joy", age: 33},
{name: "Siddarth", age: 43},
{name: "Nakul", age: 31},
{name: "Anmol", age: 21},
];
const names = ["Karan", "Joy", "Siddarth", "Ameesh"];
const filterUnwanted = (main, names) => {
for(let i = 0; i < main.length; ){
if(names.includes(main[i].name)){
i++;
continue;
};
main.splice(i, 1);
};
};
filterUnwanted(main, names);
console.log(main);동작 원리
이 함수의 핵심 로직은 다음과 같이 정리할 수 있습니다.
- for 루프 순회: main 배열을 처음부터 끝까지 탐색하되, 인덱스 증가는 조건 판별 후 직접 제어합니다.
- includes()로 존재 여부 확인: 현재 객체의 name 속성이 names 배열에 포함되어 있으면 i++로 인덱스를 증가시키고 다음 요소로 넘어갑니다.
- splice()로 요소 제거: name이 names 배열에 없으면 splice(i, 1)로 해당 요소를 삭제합니다. 이때 인덱스를 증가시키지 않는 이유는, 요소가 제거되면서 뒤쪽 요소들이 한 칸씩 앞으로 당겨지기 때문입니다.
실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[
{ name: 'Karan', age: 34 },
{ name: 'Ameesh', age: 23 },
{ name: 'Joy', age: 33 },
{ name: 'Siddarth', age: 43 }
]대안: filter() 메서드 활용
원본 배열을 변경하지 않고 새로운 배열을 얻고 싶다면 filter() 메서드를 사용하는 것이 더 간결하고 안전합니다.
const filtered = main.filter(obj => names.includes(obj.name)); console.log(filtered);
filter()는 조건을 통과한 요소들만 모아 새 배열을 반환하므로, 원본 데이터를 보존해야 하는 경우에 특히 유용합니다. 반면 메모리 사용을 줄이며 기존 배열 자체를 수정해야 하는 상황이라면 앞서 소개한 splice 방식이 적합합니다.