JavaScript에서 특정 속성을 기준으로 배열의 객체 찾기 – find()와 map() 활용법

JavaScript에서 배열 안에서 특정 속성 값을 기준으로 데이터를 찾으려면 find() 메서드와 map() 메서드를 함께 사용하면 됩니다.

예를 들어 이름(FirstName), 학번(RollNo), 과목(Subject) 정보를 담고 있는 학생 레코드 배열이 두 개 있다고 가정해 보겠습니다. 첫 번째 배열의 각 요소에 대해 두 번째 배열에서 동일한 RollNo를 가진 객체를 찾아 교체하는 작업을 수행할 수 있습니다.

예제 코드

var firstObject = [
    { "FirstName": "David", "RollNo": "105", "Subject": "MongoDB" },
    { "FirstName": "Mike", "RollNo": "110", "Subject": "JavaScript" }
];
var secondObject = [
    { "FirstName": "Bob", "RollNo": "101", "Subject": "Java" },
    { "FirstName": "John", "RollNo": "110", "Subject": "MySQL" }
];
var output = firstObject.map(first => (secondObject.find(second => second.RollNo == first.RollNo) || first));
console.log(output);

프로그램 실행 방법

위 프로그램을 실행하려면 다음 명령어를 사용합니다.

node fileName.js

여기서는 파일 이름이 demo33.js라고 가정합니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo33.js
[
    { FirstName: 'David', RollNo: '105', Subject: 'MongoDB' },
    { FirstName: 'John', RollNo: '110', Subject: 'MySQL' }
]

코드 동작 원리

map()은 firstObject의 각 요소를 순회하면서 새로운 배열을 생성합니다. 순회 과정에서 콜백 함수 내부의 find()가 secondObject 배열에서 현재 요소와 동일한 RollNo 값을 가진 객체를 검색합니다.

만약 일치하는 객체가 없다면 ||(OR) 연산자 덕분에 원래 객체(first)가 그대로 반환됩니다. 반대로 일치하는 객체가 있으면 해당 객체로 대체됩니다. 위 예제에서는 RollNo가 110인 Mike가 secondObject의 John으로 교체되었고, RollNo가 105인 David는 일치하는 항목이 없어 그대로 유지된 것을 확인할 수 있습니다.