인스타그램을 보다 굉장히 신선한(?) Array 메서드가 출시되었다는 것을 알게 되었다!
기존에 사용하던 배열 메서드들이지만, 단점을 보완해서 업그레이드된 메서드로 출시된 것이다.
바로바로 toSorted, toReversed, toSpliced 이다.
이름만 봐도 "엥? 기존에 있던 메서드에 to붙인거네? 무슨차이지?"라는 궁금증이 발동할 것이다.
이 3가지 업그레이드된 메서드들이 기존과 무슨 차이점이 있는가?
그것은 바로 새로운 배열을 생성한다는 것이다.
기존의 배열 메서드와 함께 비교해서 알아보자.
💡 sort VS toSorted
sort
let arr = ['C', 'A', 'B'];
arr.sort();
console.log(arr); // ['A', 'B', 'C']sort는 문자열을 순서대로 정렬하는 메서드이다.
숫자 크기를 비교하기 위해서는 추가로 크기 비교문을 넣어주면 된다.
arr 이라는 배열을 sort하면 arr의 내용이 변경되는데, 이는 기존의 배열을 건들인다는 문제를 일으킨다. 그래서 이 문제를 해결하기 위해 나온 메서드가 바로 toSorted 이다.
toSorted
let originArr = ['C', 'A', 'B'];
let updatedArr = originArr.toSorted();
console.log(originArr); // ['C', 'A', 'B']
console.log(updatedArr); // ['A', 'B', 'C']위와 같이 기존의 배열(originArr)을 복사해서 새로운 배열(updatedArr)을 만들고 순서대로 정렬해 주는 것을 알 수 있다.
💡 reverse VS toReversed
reverse
let arr = ['A', 'B', 'C'];
arr.reverse();
console.log(arr); // ['C', 'B', 'A']reverse는 배열 안 요소를 반대로 뒤집는 메서드이다.
이 메서드도 기존의 배열을 반대로 뒤집어 버리는 메서드이다.
toReversed
let originArr = ['A', 'B', 'C'];
let updatedArr = originArr.toReversed();
console.log(originArr); // ['A', 'B', 'C']
console.log(updatedArr); // ['C', 'B', 'A']toReversed도 기존의 배열을 복사해서 새로운 배열을 만든 후, 그 배열을 뒤집어준다.
💡 splice VS toSpliced
splice
let months = ['Jan', 'March', 'April', 'June'];
months.splice(4, 1, 'May');
console.log(months); // ["Jan", "Feb", "March", "April", "May"]splice는 만능 그 자체!
배열 안 요소를 삭제 or 교체 or 추가할 수 있다.
하지만 역시 기존 배열 요소가 달라진다는 문제점을 갖고 있다.
toSpliced
const months = ["Jan", "Mar", "Apr", "May"];
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]
const months3 = months2.toSpliced(2, 2);
console.log(months3); // ["Jan", "Feb", "May"]
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
console.log(months4); // ["Jan", "Feb", "Mar", "May"]
// 기존 배열
console.log(months); // ["Jan", "Mar", "Apr", "May"]위 코드 처럼 삭제 or 교체 or 추가를 해도 toSpliced를 사용하면 기존 배열이 아닌 새로운 배열을 만들어서 변경하기 때문에 기존 배열을 건들이지 않는 장점이 있다.
하지만! 크리티컬한 문제점이 하나 있다...
그것은 바로 웹 버전 호환성이 굉장이 낮다는 점이다.🤣
아무래도 신 메서드다보니 사용할 수 있는 브라우저 버전이 크롬 기준 최소 110이라는 것이다.
그래도 언젠가는 차차 적용되면서 사용하면 기존의 배열을 더럽히는(?) 일을 안해도 되니까 좋은 메서드라고 생각된다.
