JavaScript 배열의 객체 업데이트

1. JavaScript에서 map()을 사용하여 객체 업데이트
2. JavaScript에서 findIndex()를 사용하여 객체 업데이트

배열은 단일 변수에 임의의 양의 데이터를 포함할 수 있는 고정 숫자 키와 동적 값이 있는 JavaScript의 개체입니다. 배열은 1차원 또는 다차원일 수 있습니다. JavaScript 배열은 값을 직접 저장하거나 JavaScript 객체를 저장할 수 있습니다. 다른 언어와 달리 JS 배열은 동일한 배열의 다른 인덱스에 다른 데이터 유형을 포함할 수 있습니다.

오늘 포스팅에서는 자바스크립트에서 배열의 객체를 업데이트하는 방법을 알아보겠습니다.

JavaScript는 map() 및 findIndex()를 사용하여 객체를 업데이트하는 두 가지 방법을 제공합니다.

JavaScript에서 map()을 사용하여 객체 업데이트

JavaScript에서 제공하는 이 내장 배열 메서드는 원래 배열을 반복하고 새 배열을 만들어 지정된 조건에 따라 요소를 완성합니다. 화살표 함수 대신 콜백 함수를 전달할 수도 있습니다. map()과 forEach()의 유일한 차이점은 map()은 새 배열을 생성하고 forEach()는 원래 배열을 변경한다는 것입니다.

JavaScript의 map() 구문

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

매개변수

$updateCondition: 이 필수 매개변수는 각 요소에 대해 수행해야 하는 작업을 지정합니다.

$callbackFn: 호출될 배열의 각 요소에 대한 함수를 지정하는 필수 매개변수입니다. 함수가 호출될 때마다 결과를 새 배열로 반환합니다.

반환 값

요소가 콜백 함수의 결과인 새 배열을 반환합니다.

예제 코드:

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

const updatedOSArray =
    osArray.map(p => p.id === 1 ? {...p, name: 'Ubuntu'} : p);

console.log('After update: ', updatedOSArray);

출력:

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

JavaScript에서 findIndex()를 사용하여 객체 업데이트

이 내장 배열 메서드는 값이 지정된 조건과 일치하는 요소의 인덱스를 찾는 JavaScript에서 제공합니다. 화살표 함수 대신 콜백 함수를 전달할 수도 있습니다. 두 메서드 findIndex() 및 indexOf() 사이에는 한 가지 차이점이 있습니다. findIndex()는 복잡한 일치 조건 또는 객체 데이터 유형에 사용되는 반면 indexOf()는 단순한 조건 또는 기본 데이터 유형에 사용됩니다.

JavaScript의 findIndex() 구문

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

매개변수

$condition: 필수 매개변수입니다. 사용자는 배열 요소와 관련된 모든 조건을 전달하고 조건을 충족하는 첫 번째 일치 요소를 찾을 수 있습니다.

반환 값

지정된 조건을 충족하는 숫자 인덱스를 반환합니다. 지정된 조건을 충족하는 요소가 없으면 -1이 반환됩니다.

예제 코드:

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log('Before update: ', osArray[elementIndex]);
osArray[elementIndex].name = 'Ubuntu';
console.log('After update: ', osArray[elementIndex]);

출력:

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}