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

Jad Joubran

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

Browser Support

  • Chrome: 110.
  • Edge: 110.
  • Firefox: 115.
  • Safari: 16.

Source

이 도움말에서는 이 메서드의 작동 방식과 이를 사용하여 원본 배열을 변경하지 않고 배열을 업데이트하는 방법을 살펴봅니다.

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

Array.prototype.with(index, value) 메서드는 호출된 배열의 복사본을 반환하며, index은 제공된 새 value로 설정됩니다.

다음 예는 연령 배열을 보여줍니다. 두 번째 연령을 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가 배열을 복사하는 것이 아니라 다른 배열에 대한 참조를 만들기 때문입니다. 따라서 둘 다 동일한 배열을 가리키므로 한쪽의 변경사항은 다른 쪽에도 영향을 미칩니다.

Array.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)

다음은 useState와 함께 React에서 .with()를 사용하여 항목 배열을 불변으로 업데이트하는 방법을 보여주는 Codepen 예시입니다.

.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에 따르면 대응 항목의 복사 버전입니다. 이러한 메서드는 불변성이 예상되거나 선호되는 경우에도 사용할 수 있습니다.

결론적으로 이 도움말에 제시된 네 가지 방법 중 하나를 사용하면 JavaScript에서 불변 업데이트를 더 쉽게 달성할 수 있습니다. 특히 .with() 메서드를 사용하면 원래 배열을 변경하지 않고 배열의 단일 요소를 더 쉽게 업데이트할 수 있습니다.