Array.prototype.with()

Baseline2023

Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Array 인스턴스의with() 메서드는 주어진 인덱스의 값을 변경하기 위해대괄호 표기법을 사용하는 것의복사 버전입니다. 이 함수는 지정된 인덱스의 요소가 지정된 값으로 대체된 새 배열을 반환합니다.

구문

array.with(index, value)

매개변수

index

배열을 변경할 0 기반 인덱스이며정수로 변환되는 값입니다.

음수 인덱스는 배열의 끝부터 역산합니다 —-array.length <= index < 0인 경우index + array.length가 사용됩니다.
정규화 후 인덱스가 범위를 벗어나면,RangeError가 발생합니다.

value

주어진 인덱스에 할당할 값입니다.

예외

RangeError: index > array.length 혹은index < -array.length 일때 발생합니다.

설명

with() 메서드는 배열에서 주어진 인덱스의 값을 변경하여, 주어진 인덱스에 있는 요소가 주어진 값으로 대체된 새 배열을 반환합니다. 원래 배열은 수정되지 않습니다. 이를 통해 조작을 수행하는 동안 배열 메서드를 연속으로 이어서 호출 할 수 있습니다.

with()를at()와 결합하면, 음수 인덱스를 사용하여 배열을 각각 읽고 쓸 수 있습니다.

with() 메서드는희소 배열을 생성하지 않습니다. 만약 원래 배열이 희소 배열인 경우 빈 슬롯은 새로운 배열에서undefined으로 대체됩니다.

with() 메서드는제네릭 메서드입니다. 이 메서드는this 값에length 속성과 정수 키 속성 만을 필요로 합니다.

예제

하나의 요소만 변경한채로 새로운 배열을 만들기

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]

배열 메서드 연속하여 연결하기

with() 메서드를 사용하면 배열의 단일 요소를 업데이트한 후 다른 배열 메서드를 적용할 수 있습니다.

const arr = [1, 2, 3, 4, 5];console.log(arr.with(2, 6).map((x) => x ** 2)); // [1, 4, 36, 16, 25]

희소 배열에서 with() 사용하기

with() 메서드는 언제나 밀집 배열을 생성합니다.

const arr = [1, , 3, 4, , 6];console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6]

with() 메서드는 새로운 배열을 생성하고 반환합니다. 이 메서드는this의length 속성을 읽은 다음 키가length보다 작은, 음수가 아닌 정수인 각 속성에 접근합니다.this의 각 속성에 접근하면 속성의 키와 동일한 인덱스를 갖는 배열 요소가 속성의 값으로 설정됩니다. 마지막으로index의 배열 값은value로 설정됩니다.

const arrayLike = {  length: 3,  unrelated: "foo",  0: 5,  2: 4,  3: 3, // length가 3이기 때문에 with()메서드는 이를 무시합니다.};console.log(Array.prototype.with.call(arrayLike, 0, 1));// [ 1, undefined, 4 ]