[JS] 자바스크립트 : 함수형 프로그래밍 - 순수 함수 (feat. sideEffect)

" 자바스크립트에서는 함수가 1급 시민이기 때문에,
  자바스크립트가 함수형 프로그래밍을 지원한다고 말할 수 있다. "

-러닝 리액트 [2판]

 

" props는 읽기 전용입니다.
   props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. "

- 리액트 공식 문서

 

 

여기서 얘기하는 '함수형 프로그래밍 - 순수 함수'에 대해 알아보자?! 🤔

---

 

 

함수형 프로그래밍 ?

 

 

자바스크립트는 함수형 프로그래밍만을 위한 언어는 아니지만!

함수형 프로그래밍을 지원하는 언어이다.

 

함수형 프로그래밍은 부수 효과가 없는 순수 함수를 추구하며,

모듈화를 통한 함수 간의 조합성을 강조하는 프로그래밍 방식이다.

(즉, 외부 환경으로부터 독립적이며 주어진 것들로 정해진 작업을 하기 때문에 부수 효과로부터 자유로울 수 있다.)

 

순수 함수 (Pure Functions) ?

---

input → ⬛️ → output

: 같은 input 동일한 output, 받은 대로 보여주는 것! 

 

 

예를 들어, 
언제나 1을 넣으면? ▶️ 1️⃣ 이렇게 네모난 1이 나오고,
언제나 2를 넣으면? ▶️ 2️⃣ 이렇게 네모난 2가 나오는 것처럼 말이다.
어디에 가져다 놔도 외부에 영향을 미치지 않은 채 안정적으로 동일한 일만을 한다!

 

부수 효과가 없으려면 함수를 '순수 함수'로 작성해야 하는데 정확히 무엇인지 헷갈릴 수 있다!

순수 함수는 파라미터에 의해서만 반환 값이 결정되는 함수를 뜻한다!

 

① 최소한 하나 이상의 인수를 받고, 인자가 같으면 항상 같은 값이나 다른 함수를 반환한다.

② 인자나 함수 밖에 있는 다른 변수를 변경하거나, 입출력을 수행해서는 안된다.

 

즉, 원칙적으로 순수 함수는 아무런 부수 효과(Side Effect)가 없어야 한다!

 

①을 이해하기 위해 아래의 코드를 보자. 

a와 b를 받아서 이미 정해진 c 값까지 더한 값을 리턴한다.

c는 10이고, 외부에 영향을 미치는 것은 없는 것 같은데 순수 함수일까?

 

//Pure functions ?!!!
let c = 10;

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

 

아니다!

c는 현재 10이지만 상수가 아니기 때문에 언제든 바뀔 수 있다.

오늘은 add(5, 5,)가 20이겠지만 c가 바뀐다면 20을 보장할 수 없다!

(만약 c가 상수라면 순수 함수라고 할 수 있을 것이다.)

 

 

이번엔 ②을 이해하기 위해 아래의 코드를 보자.

그렇다면 c 값을 b 값으로 변경한다면 같은 input으로 같은 output이 나오니까 순수 함수일까?

 

//Pure functions ?!!!
let c = 10;

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

 

이번에는 c라는 외부의 값을 변경했기 때문에 아니다.

하나 더 확인해보자.

 

//립스틱을 표현하는 객체
let lipstick = {
    product_name: "fire red",
    color: "#FF2A00",
    rating: 0
}

//점수를 메기는 함수
function rateColor(color, rating){
    color.rating = rating;
    return color;
}

rateColor(lipstick, 5);

//객체의 데이터가 변경 
console.log(lipstick); 
//▶️ {product_name: "fire red", color: "FF2A00", rating: 5}

 

이 또한 아니다.

원본 lipstick 객체의 데이터가 변경되는 부수 효과가 발생했기 때문이다!

(부수 효과란 쉽게 이야기해 어떤 함수의 동작에 의해 원하든 원하지 않든 프로그램 내 특정 상태가 변경되는 것을 의미한다.)

 

함수형 프로그래밍에서는 데이터가 변할 수 없다.

아래의 코드처럼 함수를 실행했을 때 원본 객체가 변하는 현상이 있어서는 안 된다.

만약 원본 데이터의 불변성을 유지하도록 수정한다면 복사해서 새로운 객체를 리턴하도록 해야 할 것이다.

 

//점수를 메기는 함수 (✅ Immutable)
const rateColor = (lipstick, rating) => ({
    ...lipstick,
    rating
});

rateColor(lipstick, 5);

//원본 객체의 데이터는 불변
console.log(lipstick);
//{product_name: "fire red", color: "#FF2A00", rating: 0}

 

 

결론적으로 순수 함수로 작성된 함수형 프로그래밍의 장점은 무엇일까?

 

이런 순수 함수의 조합으로 모듈화의 수준을 높이게 되면 

효율적이고 생산적인 성공적인 프로그래밍이 가능해진다!

(부수효과가 없다. === 오류를 줄이고! 안정성을 높일 수 있다.)

 

 

+)

이외에도 아래의 핵심 개념들을 충족한 경우 함수형 프로그래밍이라고 정의할 수 있다!

 

함수형 프로그래밍의 핵심 개념

• 불변성(Immutability)
• 순수성(Purity)
• 데이터 변환(transformation)
• 고차 함수
• 재귀(recursion)

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***