[JavaScript] with 사용법 Array.prototype.with()

 

2023년 7월에 추가된 메서드로

배열의 특정 인덱스의 값을 변경한 새로운 배열을 반환.
원본 배열은 변경되지 않는다.

 

 

1. 구문

 arrayInstance.with(index, value) 
 // index: 변경하려는 요소의 인덱스
 // value: 새로 할당할 값

 

 

2. 반환값 

 

지정된 인덱스의 요소가 새 값으로 대체된 새로운 배열

 

3. 예시

   const arr = [1, 2, 3, 4, 5];
   console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
   console.log(arr); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

 

4. 특징

 

• 음수 인덱스 사용 가능 (배열 끝에서부터 계산)
• 희소 배열(sparse array)에 사용하면 빈 슬롯을 undefined로 채움
  • 배열의 일관성을 유지하고 예측 가능한 동작을 보장하여 예기치 않은 버그를 방지할 수 있다.

   const sparseArray = [1, , , 4, 5]; // 배열안에 빈 값이 있는 배열이 희소배열
   const newArray = sparseArray.with(2, 3);
   
   console.log(sparseArray); // [1, empty × 2, 4, 5]
   console.log(newArray);    // [1, undefined, 3, 4, 5]

• 메서드 체이닝에 유용함
  • 새로운 배열을 만들어 반환하므로 기존에 있던 map , filter, reduce 함수들과 함께 쓰기 편하다

const 초기배열 = [1, 2, 3, 4, 5];

const 결과 = 초기배열
  .with(1, 10)       // 인덱스 1의 값을 10으로 변경
  .with(3, 20)       // 인덱스 3의 값을 20으로 변경
  .map(x => x * 2)   // 모든 요소를 2배로
  .filter(x => x > 20) // 20보다 큰 값만 필터링
  .reduce((acc, cur) => acc + cur, 0); // 합계 계산

console.log(결과); // 80
console.log(초기배열); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

 

 

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with