JavaScript에서 객체 배열 업데이트하기: 조건에 따라 교체하거나 추가하는 방법

JavaScript 객체 배열 업데이트 개요

JavaScript에서 이미 생성된 객체 배열에 새로운 객체를 추가하거나 기존 객체를 교체해야 하는 경우가 자주 있습니다. 이번 글에서는 for 루프를 활용해 특정 조건에 일치하는 객체가 있으면 해당 객체를 교체하고, 일치하는 객체가 없으면 배열 끝에 새 객체를 추가하는 방법을 알아보겠습니다.

예제 데이터 준비

먼저 다음과 같은 학생 정보 객체 배열이 있다고 가정해 보겠습니다.

var studentDetails = [
    { firstName: "John", listOfSubject: ['MySQL', 'MongoDB']},
    { firstName: "David", listOfSubject: ['Java', 'C']}
];

여기에 아래와 같은 새로운 객체를 추가하고 싶습니다.

{ firstName: "Bob", listOfSubject: ['JavaScript'] };

전체 예제 코드

아래 코드는 forLoopExample() 함수를 정의하여, 과목 목록(listOfSubject)이 동일한 객체가 배열에 존재하면 그 객체를 새 객체로 교체하고, 존재하지 않으면 push() 메서드로 배열 마지막에 추가합니다.

var studentDetails = [
    { firstName: "John", listOfSubject: ['MySQL', 'MongoDB']},
    { firstName: "David", listOfSubject: ['Java', 'C']}
];

var updateThisObject = { firstName: "Bob", listOfSubject: ['JavaScript'] };

function forLoopExample(studentObjects, updateObj) {
    for (var index = 0; index < studentObjects.length; index++) {
        if (updateObj.listOfSubject.join("") ===
            studentObjects[index].listOfSubject.join("")) {
            studentObjects[index] = updateObj;
            return;
        }
    }
    studentObjects.push(updateObj);
}

forLoopExample(studentDetails, updateThisObject);
console.log(studentDetails);

코드 실행 방법

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

node 파일이름.js

예를 들어 파일 이름이 demo100.js라면 아래와 같이 실행합니다.

node demo100.js

실행 결과

위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.

PS C:\Users\Amit\JavaScript-code> node demo100.js
[
    { firstName: 'John', listOfSubject: [ 'MySQL', 'MongoDB' ] },
    { firstName: 'David', listOfSubject: [ 'Java', 'C' ] },
    { firstName: 'Bob', listOfSubject: [ 'JavaScript' ] }
]

동작 원리 정리

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

1. 중복 검사: join("") 메서드로 각 객체의 과목 배열을 하나의 문자열로 변환한 뒤 비교합니다. 이렇게 하면 배열 내용이 완전히 같은지 손쉽게 확인할 수 있습니다.

2. 객체 교체: 조건이 일치하는 객체를 발견하면 해당 인덱스의 요소를 새 객체로 덮어쓰고 return으로 함수를 종료합니다.

3. 새 객체 추가: 루프가 끝날 때까지 일치하는 객체가 없다면 push()를 호출해 새 객체를 배열 끝에 추가합니다.

이 패턴은 배열 안에서 특정 조건의 데이터를 찾아 수정하거나, 없는 경우에만 삽입하는 upsert(업데이트 또는 삽입) 작업에 널리 활용됩니다. 실무에서는 findIndex(), some() 같은 배열 메서드를 사용해 더 간결하게 구현할 수도 있습니다.