ECMA 2023 Mutations

Imnottired·2023년 5월 24일
0

올해 들어서 자바스크립트는 새로운 문법이 추가되었다.
노마드코더 영상으로 접하게 되었고 있는 내용들을 정리하는 것이 목적이다.

방향성은 예측 가능하고 버그를 줄이는 방향이다.
이는 유지 관리에 도움을 준다. mutation한 값들은 경우의 수를 늘리고 혼란을 야기한다.




먼저 reverse를 보면

const x = [1,2,3];
const y = x.reverse();
y.push(0)

을 하면 결과로

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

이 나온다. 왜냐하면 reverse는 mutation하여서 기존(원본)의 배열을 바꾸고, 참조 주소를 그대로 반환한다.

그래서 x랑 y와 이어지게 된다.

이러한 경우의 수가 생기게되면 앞에서 말했듯이 혼란을 야기하기 떄문에,
많은 프로그래밍 언어에서 뮤테이션을 금지하거나 권하지 않는다.

그래서 이러한 해결책으로 권장하는 방법은
원본의 복사본을 만들고 이를 수정하는 방식을 권장한다.
(알고리즘에서도 원본을 수정하는 것보다 새로운 변수에 할당하는 것을 권장한다.)

React에서도 상태를 변경하기보다는 새로 만들어서 하는 방식을 권장한다.

본론으로 돌아와서 JS의 메소드는 일관성이 없어서 불편하다.
어떠한 것은 mutable, immutable하니 아쉽다.

예시로는 sort(Mutable)와 filter(Immutable)를 들 수 있겠다.

sort는 기존의 배열 순서를 바꾸고,
filter는 조건에 맞춘 복사본을 반환한다.

또한

const x = [1,2,3];
const y = x.reverse();
y.push(0)

위 상황을 해결하기 위해서 스프레드 문법을 사용하여서

const x = [1,2,3];
const y = [...x];
y.reverse();
y.push(0)

원본 배열이 유지하고 복사본을 직접 만들었다.
하지만 이러한 번거로움을 줄이기 위해서

toReversed

toReversed라는 메서드가 나왔다.

const x = [1,2,3];
const y = x.toReversed();
y.push(0)

이제 스프레드 문법을 사용하지않고 간단하게 원본 배열을 유지할 수 있다.
이외에도
toSorted도 있으니 참고하기 바란다.

sort는 기존의 배열을 수정하지만 toSorted는 복사본을 반환한다.

toSplice

기존의 Splice는 삭제된 항목을 반환하고,
원본을 수정하였다.

const a = ["a","b","c","d"];
a.splice(1,2) // ["b","c"]
console.log(a) // ['a','d']

toSplcie는 기존의 배열을 유지하고, 삭제한 배열을 반환하지 않으며
복사본에서 삭제하여 반환한다.

const a = ["a","b","c","d"]
const newArray = a.toSpliced(1,2)

이제 경우의 수를 더 줄여줄 수 있다.
만약 삭제된 항목의 값이 필요하다면 기존의 Splice를 사용하자

with

const x = ["a","b","c","e"]
x[3] = "d"
console.log(x) // ["a","b","c","d"]

위 방식처럼 기존의 배열값을 수정할 수 있다.
하지만 기존의 배열이 변하여서 아쉬웠다.
with을 사용하면 원본을 지킬 수 있다.

const x =["a","b","c","x"];
const z = x.with(3,"d");

결과

이제 원하는 값을 부담없이 다룰 수 있다.

findLast, findLastIndex

기존에 있던 find, findIndex를 뒤집은 버전이다.

기존의 둘은

가장 앞쪽에서 찾았다면


이는 가장 뒤쪽에서 찾는다.




마무리

요즘 프로젝트에 치여서 최신 트렌드에 대해 관심을 갖지 못했다.
우연히 유투브 추천영상에 보여서 보게 되었고 보는 것만으로는 정리가 되지않아서
글로 남겼다.

노마드 코더 볼때마다 느끼지만 설명을 참 잘한다.

!


참고 영상
https://www.youtube.com/watch?v=e6WV_DXGwSg

profile
새로운 것을 배우는 것보다 정리하는 것이 중요하다.

6개의 댓글

comment-user-thumbnail
2023년 5월 28일

오 이거 봤었어요 유튜브에서 괜히 반갑네요! 동적인 장점을 가진 JS이지만 통일성이 없는 단점을 좀 줄여준 거 같아요.

답글 달기
comment-user-thumbnail
2023년 5월 28일

신기하네요! 아 역시 최신 트렌드도 잘 따라가야 ... ㅜ

답글 달기
comment-user-thumbnail
2023년 5월 28일

점점 편리해지는 기능이 많네욥 ㅋㅋㅋ

답글 달기
comment-user-thumbnail
2023년 5월 28일

새로운 메소드들이 나왔군요 좋네요!!

답글 달기
comment-user-thumbnail
2023년 5월 28일

우왕 너무 감사합니다! 나중에 제 블로그에도 정리해봐도 될까요?ㅎㅎ

1개의 답글