본문 바로가기

Web/JavaScript

함수형 자바스크립트 1. 순수함수와 부수효과

순수함수

어느 함수에 대해 같은 입력을 입력했을 때 항상 같은 출력이 나오는 함수cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 순수 함수 */
/* 순수 함수는 평가 시점이 중요하지 않다 */
function add(a, b) {
    return a + b;
}
/* 동일한 인자, 동일한 결과 */
/* 부수 효과 없음 */
/* 다른 스레드나 화경에서 실행해도
   항상 같은 결과를 가져오기 떄문에 안전하다고 할 수 있다 */
console.log( add(105) );
console.log( add(105) );
console.log( add(105) );
/* 동일한 인자, 다른 결과 */
var c = 10;
function add2(a, b) {
    return a + b + c;
}
/* 상수가 아닌 변수 c에 영향을 받음 */
/* 이런 순수함수가 아닌 함수는 평가 시점이 중요한 함수 */
console.log( add2(105) ); // 22
console.log( add2(105) );
console.log( add2(105) );
= 20;
console.log( add2(105) ); // 32
console.log( add2(105) );
console.log( add2(105) );
cs


부수효과

함수에서 출력(리턴)이 아닌, 외부의 상태에 영향을 미치는 부수적인 효과


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 부수 효과가 있는 함수 */
var c = 20;
function add3(a, b) {
    c = b;
    return a + b;
}
console.log( "c : " + c );
console.log( add3(105) );
console.log( add3(105) );
console.log( add3(105) );
console.log( "c : " + c );
/* 순수 함수가 아닌 함수 */
/* 인자로 들어온 값의 상태를 직접 변경 */
var obj1 = { val: 10 };
function add4(obj, b) {
    obj.val += b;
}
console.log( obj1.val );
add4( obj1, 20 );
console.log( obj1.val );
cs


함수형 프로그래밍에서는 객체의 상태를 변경할 수 없는가?

FP에서는 객체의 상태를 변경할 때, 초기화되어있는(기존의 값을 가진) 객체는 변경하지 않는다.

대신, 새로운 값을 가진 객체를 생성하여 반환하는 방식을 사용한다.

인자로 받은 객체나 외부의 상태를 변경하지 않기 위함이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
/* 함수형에서는 객체의 상태를 변경할 때,
   초기화되어있는 기존의 값을 가진 객체는 변경하지 않고
   새로운 값을 가진 객체를 생성하여 반환한다. */
/* 다시 순수 함수 */
/* 인자로 받은 객체를 변경하지 않으며, 외부 상태를 변경하지도 않는다. */
var obj1 = { val: 10 };
function add5(obj, b) {
    return { val: obj.val + b }
}
console.log( obj1.val );
var obj2 = add5( obj1, 20 );
console.log( obj1.val );
console.log( obj2.val );
cs