1. 순수 함수(Pure Functions)

순수 함수란 함수에 동일한 인자를 넣었을때 언제나 같은 값을 리턴하는 함수를 말합니다. 그리고 외부의 어떤 데이터를 변경시키지않고 또 어떤 데이터로부터 영향을 받지않는 함수를 말합니다.

let a = 1;

function func(b, c) {
  return a + b + c;
}

console.log(func(2, 2)); // 5

a = 2; // c 값이 변경됨

console.log(func(2, 2)); // 6

위 아래 콘솔에 2, 2라는 같은 인자값을 넘겼지만 결과는 다릅니다. 중간에 a를 2로 변형시켜서 func함수가 리턴하는 값이 달라졌기때문입니다. func함수는 '외부값의 영항'을 받았기 때문에 순수함수가 아닙니다.

function func(b, c) {
  return b + c;
}

console.log(func(2, 2)); // 5

const arr = [1, 2, 3];

const mapArr = arr.map(x => x + 1);

console.log(mapArr);//[2, 3, 4]

위 func함수는 외부의 어떠한 값에도 영향을 안 받기때문에 순수함수라고 볼 수 있습니다. 그 어떤 장소에서도 같은 값을 리턴할 것입니다.
자바스크립트 배열 메소드중 많이 사용되는 map도 순수함수입니다. 외부의 영향을 받지않고 값을 리턴합니다.

2. Side Effects(부수 효과)

let a = 1;

function func(b, c) {
  a = 3;
  return a + b + c;
}

console.log(func(2, 2)); // 7
console.log(a)//3

func함수는 a의 값을 변형 시켰습니다. 저게 잘못된 패턴은 아니지만 코드가 길어지고 파일이 많아졌을때 '의도치 않게' 내가 만든 데이터가 다른 데이터의 값을 변형시킬 수 있습니다. 그렇게 '예상할 수 없는 상황'이 만들어지는 부작용이 일어날 수 있습니다. 데이터의 '재 사용성'도 떨어집니다. 이런 현상을 '부수효과'라고합니다.

let a = 1;

function func(b, c) {
  let d = a;
  d = 3;
  return d + b + c;
}

console.log(func(2, 2)); // 7
console.log(a)//3

조금 코드가 이상하지만😚 부수 효과를 막은 사례였습니다. 외부의 데이터를 보존하면서 새로운 데이터로 대입시켰습니다.

3. 상태변이(State Mutation)

상태변이 추 후에 올리겠습니다. 저는 포스팅을 할때 딱 제목의 내용만 가지고 포스팅을 하자고 마음을 먹었었습니다. 예를 들어 위의 순수함수, 부수효과가 왜 중요한지는 함수형 프로그래밍 패러다임을 알아야 하지만 그걸 설명해 버리면 포스팅이 길어지고 핵심 내용에서 멀어질까봐 그랬습니다. State Mutation라는 단어는 '불변성'과도 이어지고 'react, vue, redux'등 상태관리 앱의 내용을 들고와야 할거같기도하고 (솔직히 State Mutation에 관한 정확한 포스팅을 찾지 못했습니다ㅠㅠ)
그러한 이유로 상태변이는 다음에 ㅂ2