[ES2023] 배열과 관련된 자바스크립트 새로운 기능

최근에 ES2023 스팩이 마무리 되면서 출시될 예정이다. 특히 배열과 관련된 기능에서 추가가 되었다.

(출처 - https://github.com/tc39/proposals/blob/main/finished-proposals.md)

1. Array find from last

(출처 - https://github.com/tc39/proposal-array-find-from-last)

기존의 array 타입에 두 개의 메소드가 추가가 되는데, 바로 .findLast(), findLastIndex() 입니다.

💡요약
배열의 마지막 요소를 기준으로 탐색

동기(Motivation)에는 다음과 같이 명시 되었는데,

Finding an element in an array is a very common programming pattern.
The proposal has a major concerns: Semantical. Which means clearly representing the operation i want.
And with the changes. There's a sugar here: Performance. Avoid obvious overhead. And may improve the constant factors in the time complexity. Even there's not an order of magnitude change. But it's may useful in some performance-sensitive scenarios. eg: React render function.

요약하자면, 자바스크립트의 배열에서 요소를 찾는 방법에 대한 이해와 관련된 내용을 다루며, 성능 개선을 위해 변경이 된다는 것을 나타내고 있다. 특히, React의 랜더링 함수가 성능에 민감한 상황에서 사용될 수 있다(?)는 예시를 들고 있다.

기존의 find() 와 findIndex()를 사용

const array = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

array.find(n => n.value % 2 === 1); // { value: 1 }
array.findIndex(n => n.value % 2 === 1); // 0

특정요소를 배열의 끝에서 찾을 때는,

reverse() 를 사용하고 find()를 하는 것이 처음부터 find 를 하는 것보다 나은 선택이었다.
즉, 내가 원하는 요소가 배열의 앞 부분 보다는 끝 부분에서 찾아서 볼 때가 유리하다고 판단이 될 때는 이렇게 역순으로 만든 뒤, 찾는 것이 유리했다.
하지만, 이렇게 될 경우 원본 배열을 변경하면서 배열의 무결성을 해치게 된다. 즉, 배열의 사이드 이팩트가 발생한다.

// ======== Before the proposal =========== 

// find
[...array].reverse().find(n => n.value % 2 === 1); // { value: 3 }

// findIndex
array.length - 1 - [...array].reverse().findIndex(n => n.value % 2 === 1); // 2
array.length - 1 - [...array].reverse().findIndex(n => n.value === 42); // should be -1, but 4

findLast()

하지만 새로운 findLast() 메서드를 사용하게 된다면, 원본 배열을 해치지 않고 사용할 수 있다. reverse()를 사용할 때 생기는 오버헤드나, 퍼포먼스 부문을 고려했을때, 제안이 되었다.

// ======== In the proposal =========== 
// find
array.findLast(n => n.value % 2 === 1); // { value: 3 }

findLastIndex()

기존의 findIndex() 와 마찬가지로 있을 return값은 같다.

// findIndex
array.findLastIndex(n => n.value % 2 === 1); // 2
array.findLastIndex(n => n.value === 42); // -1

2. Change Array by copy

(출처 - https://github.com/tc39/proposal-change-array-by-copy)

배열의 복사에 관한 기능은 네 가지가 추가가 되었는데, 다음과 같습니다.

• Array.prototype.toReversed() -> Array
• Array.prototype.toSorted(compareFn) -> Array
• Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
• Array.prototype.with(index, value) -> Array

작업 대상 배열을 직접적으로 하는 것 대신에, 작업 수행 배열의 복사본을 반환하도록 합니다.
기존에 배열을 처리했을 때, mutation을 방지 하기 위해서 복사본을 만들어주고, 그 다음 복사본을 변경하면서 호출했지만 그부분에 대해서 퍼포먼스에 대해서 최적화를 시켰다.

💡요약
변형된 복사 배열 반환, 원본 배열의 변경 x

기존에 배열의 역순으로 만들기 위해서는??

const sequence = [1, 2, 3];

const reversed = [...sequence].reverse()

이러한 작업을 이제 단순히 toReversed()로 대체할 수 있다.

toReversed(), toSorted(), with() 예시

• toReversed() : 배열의 역순으로 배열을 복사하고 반환한다.
• toSorted() : 배열을 정렬한 뒤, 복사하고 반환한다.
• with() : 첫 번 째 인자에는 index를 넣고, 두 번째 인자에 바뀔 요소를 넣어서 변환된 배열을 출력하도록 한다.

복사본이 반환(return) 되고, 원본은 그대로 유지가 된다.

const sequence = [1, 2, 3];
sequence.toReversed(); // => [3, 2, 1] 
sequence; // => [1, 2, 3] 


const outOfOrder = new Uint8Array([3, 1, 2]);
outOfOrder.toSorted(); // => Uint8Array [1, 2, 3]
outOfOrder; // => Uint8Array [3, 1, 2]

const correctionNeeded = [1, 1, 3];
correctionNeeded.with(1, 2); // => [1, 2, 3]
correctionNeeded; // => [1, 1, 3]