JavaScript에서 배열과 객체 배열의 공통 항목에 속성 추가하는 방법

배열과 객체 배열의 공통 항목에 속성 추가하기

객체 배열에 새로운 속성을 추가하려면 map() 메서드를 활용하면 됩니다. map()은 배열의 각 요소를 순회하면서 콜백 함수를 실행하고, 그 결과로 새로운 배열을 반환하기 때문에 기존 데이터를 유지하면서 속성을 추가하는 작업에 매우 적합합니다.

먼저 예제에 사용할 배열을 살펴보겠습니다.

1. 이름 배열

const firstname = ['John', 'David', 'Bob'];

2. 객체 배열 (학생 정보)

const studentDetails = [
    {
        firstname: 'Carol',
        marks: 78
    },
    {
        firstname: 'Mike',
        marks: 89
    },
    {
        firstname: 'Bob',
        marks: 86
    }
];

이 예제의 목표는 두 배열을 비교하여, 학생 정보 객체 중 이름이 firstname 배열에도 존재하는 경우 isPresent라는 새로운 속성을 추가하는 것입니다.

전체 코드 예제

다음은 실제 동작하는 전체 코드입니다.

const firstname = ['John', 'David', 'Bob'];

const studentDetails = [
    {
        firstname: 'Carol',
        marks: 78
    },
    {
        firstname: 'Mike',
        marks: 89
    },
    {
        firstname: 'Bob',
        marks: 86
    }
];

// 조회 성능을 높이기 위해 Set으로 변환
const data = new Set(firstname);

const result = studentDetails.map(tmpObject => {
    if (data.has(tmpObject.firstname)) {
        tmpObject.isPresent = "This is present";
    } else {
        tmpObject.isPresent = "This is not present";
    }
    return tmpObject;
});

console.log(result);

코드 설명

이 코드의 핵심 로직은 다음과 같습니다.

1. Set 생성: new Set(firstname)을 사용해 이름 배열을 Set 객체로 변환합니다. Set의 has() 메서드는 평균적으로 O(1)의 시간 복잡도를 가지므로, 단순 배열의 includes()보다 대량의 데이터를 처리할 때 훨씬 효율적입니다.

2. map() 순회: studentDetails 배열의 각 객체를 순회하면서, 해당 객체의 firstname이 Set에 존재하는지 확인합니다.

3. 조건부 속성 추가: 존재하면 isPresent: "This is present"를, 존재하지 않으면 isPresent: "This is not present"를 객체에 추가한 후 반환합니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

여기서는 파일 이름을 demo219.js로 저장했다고 가정합니다.

node demo219.js

실행 결과

프로그램 실행 결과는 다음과 같습니다.

PS C:\Users\Amit\JavaScript-code> node demo219.js
[
    { firstname: 'Carol', marks: 78, isPresent: 'This is not present' },
    { firstname: 'Mike', marks: 89, isPresent: 'This is not present' },
    { firstname: 'Bob', marks: 86, isPresent: 'This is present' }
]

출력 결과를 보면, 세 명의 학생 중 'Bob'만 firstname 배열에 존재하기 때문에 Bob의 객체에만 isPresent: 'This is present'가 추가된 것을 확인할 수 있습니다. Carol과 Mike는 해당 배열에 없으므로 'This is not present' 값이 할당되었습니다.

마무리 정리

이처럼 map()과 Set을 조합하면 객체 배열에 조건에 따른 새로운 속성을 간단하고 효율적으로 추가할 수 있습니다. 원본 배열을 변경하지 않고 새로운 배열을 반환한다는 점에서, 불변성(immutability)을 지향하는 현대 JavaScript 개발 방식과도 잘 어울립니다.