[함수형코딩]WEEK2 함수형 사고: 더 좋은 액션 만들기

 

🚀 프로그래밍에서 액션과 계산이란?

 

버그의 대부분은 예측할 수 없는 동작 에서 발생된다.

특히나 외부 상태를 변경할때 우리가 의도하지 않은 결과가 나올 수 있다.

 

함수형 프로그램밍은 액션은 최소화, 계산은 최대화 하는 방식으로

코드를 더 예측 가능하고, 유지보수하기 쉽게 만든다. 

 

함수형 코딩책에서 사용하는 개념어들은 이렇게 바꿔서 생각하면 쉽다.
액션 -> 부수효과 , 계산 -> 순수함수, 데이터 -> 불변성

---

 

🚀 계산 이란?

 

- 동일한 입력 -> 동일한 결과를 반환

- 외부 상태를 변경하지 않는다. 

- 암묵적 입력과 출력이 없는 함수

 

📌 잘못된 예

let total = 0;
function addToTotal(value) {
  total += value; // 외부 상태(total)를 변경 ❌
  return total;
}

console.log(addToTotal(5)); // 5
console.log(addToTotal(5)); // 10 (값이 달라짐!)

 

 

✅ 수정된 예

function addToTotal(total, value) {
  return total + value; // 외부 상태를 변경하지 않음 ✅
}

// 사용 예제
let total = 0; // 초기 값

total = addToTotal(total, 5);
console.log(total); // 5

total = addToTotal(total, 5);
console.log(total); // 10 (항상 예측 가능!)

 

---

🚀 액션 이란?

 

- 동일한 입력 -> 다른 결과가 나올 수 있음

- 외부 상태를 변경

- 암묵적 입력 또는 암묵적 출력이 있는 함수

 

✅ 액션의 예시

function logMessage(message) {
  console.log(message); // 콘솔에 메시지를 출력하는 액션 ❌
}

logMessage("Hello!"); // 실제로 실행될 때마다 외부 상태(Console)가 변경됨

---

 

🚀 액션에서 계산 빼내기

 

- 테스트하기 쉽고, 재사용하기 쉽다.

 

즉 계산을 늘리고 액션을 줄이면 코드가 예측 가능해 진다. 

 

📌 액션을 포함한 나쁜 코드

const cart = [];

function addToCart(item) {
  cart.push(item) // 원본 배열(cart) 변경 ❌
}

addToCart("🍎");
console.log(cart); // ['🍎'] (cart가 변경됨!)

 

 

✅ 액션을 줄이고 계산을 늘린코드

const cart = [];

function addToCart(cart, item){
  const newCart = cart.slice();
  newCart.push(item)
  return newCart
}

const newCart = addToCart(cart, "🍎");
console.log(cart); // [] (원본 유지됨!)
console.log(newCart); // ['🍎'] (새로운 배열)

 

 

🚀 더 좋은 액션 만들기

암묵적 입력(Implicit Input): 함수가 명시적으로 전달받지 않고, 외부에서 데이터를 읽음
암묵적 출력(Implicit Output): 함수가 반환값 없이, 외부 상태를 변경함

 

좋은 액션은 암묵적 입출력을 최소화하고, 명시적으로 전달하는 함수일 수록 더 좋은 액션이라고 표현한다. 

---

🚀 암묵적 입력을 줄이기

 

📌 냄새나는 코드

const taxRate = 0.1; // 암묵적 입력 (함수 외부의 상태를 사용)

function calculatePrice(price) {
  return price + price * taxRate; // 외부 변수(taxRate)에 의존
}

console.log(calculatePrice(100)); // 110

 

✅ 수정된 코드

function calculatePrice(price, taxRate) {
  return price + price * taxRate; // 필요한 값(세금)을 명시적으로 전달 ✅
}

console.log(calculatePrice(100, 0.1)); // 110
console.log(calculatePrice(100, 0.2)); // 120 (세금 변경 가능)

 

 

함수 내부에서 외부 변수를 읽지 않고, 필요한 값을 받아서 사용하게 되면서, 

함수가 항상 예측 가능해지고 테스트가 쉬워진다.

---

🚀 암묵적 출력을 줄이기

 

📌 냄새나는 코드

function logMessage(message) {
  console.log(message); // 암묵적 출력 (반환값 없이 외부 세계 변경)
}

logMessage("Hello, World!"); // 실행할 때마다 콘솔이 바뀜

 

✅ 수정된 코드

function formatMessage(message) {
  return `Log: ${message}`; // 문자열을 반환하는 순수한 계산 ✅
}

console.log(formatMessage("Hello, World!")); // 명시적인 출력

 

원하는 방식으로 출력할 수 있고, 테스트도 훨씬 쉬워진다.

 

 

🚀 암묵적 입출력을 줄이는 장점 

✔ 예측 가능성 증가 → 함수가 항상 같은 입력에 같은 출력을 반환함
✔ 테스트 용이 → 외부 상태를 신경 쓰지 않고 함수만 테스트 가능
✔ 재사용성 증가 → 함수가 특정 환경(Console, 파일 등)에 의존하지 않음