JavaScript에서 변경되지 않는 데이터를 사용하는 방법

불변성은 코딩 면접이나 여러 가지 선택 발전 테스트에서만 찾을 수 있는 것 중 하나로 들린다.그러나 그것은 사실상 프로그래밍의 기초이다.이것은 네가 알지 못하는 상황에서 실천에 옮길 수 있는 것이다.그러나 오늘은 JavaScript의 불변성이 무엇인지, 그리고 이를 어떻게 실천에 옮기는지 심도 있게 살펴보겠습니다.
우선, 무엇이 불변성입니까?함수나 방법은 입력의 원시 값을 바꾸지 않습니다.

기초 지식
패턴의 경우

const characters = ['Big Bird', 'Grover', 'Elmo', 'Oscar'];

팝송 팝송
오스카가 팀을 떠났다고 가정하면가장 흔히 볼 수 있는 해소 방법은 사용pop 방법이다.

characters.pop();
console.log(characters); // ['Big Bird', 'Grover', 'Elmo']

이것은 아마도 매우 좋을 것이다. 모든 것이 매우 좋을 것이다. 그러나 지금 만약 내가 낡은 데이터와 새로운 데이터를 비교하고 싶다면.나는 명단에 누가 빠졌는지 보고 싶다.characters가 재배치된 이상 나는 이렇게 할 수 없다.이것이 바로 변하지 않는 데이터를 사용하는 것이 더 좋은 이유다.더 깨끗한 방법은 슬라이스 방법으로 새 그룹을 만드는 것입니다.

const newCharacters = characters.slice(0, -1);

//or

const newCharacters = characters.slice(0, characters.length - 1);

우리는 같은 결과를 얻었지만, 지금은 신구 데이터에 접근할 수 있다.우리는 함수를 통해 오류 수정 데이터를 보낼 수 있는 부작용을 피하여 일련의 문제를 야기했다.변하지 않는 데이터를 처리하는 것은 원본을 주지 않고 중요한 문서를 다른 사람에게 복사하는 것과 같다.장기적으로 보면 더욱 안전하다.

옮기다
첫 번째 문자를 삭제하려면 slice 방법을 수정하십시오.

const newCharacters = characters.slice(0, 1);

밀다
만약 우리가 그룹에 다른 구성원을 추가하고 싶다면.push 대신 spread 조작부호를 사용할 수 있습니다.

const newCharacters = [...characters, 'Cookie Monster'];

위치 이동 취소
시작할 때 새 구성원을 추가하려면 끝에spread 조작부호를 추가하십시오.

const newCharacters = ['Cookie Monster', ...characters];

기타 방법
여기서 볼 수 있는 것은 하나의 모델이 발전하고 있고, 우리는 데이터를 새로운 변수에 분배하고 있다는 것이다.성능 측면에서 볼 때 이것은 좀 비싸다.더욱 명확한 코드를 정의하고 부작용을 일으킬 기회가 적고 성능의 적정 하락을 초과한다.
더 복잡한 예를 들자.

const characters = [
  { name: 'Big Bird', color: 'yellow', address: 'Sesame Street' },
  { name: 'Grover', color: 'blue', address: 'unknown' },
  { name: 'Elmo', color: 'red', address: 'unknown' },
  { name: 'Oscar', color: 'green', address: 'Sesame Street' },
];

그룹의 모든 항목의 속성을 업데이트하려면 순환을 사용해야 할 수도 있습니다.이런 상황에서 우리는 아주 좋은 낡은 디자인forEach을 사용할 수 있다.

characters.forEach((character) => {
  character.address = 'Sesame Street';
});

하지만 지금 우리가 이사하는 캐릭터와 같은 곳에 머무르는 캐릭터를 비교하고 싶다면.이것이 바로 map 데이터를 사용하는 것이 통상적으로 더 안전한 이유이다.

지도.

const updatedAddressCharacters = characters.map((character) => {
  return { ...character, address: 'Sesame Street' };
});

만약 우리가 원시 목록에서 항목을 선별하려고 한다면, 상황도 마찬가지다.

필터

const unknownAddressesCharacters = characters.filter((character) => {
  return character.address === 'unknown';
});

이 두 가지 상황에서, 우리는 수정된 데이터를 새 그룹에 분배하는 것이지, 오래된 데이터를 덮어쓰는 것이 아니다.위에서 말한 바와 같이 우리는 몇 가지 우세를 얻었다.
같은 방식으로 사용할 수 있는 다른 방법도 많다.보통sort,reverse 또는reduce도 같은 방법을 사용할 수 있다.이러한 패턴에 익숙해지면 코드를 더욱 깨끗하게 하고 몇 가지 현저한 장점이 있다.

부작용 없음 - 이런 간단한 예시에서 우리는 상대적으로 간단한 조작을 실행하지만 되돌아오기 전에 계산이나 다른 복잡한 함수를 실행하면 forEach 순환에서 데이터를 덮어쓰고 다른 함수의 부작용을 초래할 수 있으며 이 함수들은 원시 그룹에 의존할 수 있습니다.

재사용 가능한 코드 - 당신의 코드가 더욱 재사용 가능합니다.불변 데이터를 사용하는 것은 원시 데이터에 여러 가지 방법을 적용할 수 있고, 그것에 대한 인용이 항상 있다는 것을 의미한다.너는 항상 원시적인 참고점이 있다.이것은 이러한 새로운 것과 낡은 데이터 원본을 한데 연결하고 방법과 기능을 결합시키는 것을 포함한다.

간단한 데이터 비교 - 두 개의 서로 다른 데이터 집합을 사용함으로써 데이터의 차이를 분석하는 것이 훨씬 쉽다.이것은 매우 편리하다. 특히 응용 프로그램과 데이터 집합이 증가함에 따라.

현식 코드 - 수조에서 실행forEach순환은 무슨 일이 일어났는지 제대로 설명할 수 없다.그러나 우리의 데이터를 새로운 변수에 재분배함으로써 우리는 원시 데이터를 보존하고 새로운 변수를 만들어 그 의미를 명확하게 표현할 수 있다.좋은 코드가 발생하고 있는 일, 특히 팀에서 일할 때 명확하게 전달된다는 것을 기억해라.

변경되지 않는 데이터를 사용하는 것은 나의 React와 Vanilla JavaScript 코드에 매우 큰 도움이 된다.그것도 도움이 됐으면 좋겠어요.