불변의 개념과 기술

JavaScript 및 React에서 불변 관행을 사용하는 이유:

버그가 도입될 표면적을 낮춥니다.

그 이유 중 하나는 단순히 입력 데이터가 함수/메서드에 들어가 예측 가능한 출력이 발생하기 때문입니다. 이를 준수하는 데 사용할 수 있는 것이 Pure Functions입니다. 이에 대한 추가 예는 고차 함수에 적용된 암묵적 프로그래밍의 예일 수 있습니다.

데이터 및 변경 기록을 생성합니다. 유용할 수 있는 것은 데이터 흐름을 따르거나 디버깅과 같은 것입니다.

이러한 개념을 많이 사용하는 시스템의 예로는 Redux와 같은 것이 있습니다. 데이터 변경을 처리하는 방법은 단계별로 수행할 수 있는 변경 내역을 생성합니다.

순수 기능:

부작용이 없습니다. 외부 데이터를 수정하지 않고 데이터를 반환합니다.
범위.

동일한 입력으로 동일한 값(출력)을 예상대로 반환합니다.

따라서 함수에 X-Factor가 도입되지 않는 한 출력은 "예측 가능"합니다. 함수(func1)에 들어가는 유일한 것은 입력입니다. API 데이터 또는 입력에 따라 변경되는 다른 함수(func2)의 데이터가 도입되면 더 이상 입력에 대해 확실하게 말할 수 없습니다.

상수 할당:

const는 재할당 및 재선언을 방지하는 데 탁월합니다.

const variable = 'hello world'
try{
variable = 'Hello World!'
}catch(error){
console.log(error) // TypeError: invalid assignment to const 'variable'
}

const만으로는 이것을 해결할 수 없으며 변수 재할당 방지가 문제의 절반, 아마도 돌연변이 문제의 절반 미만일 것입니다. 하지만 변수 데이터에 관해서는 확실히 절반입니다.

데이터의 변형을 방지할 할당의 오른쪽에 추가되는 키워드에 대한 ECMAScript 제안에 대한 멋진 이야기가 있습니다. 아마도 다음과 같이 보일 것입니다.

const obj = immut { a: 1, b: 2 }

obj['a'] = 3 // Error Thrown

console.log(obj['a']) // 1

동결 개체

단순 동결 물체의 우발적 돌연변이를 방지하기 위한 얕은 동결 물체
사물.

   const obj = { 
   zoo: 'animals'
   }
   Object.freeze(obj) 

   obj['zoo'] = 'noAnimals'
   console.log(obj['zoo']) // 'animals'

스프레드 연산자

개체 및 배열에 대해 스프레드 연산자를 사용하면 해당 소스에서 데이터의 얕은 복사본을 만든 다음 새 개체 또는 배열에 새 데이터가 있는 이전 데이터 복사본을 적용할 수 있습니다.

const arr = [ 1, 2, 3, 4 ]

const newArr = [ ...arr, 'newData' ]

console.log(arr) // [ 1, 2, 3, 4 ]
console.log(newArr) // [ 1, 2, 3, 4, 'newData' ]

고차 함수(HOF)

HOF는 훌륭한 도구이지만 불변성 개념도 준수합니다. HOF는 ​​함수를 받아 함수를 반환합니다. HOF에 대한 추가 읽기에 관심이 있다면 Eloquent JavaScript Chapter 5

다음은 코드에서 불변성 개념을 더 준수하기 위해 HOF 동작을 활용하는 예입니다.

const arr = [ 1, 2, 3 ]

const newArr = arr.map(ele => ele * 2)

console.log(newArr) // [ 2, 4, 6 ]
console.log(arr) // [ 1, 2, 3 ]

암묵적 프로그래밍(포인트 프리)

따라서 포인트 프리 스타일은 추상화를 허용할 수 있는 기능적 개념입니다. 이제 이것은 과도하게 사용되어 다음으로 이어질 수 있습니다.
또는 인수 이름 지정이 부족하여 혼동을 일으키기도 합니다. 이 남용/오용의 "무의미한 스타일"이라는 별명도 있습니다. 적절하게 사용하면 인수의 추상화와 단일 함수에 대한 구현이 느껴진다.

const arr = [ 1, 2, 3 ]

const addTwo = (ele) => ele + 2

const twoAddedPointFree = arr.map(addTwo)

console.log(twoAddedPointFree) // [ 3, 4, 5 ]

// You can even reuse it! 
const fourAdded = twoAddedPointFree.map(addTwo)
console.log(fourAdded) // [ 5, 6, 8 ]