ES2023에서 소개된 새로운 배열 메소드 6가지
원본 배열을 복사하고 복사본을 변경한 후 반환하는 메소드 toSorted, toReversed, toSpliced, with, findLast, findLastIndex가 ES2023에 추가되었다.
기존의 비슷한 동작을 하던 sort, reverse, splice는 기존의 배열을 복사해서 사용하지 않고 참조해서 호출된 배열 자체를 수정한다.(mutation)
해당 메소드가 프로그램의 상태를 변경한다는 사실을 모르면 코드의 동작을 예측하기 힘들거나, 이런 변경으로 인하여 사이드 이펙트가 생길 가능성이 높다.
자바스크립트는 이렇게 원본 배열을 변경하는 메소드와 배열의 복사본을 만든 다음 복사본에 대해 연산하는 메소드가 동시에 존재한다.
1. toSorted : 요소가 오름차순으로 정렬된 새 배열을 반환
toSorted 메소드는 비교 함수를 제공하여 새로 정렬된 배열을 반환합니다. 기존의 sort 메소드와는 달리 원본 배열을 복사한 후 작업하기 때문에 예기치 않은 동작을 방지할 수 있습니다.
// sort를 사용할 경우
const words = ["banana", "apple", "orange", "grape", "kiwi"];
const sortedWords = words.sort();
console.log(words); // ["apple", "banana", "grape", "kiwi", "orange"]
console.log(sortedWords); // ["apple", "banana", "grape", "kiwi", "orange"]// toSorted를 사용할 경우
const words = ["banana", "apple", "orange", "grape", "kiwi"];
const sortedWords = words.toSorted();
console.log(words); // ["banana", "apple", "orange", "grape", "kiwi"] - 원본 배열은 변경되지 않음
console.log(sortedWords); // ["apple", "banana", "grape", "kiwi", "orange"]toSorted 메소드를 사용하면 원본 배열을 수정하지 않고 안전하게 배열을 정렬할 수 있습니다.
2. toReversed : 배열 역순으로 정렬한 새 배열 반환
toReversed 메소드는 원본 배열을 변경하지 않고 요소의 순서를 반전시킨 새로운 배열을 반환합니다.
// reverse를 사용할 경우
const fruits = ["Apple", "Banana", "Orange"];
const reversedFruits = fruits.reverse();
console.log(fruits); // ["Orange", "Banana", "Apple"]
console.log(reversedFruits); // ["Orange", "Banana", "Apple"]// toReversed를 사용할 경우
const fruits = ["Apple", "Banana", "Orange"];
const reversedFruits = fruits.toReversed();
console.log(fruits) // ["Apple", "Banana", "Orange"] - 원본 배열은 변경되지 않음
console.log(reversedFruits); // ["Orange", "Banana", "Apple"]3. toSpliced : 배열의 일부 요소를 제거하거나 대체한 새 배열을 반환
toSpliced는 기존의 slice와 사용법과 반환값이 조금 다릅니다.
splice는 기존 배열을 변경하고, 배열에서 삭제된 요소가 포함된 배열을 반환합니다.
toSpliced 함수는 삭제된 항목의 배열을 반환하지 않고 수정한 복사본의 배열을 반환합니다.
toSpliced의 사용법
toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2, itemN)start: 배열 변경을 시작할 index
deleteCount : start index로 부터 제거할 배열의 수 (3이면 3개 제거)
item1, item2, ...itemN : start index로 부터 추가할 요소
작동 방식은 다음과 같습니다.
// splice를 사용할 경우
const alphabet = ["a", "b", "c", "d"];
const spliced = alphabet.splice(1, 2)
console.log(spliced); // ["b", "c"]; 삭제된 요소를 반환
console.log(alphabet); // ["a", "d"]' 원본 배열의 변경const alphabet = ["a", "b", "c", "d"];
const spliced = alphabet.toSpliced(2, 1,"e","f","g");
console.log(spliced); // ["a", "b", "e", "f", "g", "d"]
console.log(alphabet); ["a", "b", "c", "d"];4. with : 배열의 특정 요소를 수정한 새 배열을 반환
with 메소드를 사용하면 배열의 특정 요소를 안전하게 수정할 수 있습니다. 원본 배열을 직접 수정하는 대신 사본 배열을 생성하고 지정된 요소를 변경한 후 수정된 사본을 반환합니다.
대괄호 표기법을 사용하는 것과 유사한 함수입니다.
// with를 사용할 경우
const numbers = [1, 2, 3, 4, 5];
const updated = numbers.with(3, 10);
console.log(updated); // [1, 2, 3, 10, 5]
console.log(numbers); // [1, 2, 3, 4, 5]// 대괄호 표기법을 사용할 경우
const numbers = [1, 2, 3, 4, 5];
numbers[3] = 10;
console.log(numbers); // [1, 2, 3, 10, 5]5. findLast : 마지막으로 일치하는 항목 찾기
findLast 메소드는 배열에서 마지막으로 일치하는 항목을 반환합니다. 기존의 find 메소드와는 달리, 배열을 끝에서부터 검색하여 마지막으로 일치하는 항목을 찾습니다.
const a = ["1", "2", "3", "4", "3"];
a.findLast(item => item === "3") // "3"
a.find(item => item === "3") // "3"6. findLastIndex : 마지막으로 일치하는 항목의 인덱스 찾기
findLastIndex 메소드는 배열에서 마지막으로 일치하는 항목의 인덱스를 반환합니다. findIndex 메소드와 비슷하지만, 배열을 끝에서부터 검색하여 마지막으로 일치하는 항목의 인덱스를 찾습니다.
const a = ["1", "2", "3", "4", "3"];
a.findLastIndex(item => item === "3") // 4
a.findIndex(item => item === "3") // 2