브라우저에는 최근 배열에서 호출할 수 있는 상호 운용 가능한 새로운 메서드인 Array.prototype.with()가 도입되었습니다.
이 문서에서는 이 메서드의 작동 방식과 이 메서드를 사용하여 원래 배열을 변형하지 않고 배열을 업데이트하는 방법을 설명합니다.
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)
다음은 Codepen의 예에서 .with()를 useState와 함께 React에서 사용하여 항목 배열을 불변적으로 업데이트하는 방법을 보여줍니다.
.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)
변경 불가능한 다른 새 메서드
최근에는 다른 세 가지 메서드도 상호 운용이 가능하게 되었습니다.
Array.prototype.toReversed(): 원래 배열을 변형하지 않고 배열을 반전시킵니다.Array.prototype.toSorted(): 원래 배열을 변형하지 않고 배열을 정렬합니다.Array.prototype.toSpliced():.splice()와 유사하지만 원래 배열을 변형하지 않습니다.
MDN에 따르면 이 세 가지 메서드는 메서드가 다른 메서드의 복사 버전입니다. 이러한 메서드는 불변성이 예상되거나 선호하는 경우에 사용할 수도 있습니다.
결론적으로 이 도움말에 제시된 네 가지 방법 중 하나를 사용하면 JavaScript에서 변경 불가능한 업데이트를 더 쉽게 실행할 수 있습니다. 특히 .with() 메서드를 사용하면 원래 배열을 변형하지 않고 배열의 단일 요소를 더 쉽게 업데이트할 수 있습니다.