불변성과 순수함수

불변성과 순수함수

불변성 : 결코 바뀌지 않음 ⇒ 원본 데이터 구조를 변경하는 대신 그 데이터 구조의 복사본을 만들되 그중 일부를 변경한다.

(Object.assign 같은 경우, 빈 객체를 받고, color 객체를 그 빈 객체에 복사한 다음에, 복사본에 있는 rating 프로퍼티의 값을 rating 파라미터의 값으로 변경한다. 최종적으로 rating만 변경된 복사본을 손에 쥐게 된다. )

• 원본 배열을 해치지 않고 새로운 원소를 넣는 법 : Array.push 대신 Array.concat 사용하기

순수함수 : 파라미터에 의해서만 반환값이 결정되는 함수.

• 최소 하나 이상의 인수를 받는다(안 받으면 결과가 같기 때문에 상수처럼 된다)
• 부수효과(side effect)가 없다. (전역변수를 설정하거나, 함수 내부 또는 앱에 있는 다른 상태를 변경 한다는 말)
• 순수함수는 인수를 변경 불가능한 데이터로 취급한다

const frederick = {
  name : "fred",
  canRead : false,
  canWrite : false
}

//안 순수한 함수 : 함수 자체가 매개변수를 받지않기 때문에 함수의 힘이 강해진다..
//그리고 const는 변수를 다시 대입하는 것은 막아주지만, 그 변수가 가르키는 객체의 내용을 변경하는것은 막지 않는다.(다른 언어들은 안 그런다고함)
//강력한 불변성이 정말 필요할 경우엔 Object.freeze()를 이용하자.
function tarakfunc() {
  frederick.canRead = true;
  frederick.canWrite = true;
}

tarakfunc();
console.log(frederick) // {name: "fred", canRead: true, canWrite: true}

//순수해 보이지만 안 순수한 함수. 왜냐면 원본도 바꿔버리기 때문에.
const isSoonsufunc = (person) => {
  person.canRead = true;
  person.canWrite = true;
  return person;
}

console.log(isSoonsufunc(frederick))// {name: "fred", canRead: true, canWrite: true}
console.log(frederick)// {name: "fred", canRead: true, canWrite: true} 원본도 바꾸어 버림.

//리얼 찐 순수함수. 
//스프레드 연산자를 이용해서 원복을 복사시켜서 보존한다.
const realSoonsufunc = (person) => ({
  ...person, //스프레드 연산자는 배열의 원소들을 복사한다!! 그래서 나머지 원소들을 얻을때도 사용할 수 있다.
  canRead : true,
  canWrite : true
})

console.log(realSoonsufunc(frederick))//{name: "fred", canRead: true, canWrite: true}
console.log(frederick) //{name: "fred", canRead: false, canWrite: false} 유지된다!

스프레드 연산자는 복사본을 만든다.

복사본을 만들 수 있어서 다른 역할들은 더 담당할 수 있다.

• 배열의 내용을 조합해서 새로운 배열을 반들 수 있다.
• 배열의 나머지 원소들도 얻을 수 있다.
• 물론 객체에서도 사용할 수 있다.