문제 상황
다음과 같은 객체 배열이 있다고 가정해 보겠습니다.
const arr = [
{"goods":"Wheat", "from":"GHANA", "to":"AUSTRALIA"},
{"goods":"Wheat", "from":"USA", "to":"INDIA"},
{"goods":"Wheat", "from":"SINGAPORE", "to":"MALAYSIA"},
{"goods":"Wheat", "from":"USA", "to":"INDIA"},
];여기서 우리는 이러한 배열을 인자로 받는 JavaScript 함수를 작성해야 합니다. 이 함수의 목표는 원본 배열 중에서 'from' 속성의 값이 'USA'이고 'to' 속성의 값이 'INDIA'인 모든 객체를 찾아 그 개수를 반환하는 것입니다.
즉, 두 개 이상의 조건을 동시에 만족하는 요소만 골라내야 하는데, 이럴 때 배열 메서드인 filter()를 활용하면 간단하고 직관적으로 해결할 수 있습니다.
예제 코드
아래 코드는 'from'과 'to' 두 조건을 동시에 검사하여 조건에 맞는 객체의 개수를 반환하는 함수입니다. 매개변수에 기본값을 설정해 두었기 때문에, 인자를 생략하면 자동으로 'USA'와 'INDIA'가 적용됩니다.
const arr = [
{"goods":"Wheat", "from":"GHANA", "to":"AUSTRALIA"},
{"goods":"Wheat", "from":"USA", "to":"INDIA"},
{"goods":"Wheat", "from":"SINGAPORE", "to":"MALAYSIA"},
{"goods":"Wheat", "from":"USA", "to":"INDIA"},
];
const findDesiredLength = (arr = [], from = 'USA', to = 'INDIA') => {
// from과 to 조건을 모두 만족하는 요소만 필터링
const filtered = arr.filter(el => {
if (el.from === from && el.to === to) {
return true;
}
});
// 필터링된 배열의 길이(개수) 추출
const { length: l } = filtered || [];
return l;
};
console.log(findDesiredLength(arr));코드 설명
함수의 동작 방식을 단계별로 살펴보면 다음과 같습니다.
1. filter()로 조건에 맞는 요소 걸러내기filter() 메서드는 콜백 함수가 true를 반환하는 요소들만 모아 새로운 배열을 생성합니다. 여기서는 el.from === from과 el.to === to 두 조건을 AND 연산자(&&)로 결합해, 두 값이 모두 일치하는 객체만 통과시킵니다.
2. 구조 분해 할당으로 개수 추출하기const { length: l } = filtered || []; 코드는 객체 구조 분해를 사용해 필터링된 배열의 length 속성을 변수 l에 담습니다. filtered가 존재하지 않을 경우를 대비해 빈 배열 []을 기본값으로 두어 안전성을 높였습니다.
출력 결과
위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.
2
전체 4개의 객체 중 'from'이 'USA'이면서 'to'가 'INDIA'인 객체는 2번째와 4번째 요소로 총 2개이므로, 정확히 2가 반환되는 것을 확인할 수 있습니다.
더 간결하게 작성하는 방법
조금 더 현대적인 문법을 활용하면 아래와 같이 한 줄로 압축할 수도 있습니다.
const findDesiredLength = (arr, from = 'USA', to = 'INDIA') => arr.filter(el => el.from === from && el.to === to).length;
필터링된 배열을 변수에 담지 않고 바로 .length에 접근하므로 코드가 훨씬 짧아지고 가독성도 좋아집니다. 상황에 맞게 선택해서 사용하시면 됩니다.