TC39 stage 4 - (2023.04.29 시점)

김동규·2023년 4월 29일

JavaScript tips

TC39 - Array.prototype.newmethod

tc39 stage4 proposal 중 배열에 관련된 것들을 뽑아 정리했습니다.

proposal-change-array-by-copy

제안 배경 요약

Array.prototype와 TypedArray.prototype에 값에 의한 복사를 지원하는 새 메서드를 제공합니다.

또한 Tuple.prototype(stage 2)은 불변성을 보장하지만 array.prototype의 메서드들은 선척전으로 그렇지 못합니다. 이 메서드들을 통해 두 자료구조의 연계성이 강화될 것입니다.

제안 내용

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

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

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]

또한 react의 배열을 다룰 때 spread syntax를 사용하지 않고 편하게 update를 수행 할 수 있습니다.

/* https://youtube.com/shorts/7xHtGNVQktI?feature=share */ 

// before
const onChange = (id, text) => {
	const newTodos = [...todos];
    newTodos[
    	newTodos.findIndex(t => t.id === id);
    ].text = text;
    setTodos(newTodos);
}

// after
const onChange = (id, text) => {
	setTodos(
    	todos.with(
        	todos.findIndex(t => t.id === id),
          	{ id, text }
        )
    )
};

// onDelete의 경우
const onDelete = (id) => {
	setTodos(
    	todos.toSpliced(
			todos.findIndex(t => t.id === id),
			1
        )
    )
};