Array.prototype.with()
Baseline 2023
Newly available
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
-
주어진 인덱스에 할당할 값입니다.
반환 값
index
의 요소 값이 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() 호출하기
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 ]
명세서
Specification |
---|
ECMAScript Language Specification # sec-array.prototype.with |
브라우저 호환성
BCD tables only load in the browser