Web Front-end/함수형 프로그래밍(FP)

[JS/함수형] JavaScript , 함수형? OOP? 정체가 뭘까!

자바 스크립트를 구글링해보면, 함수형 언어라고 합니다. 함수형 언어는 무엇일까요?!

코드 작성 패러다임(방법) 

- 절차지향적, 객체지향적, 함수지향적 크게 3가지 패러다임이 현재까지는 있습니다.

함수형 프로그래밍을 설명하기 전에, 기존의 프로그래밍 패러다임이 어떻게 변화 해왔을지 알아봅시다!

 

순차적 프로그래밍과 Goto 

 

위에서, 아래로 차례차례(순차적) 프로그램을 짜는 방법. 기본적인 반복문,조건문와 자료형을 가지고 프로그래밍하는 방법이라고도 합니다. 과거에 , 함수라는 개념이 없던 시절에는 특정 위치로 실행 순서를 강제로 변경하는 goto 문을 만들어 내게 됩니다. 아래와 같이 말이죠!

//절차지향
var sum=0;
....
if (input==="+"){
	goto sum
}
else if (input==="-"){
	goto sub...
}
....
...
sum:
for (let i=0;i<10;i++){
  sum+=i;
}
......
...
sub:
	for(...)

문제점

  • 가독성이 떨어진다. (실행 순서가 Top-down 형식이 아니고, 중간중간 Branch가 발생하여, 논리적인 흐름이 끊긴다)
  • 논리의 흐름을 Control 하기 어렵기 때문에, 코드 수정이 너무 어렵다.

위의 문제점을 해결하기 위해서, 즉 하나의 논리적인 흐름으로 코드를 Top-down 방식으로 짜기 위해서 사람들이 연구를 하기 시작했고, 등장한 개념이 프로시저 , 서브루틴, 함수 등등으로 불리는 "모듈화"개념 이였습니다.

 

절차지향적 프로그래밍과 모듈화

 

goto가 발생하는 자리마다, 별도의 로직을 설정해둔 공간을 만들어놓고, 그 로직을 Call하는 방식으로 코드를 짜는 방식이 절차적 프로그래밍이였습니다. 즉, 현재의 "함수"개념이 생긴거죠! 절차지향적 방식은 현재에도 많이 쓰이는 방식입니다. 수많은 알고리즘 예제코드나 , 인터넷에 떠돌아 다니는 코드들을 보면 , 대부분 함수로 논리를 분리해서, main에서 call하는 형식으로 구현을 해놨을 겁니다! 

//main

num =input()
if (key==="+"){
	//function call
	add(num)
}
...
...


function add(num){
	//덧셈 논리
}
function sub(num){
	//빼기논리
}

구조체의 등장!

 

"논리적인"구조화를 통해, 코드의 가독성이 좋아지고, 재사용성이 좋아져서 큰 산을 하나 넘겼습니다. 하지만, 또 다른 문제가 있었죠. 바로, 세상은 한가지의 데이터 타입으로 이루어져 있지 않다는 겁니다.

"계산기"는 정수형 타입만 계산하게 됩니다. 숫자의 세계니까요. 하지만, 우리 현실은 하나의 개념이 여러가지의 타입의 정보를 갖고 있습니다. 메뉴판을 상상해보죠!

위와같은 정보를 가질 수 있겠네요.

메뉴이름(String), 메뉴가격(INT), 원산지정보(String),주문가능여부(boolean) 등등  다양한 타입의 정보가 "메뉴판"이라는 하나의 개념에 소속되어있습니다. 그래서, "구조체"라는 개념이 등장하게 되고, 이 "구조체"는 간단하게 이야기하면, 메뉴판처럼, 다양한 타입의 정보를 한곳에 묶어서 사용하겠다는 겁니다.

객체지향형 프로그래밍

OOP이라고도 하는데, OOP의 시작은 구조체를 사용하면서, 특정 구조체만 가지고 동작하는 함수 군들이 있는데, 이 함수들도, 그냥 구조체에 넣자는 개념이 였습니다.

예를들어, 메뉴판이라는 구조체가 있다면, 메뉴판을 보고 , 메뉴를 "주문"시키는 행위는 항상 발생할겁니다.

이 "주문"이라는 개념을 아예 메뉴판이라는 구조체에 넣어, 구조체(field)+함수(Method)가 있는 Class라는 개념을 만들어내게 됩니다.

시작은 구조체와 함수를 합치자는 개념에서 시작했으나, 변수와 함수를 같이 쓴다는 건 상당히 강력했습니다. 특히 , 큰 프로젝트를 할 때, 유용했습니다. 마치 , Gear(톱니바퀴)들 처럼, 하나의 Gear(class)을 만들어놓고, 각각의 class들을 "잘" 연결하여 결과물을 만들어내면 됬으니까요.

그래서, 어떻게하면, 이 Class들을 잘 활용할까에 대한 고민을 많이 하기 시작했고, 거기에 등장하게 된 개념이, 캡슐화 ,다형성, 상속, 디자인패턴 등등의 현재의 많은 OOP활용에 대한 개념들이 등장하게 됩니다.

 

대표적으로는 JAVA, C++가 있는데, 저는 JAVA가 진짜 OOP를 제일 잘 나타낸다고 생각합니다.

JS에서도, OOP를 하기위해서, TS가 만들어졌습니다.(JS의 OOP는 조금 특이한 형태입니다!)

 

OOP도 문제가 있습니다!

1. 좋은 객체 설계 과정이 매우 힘들고, 오래걸린다.

2. 프로그램이 커지면 커질수록, 객체들 간의 관계 또한 복잡하게 되고 ,결국 유지보수가 힘들어진다. 

그래서, 많은 개발자들은 OOP에 염증을 느끼고, 함수형 프로그래밍이라는 새로운 개념을 만들어내게 됩니다. 

 

함수형 프로그래밍

  • 모든 것을 "함수화" 시켜서, 가독성을 매우매우 높이고, 유지보수를 편하게 하자 입니다. 아래와 같이 말이죠.
  • 심지어, 인자값(Parameter), 리턴 값,변수도 다 함수로 설정하자는 겁니다.
//1~10까지 더하기
for (int i=1;i<10;i++) {
	sum+=i 
}
// 1~10까지 더하는 함수
add(10,print(num))

함수형 프로그래밍은 몇가지 개념이 잇습니다..

  • 순수 함수
  • SideEffect 
  • 1급 객체 
  • 참조 투명성

Pure Function

- 함수로 받은 인자만으로, 결과물을 돌려주어야합니다. 인자를 제외한 다른 변수를 사용하면 안됩니다.

- 절차지향적 프로그래밍에서, 모듈화를 위한 함수와 다른 개념입니다! 인자값만을 통제합니다.(제일 헷갈리는 부분)

-  Redux를 작성할 때, 순수함수를 써야한다 등을 들어보셨을겁니다. 다만, JS에서는 this라는 개념 때문에, 순수함수를 사용하기 힘든게 사실입니다. 

 

SideEffect

- 프로그래머가 의도하지 않은 효과를 이야기 합니다. 주로, 변수의 값이 변경되는 경우를 이야기하죠!

 

First-Class-Object

-  1급 객체는 변수나 데이터 구조 안에 담을 수 있고 , 파라미터로 전달 할 수 있고, 반환값으로 사용할 수 있고, 이름과 무관하게 고유한 구별이 가능한 객체를 의미합니다. 

- 함수형 프로그래밍에서 , 함수는 1급 객체로 취급하고 있고, JS에서도 함수는 1급 객체입니다. 

- 함수로 이루어진 배열도 가능하다는 소리입니다. 

 

참조 투명성

 

- 동일한 인자에 대해, 항상 동일한 결과를 반환해야 합니다.

- 참조 투명성을 통해 기존의 값은 변경되지 않고 유지됩니다. 즉, 원본의 데이터는 불변합니다.

 

장점은 뭐가 있을까요 ? 

1. Error Control

2. 코드의 가독성과 재활용이 높아짐.

 

결국, 함수들을 또 어떻게 설계할 것인지가 관건. Pure Function을 통해, 설계하는 작업이 오래걸림.

 

 

참조

https://www.zerocho.com/category/JavaScript/post/576cafb45eb04d4c1aa35078

 

https://www.zerocho.com/category/JavaScript/post/576cafb45eb04d4c1aa35078

 

www.zerocho.com

https://yozm.wishket.com/magazine/detail/1396/

 

자바스크립트에서 객체 지향을 하는 게 맞나요? | 요즘IT

이번 글에서는 객체지향 프로그래밍에 대해 이야기를 해보려고 합니다. 그리고 자바스크립트의 객체지향은 일반적인 객체지향 프로그래밍과는 어떻게 다른지 그리고 Javascript에서는 객체지향

yozm.wishket.com