[javascript] with | 타겟을 지정한 값으로 수정한 새로운 배열을 반환하는 메소드

Array.prototype.with(index,  value )

with 메소드는 우리가 배열에서 특정 요소의 값을 다른 값(value)으로 수정할 때, 대괄호 표기법(ex. arr[ 0 ] ) 을 사용하는 것에 대한 복사버전이다.

 

즉, 대괄호 표기법의 경우에는 원본 배열을 파괴하지만, with의 경우에는 원본 배열을 파괴하지 않고, 원본배열을 복사한 배열의 값을 변경한 새로운 배열을 반환한다.

 

아래 예시를 보면 알 수 있듯이, 원본 배열은 변형되지 않은 상태 그대로 출력되었고, with 메소드를 사용한 경우 새로운 배열이 newArray 에 할당되어 출력된 것을 볼 수 있다.

 

const originArray = ["안","녕","하","쇼"];
const newArray = originArray.with(0, "안안")

console.log(originArray) // ['안', '녕', '하', '쇼']
console.log(newArray) // ['안안', '녕', '하', '쇼']

 

 

특징1) 희소배열을 생성하지 않는다

with 메소드를 희소배열을 생성하지 않는다. 즉, 희소배열과 같이 연속적이지 않은 배열의 경우 with 메소드로 새로운 배열을 반환하게 되면, 빈 슬릇이 undefined 로 대체된 연속된 배열(밀집 배열)로 반환된다.

 

const array = [1,2, ,4, ,6]
const newArray =array.with(0,100)

console.log(newArray)

 

특징2) 새로운 배열을 반환하므로 다른 배열 메소드로 체이닝할 수 있다.

with 메소드는 새로운 배열을 반환하기 때문에, 다른 배열 메소드로 체이닝하여 처리할 수 있다.

const array = [1,2,3,4,5]
const newArray =array.with(0,100).map((value, i)=>{return {value:value}})

console.log(newArray)