미래의 Javascript: 곧 출시될 새로운 배열 메서드

이전 기사에서 Javascript stores objects and arrays in heap storage에 대해 다루었습니다. 즉, 어레이는 한 번 생성되고 이후에 어레이가 업데이트되면 원래 어레이가 업데이트됩니다. 예를 들어:

let myArray = [ 1, 2, 3 ];
let newArray = myArray;

newArray[0] = 2;

// Both return [ 2, 2, 3 ]
console.log(newArray, myArray);

따라서 원본에 영향을 주지 않고 어레이를 변경하기 위해 복사본을 만들거나 어레이를 복제하는 경우가 많습니다. 이를 수행하는 일반적인 방법은 the three dots 연산자를 사용하는 것입니다.

let myArray = [ 1, 2, 3];
let newArray = [...myArray];

newArray[0] = 2;

// Returns [ 2, 2, 3 ] and [ 1, 2, 3 ]
console.log(newArray, myArray);

복제가 매우 일반적이기 때문에 3단계에 도달한 새로운 사양이 작성되어 배열을 복사한 다음 변경할 수 있는 새로운 방법을 많이 제공할 것입니다. 이 제안을 "Change Array by Copy" 제안이라고 합니다. 작동 방식을 살펴보겠습니다.

지원하다

현재 이러한 기능은 주요 브라우저 또는 Node.JS 버전에서 지원되지 않습니다. 그러나 이 사양이 Javascript 제안 프로세스의 3단계에 도달했기 때문에 곧 지원될 것으로 예상할 수 있습니다. 이 섹션은 지원이 변경되면 업데이트됩니다.

즉, polyfill은 현재 사용할 수 있는 이 제안의 동작을 재현하기 위해 존재합니다.

복사 방법에 의한 새로운 배열 변경

새로운 제안은 배열을 복사한 다음 어떤 방식으로든 변경하는 4개의 새로운 메서드를 추가합니다. 이것들은:

Array.prototype.toReversed() - 어레이를 복제한 다음 되돌리기

Array.prototype.toSorted(compareFn) - 배열을 복제한 다음 정렬합니다.

Array.prototype.toSpliced(start, deleteCount, ...items) - 배열을 복제하고 어떤 방식으로든 연결합니다.

Array.prototype.with(index, value) - 배열을 복제하고 그 안에 새 요소를 추가합니다.

이러한 모든 방법은 TypedArray 데이터에서도 작동합니다(예: Int8Array ).

반전()

toReversed는 정확히 말한 대로 수행합니다. 배열을 가져와 반전시킵니다. 이 함수는 배열을 복제하므로 원래 배열의 새 버전을 만들기 위해 복사를 수행할 필요가 없습니다.

let x = [ 1, 2, 3 ];
let y = x.toReversed();

// Returns [ 1, 2, 3 ], [ 3, 2, 1 ]
console.log(x, y);

toSorted()

toSorted 는 sort() 의 비파괴 버전으로 원래 배열을 변경하지 않습니다. 기본적으로 배열을 가져와 숫자로 정렬합니다. 예를 들어:

let x = [ 5, 3, 4, 2, 1 ];
let y = x.toSorted(); // [ 1, 2, 3, 4, 5 ]

또한 Javascript의 sort() 메서드와 동일하게 작동하는 비교 함수를 허용하며 객체 배열로 작업할 때 유용합니다. 예를 들어:

let x = [
    { value: 0 },
    { value: 4 },
    { value: 2 },
    { value: 3 }
];

// y becomes:
// [
//    { value: 0 },
//    { value: 2 },
//    { value: 3 },
//    { value: 4 }
// ]
let y = x.toSorted((a, b) => {
    return a.value - b.value
});

접합()

toSpliced() 는 splice() 의 비파괴 버전입니다. 즉, 원래 배열을 변경하지 않습니다. 세 가지 인수를 허용합니다.

start - 시작할 위치입니다.

deleteCount - 제거할 요소의 수입니다.

...items - 삭제 후 시작 위치에 삽입할 항목.

예를 들어:

let x = [ "Dog", "Cat", "Zebra", "Bat", "Tiger", "Lion" ];

// y is [ "Dog", "Snake", "Bat", "Tiger", "Lion" ]
let y = x.toSpliced(1, 2, "Snake");

// z is [ "Dog, "Tiger", "Lion" ]
let z = x.toSpliced(1, 3);

위는 이러한 복사 기능이 얼마나 유용한지에 대한 완벽한 예입니다. 원래splice() 방법을 사용하여 x에서 요소를 제거하고 영구적으로 변경합니다. toSpliced() 를 사용하면 내용이 변경될 염려 없이 x 를 여러 번 변경할 수 있습니다.

~와 함께

마지막으로 with() 가 있는데, 이는 기존 배열의 한 요소만 변경합니다. 본질적으로 ArrayA를 가져와 다른 것을 보여줍니다with. 다음은 작동하는 예입니다.

let x = [ "Dog", "Cat", "Lizard" ]
// y is now [ "Dog", "Zebra", "Lizard" ]
let y = x.with(1, "Zebra")
// z is now [ "Tiger", "Cat", "Lizard" ]
let z = x.with(0, "Tiger")

다시 말하지만 매번 복사본을 만들지 않고도 하나의 초기 어레이에서 여러 개의 새 어레이를 만들 수 있었습니다.

결론

이러한 배열 추가는 논쟁의 여지가 없으며 일반적으로 배열 또는 객체의 복사본 하나만 유지하는 언어에 많이 필요한 추가입니다. 이러한 새로운 방법을 사용하여 Javascript는 코드의 혼란과 복잡성을 제거합니다. Temporal 처럼 큰 변화는 아니지만 언어에 추가된 것은 여전히 ​​반가운 일입니다.