JavaScript 객체 배열에서 isActive가 true인 항목의 id 값만 추출하기

문제 정의

다음과 같이 여러 개의 객체를 요소로 가지는 배열이 있다고 가정해 보겠습니다.

const arr = [
  { id: '23', name: 'Item 1', isActive: true },
  { id: '25', name: 'Item 2', isActive: false },
  { id: '26', name: 'Item 3', isActive: false },
  { id: '30', name: 'Item 4', isActive: true },
  { id: '45', name: 'Item 5', isActive: true }
];

여기서 요구되는 것은 하나의 JavaScript 함수를 작성하여 위 배열을 전달받은 뒤, isActive 속성 값이 true인 객체들만 골라내어 해당 객체들의 id 속성 값을 새로운 배열로 반환하는 함수입니다.

예제 코드

for 반복문과 객체 구조 분해 할당(Destructuring)을 활용하면 다음과 같이 구현할 수 있습니다.

const arr = [
  { id: '23', name: 'Item 1', isActive: true },
  { id: '25', name: 'Item 2', isActive: false },
  { id: '26', name: 'Item 3', isActive: false },
  { id: '30', name: 'Item 4', isActive: true },
  { id: '45', name: 'Item 5', isActive: true }
];

const findActive = (arr = []) => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    const obj = arr[i];
    const { id, isActive } = obj;
    if (isActive) {
      res.push(id);
    }
  }
  return res;
};

console.log(findActive(arr));

출력 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

[ '23', '30', '45' ]

더 간결한 대안: filter()와 map() 활용

ES6 이상의 모던 JavaScript에서는 Array.prototype.filter()와 Array.prototype.map()을 조합하면 동일한 로직을 한 줄로 표현할 수 있어 코드가 훨씬 짧고 선언적입니다.

const findActive = (arr = []) =>
  arr.filter(item => item.isActive).map(item => item.id);

console.log(findActive(arr)); // [ '23', '30', '45' ]

두 방식 모두 결과는 완전히 동일하지만, filter와 map의 조합은 의도가 명확히 드러나 가독성 면에서 유리합니다. 반대로 데이터 양이 매우 방대하고 성능이 중요한 환경에서는 단 한 번의 순회로 처리되는 for 반복문 방식이 약간 더 효율적일 수 있습니다. 상황에 맞게 적절한 방법을 선택하시기 바랍니다.