들어가며
내부 스터디를 진행하면서 mutation에 대한 개념을 보고 관련된 부분들을 찾아보다가 노마드코더의 영상 속에서 2023 ECMA의 Array Method 추가 기능들을 접하고, 현재 프로젝트를 진행하면서 우리가 자주 사용하는 메서드들 중 조금 더 상황에 맞게 사용 가능할 알아두면 좋을 법한 메서드 들이기에 공유드리려고 작성하게 되었습니다.
해당 영상을 보면 개발 시 mutation은 발견 및 디버깅하기 어렵고 다양한 버그로 이어질 수 있기 때문에 많은 프로그래밍 언어들이 mutation을 완전히 금지하거나 권장하지 않는다고 합니다. mutation을 하지 않는 대신 원본 변수의 수정된 복사본을 만들도록 하는데 그와 관련된 메서드 들입니다.
그럼 추가된 기능을 살펴볼까요?
새로이 추가되는 자바스크립트 메서드들
- toReversed
- toSorted
- toSpliced
- with
- findLast
- findLastIndex
기존 메서드와 추가된 메서드의 차이점을 보겠습니다.
toReversed
reverse() : 해당 메서드는 배열의 순서를 반전시켜 주며 원본 배열을 변경하여 반환합니다.
toReversed() : 해당 메서드는 배열을 뮤테이션 하지 않고 reverse와 동일하게 배열의 순서를 반전시킨 수정된 복사본 배열을 반환합니다.
const originalArray = [1, 2, 3];
// case 1
const newArray1 = originalArray.reverse();
console.log(newArray1); // [3,2,1]
console.log(originalArray); // [3,2,1]
// case 2
const newArray2 = [...originalArray];
newArray.reverse();
console.log(newArray2); // [3,2,1]
console.log(originalArray); // [1,2,3]
// case 3
const newArray3 = originalArray.toReversed();
console.log(newArray3); // [3,2,1]
console.log(originalArray); // [1,2,3]위 예시를 보면 newArray1은 원본 배열인 originalArray를 직접 변경하여 반환하기에 뮤테이션을 지양하기 위해 case2와 같이 originalArray를 가져와 새로운 배열을 만들어 사용할 수도 있겠지만 case3처럼 해당 과정을 1줄로 처리 가능하게 됩니다.
toSorted
sort() : 해당 메서드는 배열의 값을 순서대로 정렬한 원본 배열을 반환함.
toSorted() : 해당 메서드는 배열을 뮤테이션 하지 않고 순서대로 나열된 수정된 복사본 배열을 반환함.
const originalArray = [1, 5, 2, 4, 3];
// case 1
originalArray.sort(); // [1,2,3,4,5]
console.log(originalArray); // [1,2,3,4,5]
// case 2
const newArray = originalArray.toSorted();
console.log(newArray); // [1,2,3,4,5]
console.log(originalArray); // [1,5,2,4,3]
with
with() : 원본을 변경하지 않고 배열을 자유롭게 수정 가능.
const originalArray = ['first', 'second', 'third', 'fourth', 'tenth'];
// case 1
originalArray[4] = 'fifth';
console.log(originalArray); // ["first","second","third","fourth","fifth"]
// case 2
const newArray = originalArray.with(4, 'fifth');
console.log(newArray); // ["first","second","third","fourth","fifth"]
console.log(originalArray); // ["first","second","third","fourth","tenth"]
toSpliced
splice() : 초기 배열을 기준으로 특정 인덱스에서 시작하여 지정한 개수만큼 삭제할 항목의 배열을 반환함.
splice는 삭제되는 값을 보여주기 때문에 초기 배열에서 원하는 값들이 제대로 삭제되었는지 결과를 보고자 한다면 초기 배열을 재확인해 줘야 합니다.
하지만 삭제된 값의 확인이 필요 없고 오로지 배열의 결괏값만 필요하다면 아래의 메서드를 사용.
toSpliced() : 초기 배열에서 특정 인덱스에서 시작하여 지정한 개수만큼 삭제된 수정된 복사본 배열을 반환함.
const originalArray = ['first', 'second', 'third', 'fourth', 'fifth'];
// case 1
originalArray.splice(1, 2); // ["second","third"];
console.log(originalArray); // ["first","fourth","fifth"];
// case 2
const newArray = originalArray.toSpliced(1, 2);
console.log(newArray); // ["first","fourth","fifth"];
console.log(originalArray); // ["first","second","third","fourth","fifth"]
findLast
find() : 지정한 조건과 일치하는 배열의 첫 번째 항목을 반환
fintLast() : 지정한 조건과 일치하는 배열의 마지막 항목을 반환
const originalArray = ['apple', 'orange', 'banana', 'grapes', 'mango', 'orange'];
originalArray.find((item) => item === 'orange'); // "orange"
originalArray.fintLast((item) => item === 'orange'); // "orange"
findLastIndex
findIndex() : 지정한 조건의 항목이 있는 인덱스를 반환
findLastIndex() : 지정한 조건의 항목이 있는 마지막 값의 인덱스를 반환
const originalArray = ['apple', 'orange', 'banana', 'grapes', 'mango', 'orange'];
originalArray.findIndex((item) => item === 'orange'); // 1
originalArray.findLastIndex((item) => item === 'orange'); // 5
마치며
작업을 진행하다 보면 배열로 된 데이터를 많이 접하게 되는데 원본을 가공하여 안전하게 처리할 수 있는 메서드들을 알아두면 좋을 것 같아 공유드렸는데요. 작업 시 조금이나마 도움이 될 수 있었으면 좋겠습니다. 읽어주셔서 감사합니다. 😊
그럼 안녕히…👋 -The End-