자바스크립트 순수 함수 [Pure Function]

✨순수 함수

함수형 프로그래밍의 한부분이며 두가지 규칙을 갖고 있음

1️⃣ 같은 입력 값 주어졌을 때 언제나 같은 결괏값 리턴
◽ 같은 입력 ➡ 같은 출력

순수한 예시 (✅) :

function add(x, y) {
  return x + y;
}
add(2, 3); // 항상 5
add(2, 3); // 또 5

입력이 2와 3이면 항상 5 리턴함 → ✅ 순수함수 조건 충족!

순수하지 않은 예시 (❌) :

let randomBoost = Math.random();
function addWithRandom(x) {
  return x + randomBoost;
}
addWithRandom(2); // 실행할 때마다 결과가 다름!

Math.random()처럼 외부 요인 때문에 결과 달라지면 순수함수❌

2️⃣ 사이드 이펙트를 만들지 않음

• 사이드 이펙트란❓
  ➡ 함수가 외부 세계를 변경하거나,
  외부 세계에 영향을 주는 것

순수한 예시 (✅) :

function multiply(x, y) {
  return x * y;
}

외부에 영향을 안 줘 → 결과만 리턴함

순수하지 않은 예시 (❌) :

let count = 0;
function increase(x) {
  count++; // 외부 상태(count)를 바꿈 ❌
  return x + 1;
}

외부 변수 count를 바꿈 → ❌ 사이드 이펙트 발생

🤔순수 함수 사용하는 이유❓

• 클린 코드를 위해
• 테스트 쉽게 하기 위해
• 디버그 쉽게 하기 위해
• 독립적인 코드를 위해

🐱‍💻

⚡same input➡same output

const add = (x, y) => x + y;
console.log(add(11, 20));  // 31

const fullName = (first, last) => `${first} ${last}`;
console.log(fullName("John", "Doe"));  // John Doe

무조건 입력 값이 같으면 결과값 같을 수 밖에 없음

⚡No Side Effects

const z = 1;
const sum = (x, y) => x + y + z;
console.log(sum(10, 20));

이건 사이드 임팩트가 있는거임
👉 const z의 값이 바뀌는 거에 따라서 출력 값이 달라지기 때문💡

const z = 2로 바꾸면 함수 밖의 스코프에서 이 함수에 영향을 준 것

let x = 0;
const numberUp = () => x += 1;  // x = x + 1
console.log(numberUp());  // 1
console.log(x); // 1

출력해보면 함수로 인해 x값이 1로 바뀌는 걸 볼 수 있음

순수 함수❌, 이것 또한 사이드 임팩트가 있는 것⭕

let x = 0;
const pureNumberUp = (num) => num += 1;
console.log(pureNumberUp(x));  // 1
console.log(x);  // 0

순수 함수⭕, 사이드 임팩트❌

const alphabetArray = ['A', 'B'];
const addItemToArray = (originalArray, newItem) => {
  originalArray.push(newItem);
  return originalArray;
}

console.log(addItemToArray(alphabetArray, 'C'));
console.log(alphabetArray);

이것도 마찬가지로 함수로 인해 원본 배열도 바뀌어버림

순수 함수❌, 사이드 임팩트⭕

const alphabetArray = ['A', 'B'];
const pureAddItemToArray = (originalArray, newItem) => {
  return [...originalArray, newItem]
} 

console.log(pureAddItemToArray(alphabetArray, 'C')); // ['A', 'B', 'C']
console.log(alphabetArray); // ['A', 'B']

이렇게 하면 원본 배열은 안건드리고 잘 출력되게 할 수 있음

순수 함수⭕, 사이드 임팩트❌