2023년. 새로운 자바스크립트가 왔다...!
업데이트 2023-05-21
1
/
7
Mutations 매서드
자바스크립트에서 뮤테이션이란 상태를 변경시키는 것을 말하며 뮤테이션으로 인한 버그가 개발할때 발목을 잡기도 한다.
출처:
노마드 코더 Nomad Coders
toReversed 매서드
reverse함수를 사용했을때 생기는 뮤테이션 문제를 해결하기 위해서 새로운 함수 toReverse를 사용할 수 있다.
toSorted 매서드
toSorted함수도 앞선 toReverse와 같이 복사본을 반환한다.
toSpliced 매서드
toSpliced는 splice함수와 다르게 삭제된 배열의 요소를 반환하지 않고 삭제가 완료되고 남은요소를 포함한 배열을 반환한다.
with 매서드
배열 내의 특정요소를 수정할 수 있게 해주는 함수이다.
findLast & findLastIndex 매서드
자바스크립트 기존함수인 find, findIndex의 반대로 조건에 해당하는 마지막 항목을 검색하여 반환한다.
새로운 자바스크립트의 매서드!
새로운 매서드들을 사용하여 뮤테이션을 줄여 얘기치않은 버그를 줄이고 코드를개선 하자!
상세보기
reverse라는 함수를 예를 들자면 배열을 역순으로 정렬하는 함수이다. 아래의 예시를 확인해보자 하지만 해당 함수는 새로운 배열을 반환하는 것이 아닌 실제로 호출된 원래 배열을 수정하기 때문에 원치않는 로직으로 연결되고 많은 자바스크립트 개발자들이 뮤테이션으로 많은 혼란을 겪고 있는 것이 현실이다.
상세보기
toReverse함수는 새로운 복사본을 만들어 할당해주는 것과 같이 수정된 복사본을 반환하여 뮤테이션하지 않는다. 그렇기 때문에 같은 코드의 맥락으로 reverse대신 toReverse를 사용해주면 뮤테이션으로 인한 버그를 피할 수 있다.
상세보기
toSorted함수는 sort함수와 마찬가지로 배열을 정렬하지만 배열을 직접 수정하여 정렬하지 않고 toReverse와 같이 정렬된 복사본을 반환하여 뮤테이션하지 않기 때문에 버그를 방지할 수 있다.
상세보기
splice함수의 경우 해당 함수는 삭제되는 요소를 포함한 배열을 반환하고 splice를 실행한 배열은 삭제요소를 제외한 나머지 배열을 포함하는 상태가 된다. 하지만 toSpliced의 경우는 반드시 삭제된 요소를 제외한 배열의 복사본을 반환하도록 되어있다. 그렇기 때문에 삭제된 항목이 필요한 경우에는 splice를 사용하고 삭제가완성된 배열만 필요한 경우에는 toSpliced를 사용하면 된다.
상세보기
기존에 배열내에서 특정 요소의 값을 변경시키고자 할때는 arr[3] = 100 이러한 방식으로 코드를 구성했다면 with함수를 사용하면 일관성있게 변경이 가능하다. 이전의 예시와 같다고 가정했을때 arr.with(3, 100) 해주면 3번 인덱스요소의 내용이 100으로 변경된 원본배열의 복사본을 얻을 수 있다.
상세보기
기존 자바스크립트 함수에서 find함수는 배열 내에서 조건에 맞는 요소를 찾는 즉시 순회를 멈추고 해당 요소를 반환한다. findIndex도 마찬가지로 조건에 맞는 값을 찾으면 순회를 멈추고 해당 index를 반환한다. 이번에 새로나온 findLast와 findLastIndex함수는 반대로 조건에 맞는 항목중 마지막 항목을 반환한다.
전체요약
핵심은 복사본을 반환하는 것!
1. reverse라는 함수를 예를 들자면 배열을 역순으로 정렬하는 함수이다. 아래의 예시를 확인해보자 하지만 해당 함수는 새로운 배열을 반환하는 것이 아닌 실제로 호출된 원래 배열을 수정하기 때문에 원치않는 로직으로 연결되고 많은 자바스크립트 개발자들이 뮤테이션으로 많은 혼란을 겪고 있는 것이 현실이다.
2. toReverse함수는 새로운 복사본을 만들어 할당해주는 것과 같이 수정된 복사본을 반환하여 뮤테이션하지 않는다. 그렇기 때문에 같은 코드의 맥락으로 reverse대신 toReverse를 사용해주면 뮤테이션으로 인한 버그를 피할 수 있다.
3. toSorted함수는 sort함수와 마찬가지로 배열을 정렬하지만 배열을 직접 수정하여 정렬하지 않고 toReverse와 같이 정렬된 복사본을 반환하여 뮤테이션하지 않기 때문에 버그를 방지할 수 있다.
4. splice함수의 경우 해당 함수는 삭제되는 요소를 포함한 배열을 반환하고 splice를 실행한 배열은 삭제요소를 제외한 나머지 배열을 포함하는 상태가 된다. 하지만 toSpliced의 경우는 반드시 삭제된 요소를 제외한 배열의 복사본을 반환하도록 되어있다. 그렇기 때문에 삭제된 항목이 필요한 경우에는 splice를 사용하고 삭제가완성된 배열만 필요한 경우에는 toSpliced를 사용하면 된다.
5. 기존에 배열내에서 특정 요소의 값을 변경시키고자 할때는 arr[3] = 100 이러한 방식으로 코드를 구성했다면 with함수를 사용하면 일관성있게 변경이 가능하다. 이전의 예시와 같다고 가정했을때 arr.with(3, 100) 해주면 3번 인덱스요소의 내용이 100으로 변경된 원본배열의 복사본을 얻을 수 있다.
6. 기존 자바스크립트 함수에서 find함수는 배열 내에서 조건에 맞는 요소를 찾는 즉시 순회를 멈추고 해당 요소를 반환한다. findIndex도 마찬가지로 조건에 맞는 값을 찾으면 순회를 멈추고 해당 index를 반환한다. 이번에 새로나온 findLast와 findLastIndex함수는 반대로 조건에 맞는 항목중 마지막 항목을 반환한다.
2. toReverse함수는 새로운 복사본을 만들어 할당해주는 것과 같이 수정된 복사본을 반환하여 뮤테이션하지 않는다. 그렇기 때문에 같은 코드의 맥락으로 reverse대신 toReverse를 사용해주면 뮤테이션으로 인한 버그를 피할 수 있다.
3. toSorted함수는 sort함수와 마찬가지로 배열을 정렬하지만 배열을 직접 수정하여 정렬하지 않고 toReverse와 같이 정렬된 복사본을 반환하여 뮤테이션하지 않기 때문에 버그를 방지할 수 있다.
4. splice함수의 경우 해당 함수는 삭제되는 요소를 포함한 배열을 반환하고 splice를 실행한 배열은 삭제요소를 제외한 나머지 배열을 포함하는 상태가 된다. 하지만 toSpliced의 경우는 반드시 삭제된 요소를 제외한 배열의 복사본을 반환하도록 되어있다. 그렇기 때문에 삭제된 항목이 필요한 경우에는 splice를 사용하고 삭제가완성된 배열만 필요한 경우에는 toSpliced를 사용하면 된다.
5. 기존에 배열내에서 특정 요소의 값을 변경시키고자 할때는 arr[3] = 100 이러한 방식으로 코드를 구성했다면 with함수를 사용하면 일관성있게 변경이 가능하다. 이전의 예시와 같다고 가정했을때 arr.with(3, 100) 해주면 3번 인덱스요소의 내용이 100으로 변경된 원본배열의 복사본을 얻을 수 있다.
6. 기존 자바스크립트 함수에서 find함수는 배열 내에서 조건에 맞는 요소를 찾는 즉시 순회를 멈추고 해당 요소를 반환한다. findIndex도 마찬가지로 조건에 맞는 값을 찾으면 순회를 멈추고 해당 index를 반환한다. 이번에 새로나온 findLast와 findLastIndex함수는 반대로 조건에 맞는 항목중 마지막 항목을 반환한다.