Array.prototype.with를 사용한 변경 불가능한 배열 업데이트

브라우저에는 최근 배열에 대해 호출할 수 있는 새로운 상호 운용 가능한 메서드가 생겼습니다. Array.prototype.with()

브라우저 지원

  • Chrome: 110 <ph type="x-smartling-placeholder">
  • Edge: 110. <ph type="x-smartling-placeholder">
  • Firefox: 115 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

소스

이 도움말에서는 이 메서드의 작동 방식과 이를 사용하여 배열을 업데이트하는 방법을 설명합니다. 할 수 있습니다.

Array.prototype.with(index, value) 소개

Array.prototype.with(index, value) 메서드는 배열의 사본을 반환합니다. 개발자가 제공하는 새 value로 설정된 index를 사용하여 호출됩니다.

다음 예는 연령 배열을 보여줍니다. 다음 항목의 새 사본을 생성하시겠습니까? 두 번째 나이를 15에서 16으로 변경하면서 배열의 값을 설정합니다.

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

코드 분류: ages.with(...)ages 변수의 사본을 반환합니다. 할 수 있습니다. ages.with(1, …)가 두 번째 항목을 대체합니다. (index = 1). ages.with(1, 16)는 두 번째 항목을 16에 할당합니다.

지금까지 수정된 배열의 새 복사본을 만들 수 있었습니다.

이는 원래 배열을 그대로 유지하려 할 때 매우 유용합니다. 이 도움말에서는 이를 위한 몇 가지 사용 사례를 다룹니다. 하지만 지금은 괄호 표기법을 사용했다면 어떻게 되었을지 살펴봅시다.

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

보시다시피 이 예에서는 ages 변수도 수정되었습니다. 이는 ages = newAges를 할당할 때 JavaScript가 배열을 복사하지 않고 다른 배열에 대한 참조를 만듭니다. 따라서 한 항목의 변경사항은 둘 다 동일한 배열을 가리키므로 다른 하나에 영향을 미칩니다.

배열.prototype.with() 및 불변성

불변성은 많은 프런트엔드 라이브러리와 프레임워크의 핵심입니다. 예를 들어 일부: React (및 redux), Vue

또한 다른 라이브러리와 프레임워크에서는 불변성을 요구하지 않지만 더 나은 성능을 위해 Angular 및 Lit를 권장합니다

따라서 개발자는 종종 배열의 사본을 반환하는 다른 메서드를 사용해야 했습니다. 코드 가독성이 저하되었습니다.

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

다음은 React에서 .with()를 조합하여 사용하는 방법에 관한 Codepen의 예입니다. useState를 사용하여 항목 배열을 불변으로 업데이트합니다.

<ph type="x-smartling-placeholder">

.with() 메서드는 배열의 사본을 반환하므로 여러 배열을 연결할 수 있습니다. .with() 호출 또는 다른 배열 메서드도 호출할 수 있습니다. 다음 예는 다음과 같이 배열에서 두 번째와 세 번째 나이를 증분합니다.

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

기타 새 불변 메서드

최근 상호 운용 가능한 세 가지 방법,

MDN에 따르면 이 세 가지 방법은 상응 대상입니다. 이러한 메서드는 불변성이 예상되는 경우에도 사용할 수 있습니다. 선호합니다.

결론적으로, 변경 불가능한 업데이트는 Kubernetes에서 보다 쉽게 JavaScript를 사용할 수 있습니다. 구체적으로 설명하자면 다음과 같습니다. .with() 메서드를 사용하면 배열의 단일 요소를 더 쉽게 업데이트할 수 있습니다. 할 수 있습니다.