자바스크립트(10) 함수형 프로그래밍

이종호·2022년 7월 18일
0

JavaScript

목록 보기
11/11
post-thumbnail

영상링크

함수형 프로그래밍?

프로그래밍 패러다임 중 하나이다. 다른 패러다임으로는 명령형, 객체 지향 등이 있다.

명령형 : 이걸 넣으면 리턴으로 내뱉는다.
객체지향 : 객체를 만들어 메소드를 만들고 변경한다.

코딩 스타일은 어떤 문제를 생각하고 과제를 풀이하는 방식처럼 일종의 사고방식이다.

자바스크립트의 함수형 프로그래밍

객체지향 프로그래밍을 알기 위해선 this, prototype등 자바스크립트 언어의 개념을 알고있어야 이해할수 있다. 하지만 처음시작할때 함수형프로그래밍을 사용한다면, 객체지향을 사용함으로써 예기치 못한 에러들을 일단은넘어갈수 있어 함수형 프로그래밍이 배우기 더 좋아 보였다고 한다. 그 사유에 대해선,

  1. 안전하다
  2. 덜 복잡하고
  3. 디버그가 비교적 쉽고
  4. 유지 관리가 더 쉽다.

라고 예시를 들었다.
또한 함수형 프로그래밍은 단순히 모든걸 함수로 표현한다. 함수는 인풋을 넣으면 아웃풋이 나오는 개념이다. 그러므로 인풋아웃풋에 대한 데이터 흐름이 고려되야 한다.

함수형 프로그래밍이 아닌것

명령형 프로그래밍

var name = 'Anjana';
var greeting = 'Hi, Im';
console.log(greeting + name);
// result => 'Hi, Im Anjana'

이처럼 변수를 지정해서 값을 넣은것은 명령형 프로그래밍과 같다. 먼저 변수 넣고, 다음 값을 넣고 마지막으로 변수를 출력한다. 절차적으로 수행된다.

함수형 프로그래밍인것

function greet(name) {
	return 'Hi, Im ' + name;
}
greet('Anjana');
// result => 'Hi, Im Anjana'

greet 함수를 만들어 매개변수(parameter) name를 취하고 미리 입력한 스트링과 합쳐서 반환한다.
그리고 순수함수를 표현하고 있다.

순수함수 : 예측불가능한 현상(side effect)을 막는 이유인데, 이는 함수가 주어진 인풋에서 아웃풋을 계산해서 반환하지 않는것.
1. 글로벌변수등이 return값에 영향을 주면 안된다.
2. 함수는 매개변수값으로만 return값에 영향을 준다

순수함수가 아닌것

  1. 글로벌변수등이 return값에 영향을 주면 안된다.
var name = 'Anjana';
function greet() {
	return console.log('Hi, Im ' + name);
}

순수함수인 것

  1. 함수는 매개변수값으로만 return값에 영향을 준다
function greet(name) {
	return 'Hi, Im ' + name;
}

고차함수

함수형 프로그래밍의 특징 중 하나가 최대한 순수하게 생각해야 한다. 또 다른 예시로는 앞으로 보여줄 고차함수가 있는데, 다른 함수를 인풋으로 받거나 함수를 아웃풋으로 반환하는 기능을한다.
즉, 객체처럼 함수를 다른 함수에 전달할 수 있다.

function makeAdjectifier(adjective) {
	return function (string) {
    	return adjective + ' ' + string;
    };
}

var coolifier = makeAdjectifier('cool');
coolifier('conference');
// => result 'cool conference'

클로저 형태이다. 외부의 조작으로 함수의 인자를 조정할 수 없고, 마치 객체지향 처럼 새로운 함수를 만들어내 또다시 리턴함수를 호출해서 사용하는 방식이다.

map,filter,reduce 등...

자바스크립트의 대표적인 고차함수들이다.
이또한 함수형 프로그래밍의 패러다임을 담고있고, 발표자가 준비해준 자료가 매우 잘 설명되어있다.

샌드위치를 만드는데, map으로 각자의 아이템들을 썰고 reduce로 이 아이템을 갖고 완성품으로 만들어준다.

데이터의 변형성

자바스크립트를 처음 시작할때 자료형을 들어봤을 것이다.
그 중 자료형에서도 변형이 가능한(mutable)것 과 변형이 불가능한(immutable)에 대한것을 배우는데,

변형가능(mutable) : 메모리 주솟값을 변경할 수 있다.
변형불가능(immutable) : 메모리 주솟값을 변경할 수 없다.

이 또한 함수형 프로그래밍에서 중요하다.

비함수형 변형

var rooms = ['H1','H2','H3'];
rooms[2] = 'H4';
romms;
// => result ['H1','H2','H4']

여러개의 방들이 있고, 방번호를 갖는다.
여기서 마지막 요소를 H4로 바꾸는데 지금 이 코드는 rooms가 갖고있는 주솟값을 유지하고 마지막 요소의 주솟값만 변경하여 mutable하게 조작했다.

이처럼 원형의 값을 바꾸는것은 함수형 프로그래밍에서 피하는 방식이고, 주로 객체지향에 이용된다.

왜냐하면, side effect(예측하지 않은 결과)의 우려가 있다.

함수형 변형

var rooms = ['H1','H2','H3'];
var newRooms = rooms.map(function (rm) {
	if (rm === 'H3') return 'H4'
  	else return rm;
});
newRooms; // => ['H1','H2','H4']
rooms; // => ['H1','H2','H3']

함수형 프로그래밍에서는 위의 코드처럼 원본값을 변경하지 않아야 한다. 만들어둔 배열 rooms에 각 아이템에 접근해서 그 아이템이 H3를 가질경우 값을 변경하고 그 변경된 배열을 새로운 배열 newRooms에 담았다.

지속성 데이터 구조 (persistent data structure)

위 쪽의 함수형 변형(immutable)을 할때 단점으로는, 계속 사본이 생긴다는 점이다. 단지 H3를 H4로 바꾸는데에도 주솟값이 새로 생기는 것이니 말이다. 이러한 단점을 해결하기 위해 지속성 데이터 구조가 나타났다.

  1. 트리의 각 리프 노드가 개발자가 저장하려는 항목이 되도록 만든다. (H1,H2,H3)

  2. 새로운 노드를 만든다 (H4)

  3. 기본에 만든 H1,H2,H3 노드 중 H1,H2의 노드만 가져온다.

  4. 3번에서 만든 노드를 H4노드와 연결한다.

이러한 과정으로 기존 함수형 변형과는 다르게 새로운 배열을 만들지 않고 만들어냈다.

음.. 이 부분은 듣긴했는데 아직 이해가 안된다.

profile
Frontend

0개의 댓글