이 글은 학습한 내용을 본인의 생각을 통해 해석하고 정리한 TIL 입니다.
부족한 내용이나 틀린 사항은 언제든 댓글로 남겨주세요 !! 🙋♂️
개발을 하다보니 슬슬 코드 컨벤션, 아키텍쳐, 디자인패턴, 프로그래밍 기법 등 어떤 식으로 개발을 하는 것이 좋을 지에 관심이 가게 되었다. 그 중 프로그래밍 패러다임에 Functional programming(FP)과 Object-oriented programming (OOP)
이라는 개념을 알게 되었다. 이 두가지는 극명히 비교되는 프로그래밍 기법이다.
오늘은 이러한 프로그래밍 기법 중 하나인, Functional programming에 대해 파헤쳐 보자 🔥
나는 내 할일만 하면돼,,
이론적인 얘기는 관두도록 하겠다 워낙 많아서,,
FP의 효과는,
기존 OOP는 객체지향 프로그래밍이다.
객체의 연관성으로 관계를 정의하는 프로그래밍 기법이다.
이렇게 연관성이 있는 것들끼리 묶어서 동작하기 때문에, 특정한 객체에서 변경점이 있으면 다른 객체까지 영향을 받아 원하는 것과 다른 연산 결과가 나올 수 있다.
그래서, 함수형 프로그래밍 기법이 떴다고 생각한다.
자, 함수형 프로그래밍에서 지켜야할 특징을 알아보며 파악해보자.
순수함수는 참조 투명성을 지니며, 사이드이펙트가 없는 함수를 의미한다 ❓❓❓
자 코드 예시를 통해 이해해보자
// sideEffect가 존재하는 함수
let text = "hello world !"
const Header = () => {
let sub = document.createElement('h1');
sub.innerText = text;
document.body.appendChild(sub);
}
위에서 Header는 외부 변수 text를 참조하고, DOM의 변경사항을 만든다.
외부 변수를 참조하기 때문에, 참조가 투명하지 않다. 즉 참조 투명성을 지키지 못했다.
이렇기 때문에 동일한 아웃풋을 낼 수 없다. 즉 순수하지 않은 함수이다.
또한 DOM을 변경한다는 것은 외부적인 변경사항을 만든다는 것이다. 즉 사이드 이펙트를 만드는 함수라고 설명할 수 있다.
// sideEffect가 존재하지 않는 함수
const makeHeader = (text) => <h1>{text}</h1>;
const makeBody = (component) => <body>{component}</body>
const Header = makeHeader("hello world !");
const Body = makeBody(Header);
위의 함수를 이렇게 바꿔 보았다.
일단 각 함수는 동일한 인풋에 대해서 동일한 아웃풋을 뱉는다. 즉 순수함수인 것이다.
또한 외부 변수를 참조하는 것이 없다. 즉 참조 투명성을 지닌다.
이렇기에, 부수적인 효과를 만들어 내지 않는다. 즉 사이드이펙트가 없는 함수이다.
즉 위의 3가지 조건을 만족하고, 이로 인해 안정적이고 예측 가능한 프로그래밍을 할 수 있게 된다. 바로 이것이 FP의 정수라고 할 수 있다 !
이렇게 간단하지만, FP에 대해서 알아보았다. 사실 연관된 개념도 많고 어떻게 활용하는지도 무궁무진하다. 하지만 OOP와 어떻게 다른지, 그 큰 특징들을 이해했기 때문에 어떻게 적용해야 할 지도 이해할 수 있었다.
참고