javascript 함수형 프로그래밍

목차

• 함수형 프로그래밍
• 함수형 프로그래밍 기법
• 고차 함수
• 화살표 함수
• 클로저(Closure)
• 커링(Currying)

 

함수형 프로그래밍

연산할 대상이 함수가 되는 프로그래밍 패러다임으로 내부 데이터와 상태를 그대로 두고 여러 함수를 조합하여 작업을 수행하는 방식이다. 선언적 방식으로 구현되며 흐름 제어를 명시적으로 기술하지 않고 로직을 표현한다.

 

함수형 프로그래밍 특징

💡 명령형이 아닌 선언형이다.

명령형 프로그래밍은 무엇을 어떻게 할 것인가에 집중한다. ex) html, Lisp, Sql 등

// 배열 내 요소를 대문자로 바꾸는 코드
// 배열 내 요소를 i를 증가해주며 하나씩 접근하여 대문자로 바꾸고 새 배열에 담아준다.
const arr = ['a', 'b', 'c'];
const result = new Array();
for (var i = 0; i < arr.length; i++) {
	result.push(arr[i].toUpperCase());
}
console.log(result);	// ["A", "B", "C"]

 

선언형 프로그래밍은 무엇을 할 것인가에 집중한다. ex) C, C++, Java, Pascal 등

// 배열 내 요소를 대문자로 바꾸는 코드
// 배열 내 모든 요소에 대문자로 바꾸는 함수를 적용한다.
const arr = ['a', 'b', 'c'];
console.log(arr.map(a => a.toUpperCase()));	// ["A", "B", "C"]

 

선언형 방식을 사용하기 위해서는 명령형으로 어떻게 할 것인지 구현된 것들이 추상화 되어 있어야 한다.

즉, 선언형 방식은 추상화 되어있는 명령형 방식을 사용하는 것이다.

 

💡 부수효과(Side Effect)가 없다.

부수효과는 함수가 만들어진 목적과 다른 효과나 부작용을 의미한다.

부수효과가 발생하는 경우는 아래와 같다.

• 전역범위에서 변수, 속성, 자료구조를 변경할 때
• this를 사용할 때
• 함수의 원래 인수 값을 변경할 때
• 예외를 일으킨 함수가 그대로 예외를 던질 때

// 불순함수: 매개변수의 값을 직접 변경, 부수효과로 기존 배열의 값 변경
var arr = ['a', 'b', 'c'];
var impure = (x) => {
  x.push('d');	// 기존 배열 값까지 변경
  return x;
}
console.log(impure(arr));	// ["a", "b", "c", "d"]
console.log(arr);		// ["a", "b", "c", "d"]

// 순수함수: 매개변수를 복사한 값을 변경
var arr = ['a', 'b', 'c'];
var pure = (x) => {
  newArr = [...x, 'd'];	// 기존 배열 값을 변경하지 않고 펼침 연산자로 새로운 배열에 추가
  return newArr;
}
console.log(pure(arr));		// ["a", "b", "c", "d"]
console.log(arr);		// ["a", "b", "c"]

 

부수효과가 없는 함수는 순수함수, 있는 함수를 불순함수가 된다.

순수함수는 외부의 요인을 건들이지 않은 채 매개변수를 받아 정해진 로직만을 처리하는 함수이다.

순수함수가 되려면 아래의 조건을 만족해야 한다.

• 하나 이상의 인자를 받아야 한다.
• 반환 값이 반드시 존재해야 한다.
• 함수 내에서 인자를 제외한 다른 변수를 사용하면 안된다.
• 동일 입력, 출력이 보장되어야 한다. (매개변수로 작업을 처리하고 결과를 반환해야 한다.)

// 순수함수X (인자로 받지 않은 cond 변수를 함수 안에서 사용)
var arr = ['a', 'b', 'c'];
var cond = x => x.toUpperCase();
var ex = function(array) {
    return array.map(cond);
};
console.log(ex(arr));	// ["A", "B", "C"]

// 순수함수O
var ex = function(array, condition) {
  return array.map(condition);
};
var arr = ['a', 'b', 'c'];
var cond = x => x.toUpperCase();
console.log(ex(arr, cond));	// ["A", "B", "C"]

 

같은 입력에 대해 항상 같은 출력만을 보장하니 테스트와 추적이 쉽고 다른 곳에 영향을 주지 않아 활용하기 쉽다는 장점이 있다.

 

💡 상태 변이를 최소화 한다. (불변성)

상태 변이란 메모리에 저장된 값을 변경(변수의 재할당 등)하는 것을 의미한다.불변성을 지키면 무분별한 상태의 변경을 막고 상태의 변경을 추적하기 쉽다.

📚 변수와 메모리
- 선언: 변수를 통해 접근할 수 있는 메모리 공간 확보 ex) let num;
- 할당: 메모리 공간에 값 저장 ex) num = 10;

자바스크립트에서 string, number, boolean 타입 같은 원시 자료형의 경우 변수를 재할당 하더라도 원본 변수에 담긴 값은 변하지 않고 다른 메모리 주소에 복사해서 사용한다. (값에 의한 호출)
Array, Object 타입과 같은 객체들은 원본 변수의 메모리 값이 직접 변경된다. (주소에 의한 호출)
상태 변이란 메모리에 저장된 값이 변경되는 것을 의미하며 동시에 불변성을 지키지 않았다는 의미이기도 하다.

 

💡 참조 투명성을 가진다.

표현식을 해당 표현식의 결과로 대체해도 아무 영향이 없다면 참조에 투명하다고 얘기한다. 

예를 들어 1 + 9 표현식을 해당 표현식의 결과인 10으로 치환해도 아무런 문제가 없기 때문에 참조에 투명하다.

function add(a, b) {
  return a + b;
}
function multiple(a, b) {
  return a * b;
}
// multiple(1, 2)를 2로 대체해도 영향 없음
console.log(add(5, multiple(1, 2)));

function add(a, b) {
	var result = a + b;
	console.log('result: ' + result);
	return result;
}
// add(3, 4)를 12로 바꾸면 결과가 다름
console.log(add(3, 4));

 

함수형 프로그래밍 원칙

• 입출력이 순수해야 한다.
• 부산물이 없어야 한다.
• 함수와 데이터를 중점으로 생각해야 한다.

 

함수형 프로그래밍 기법

알아둘 것

자바스크립트에서 함수를 변수에 할당할 수 있다.

// 변수에 함수 할당
const add = function(a, b) {
  return a + b;
}
add(1, 3);	// 4

// 함수를 다른 변수에 넘기기
const copyAdd = add;
copyAdd(3, 2);	// 5

 

자바스크립트에서 함수를 파라미터로 넘길 수 있다.

function hello() {
	return 'hello';
}

// 함수를 파라미터로 받는 함수
function print(func) {
  console.log(func);	// function hello() { return 'hello'; }
	console.log(func());	// hello
}

// 함수를 파라미터로 넘기기
print(hello);

 

고차함수 (HOF, Higher-Order Function)

함수를 매개변수로 사용하거나 함수를 반환하는 함수이다.

값을 입력받고 로직을 처리하여 반환하는 로직을 감추는 추상화 단계(함수)에서 한 단계 더 높여 함수를 전달받아 처리하므로 높은 추상화 수준을 가진다는 이점이 있다.

// 함수를 매개변수로 사용하는 함수
function foo(f) {
  f();
}

// 함수를 반환하는 함수
function foo() {
  return function() {};
}

 

자바스크립트에 기본적으로 내장된 고차 함수 중 많이 사용되는 함수들이다.

함수명	기능
forEach	각 요소에 함수를 적용(새로운 배열을 반환하지 않음)
filter	특정 조건을 만족하는 요소를 새로운 배열로 반환
find	배열의 요소를 순회하면서 조건에 일치하는 요소의 값을 즉시 반환
map	각 요소에 함수를 적용한 값을 새로운 배열로 반환
reduce	각 요소에 대해 reducer 함수를 실행하고 하나의 결과 값을 반환
sort	정렬

 

const arr1 = ['a', 'b', 'c'];
const arr2 = ['aria', 'brick', 'cathy'];
const arr3 = [-1, 0, 4, -2, 3];
const arr5 = [1, 2, 3, 4, 5];
const arr6 = [2, 1, 4, 5, 3];

// 1. forEach
// 콜백 함수 내에서 처리 후 !반환! 불가(이런 경우 map 사용)
arr1.forEach(function(element, index){
    console.log(index + ': ' + element);	// 0: a, 1: b, 2: c
});

// 화살표 함수 이용
arr1.forEach(element => console.log(element));	// a, b, c


// 2. filter
let result = arr2.filter(element => element.startsWith('a'));
console.log(result);	// ["aria"]


// 3. find
// 0 이상을 만족하는 첫 번째 요소 반환
result = arr3.find(element => element > 0);
console.log(result);	// 4

// 만족하는 요소가 없으면 undefined 반환
result = arr3.find(element => element > 10);
console.log(result);	// undefined


// 4. map
// 함수를 호출한 결과를 새로운 배열로 반환
result = arr1.map(x => x.toUpperCase());
console.log(result);	// ["A", "B", "C"]


// 5. reduce
const reducer = (previousValue, currentValue) => previousValue + currentValue;
console.log(arr5.reduce(reducer));	// 15(1+2+3+4+5)


// 6. sort
arr6.sort(function(a, b) {
  return a - b;
});
console.log(arr6);	// [1, 2, 3, 4, 5]

 

화살표 함수 (Arrow Function)

function 대신 화살표(=>)를 이용하여 간단히 함수를 표현하는 방법이다.

 

🔎 화살표 함수 기본

// 화살표 함수 이용(아래 함수의 축약형)
const func = (arg1, arg2, ...argN) => expression

// 기본 함수
const func = function(arg1, arg2, ...argN) {
    return expression;
};

 

🔎 생략 가능한 것

// 매개변수가 하나인 경우 인자 소괄호 생략 가능
singleParam => { statement }

// 매개변수가 없는 경우 인자 소괄호 필요
() => { statement }

// 본문이 한 줄인 경우 본문 중괄호 생략 가능
const sum = (a, b) => a + b;

// 본문이 여러 줄인 경우
const sum = (a, b) => {
    const result = a + b;
    return result; // 본문이 여러 줄인 경우 return 지시자로 결과 값을 꼭 반환해야 한다.
};

 

클로저 (Closure)

외부 함수에 접근할 수 있는 내부 함수의 원리로 내부함수에서 외부함수 스코프에 선언된 변수에 접근 가능하지만 그 반대는 불가능하다.

function outerFunction() {
  let msg = '';	// 자유변수라고 부름
  return function innerFunction(newMsg) { // 클로저
  	msg = msg + newMsg;
    return msg;
  }
}

// test 변수는 innerFunction 함수 참조
// outerFunction의 실행 컨텍스트는 소멸됨
let test = outerFunction();
test('po'); // "po";
test('ta'); // "pota";
test('to'); // "potato";

 

변수 msg는 함수의 실행 컨텍스트가 종료되면 외부에서 접근할 수 없다. 함수 밖에서도 msg 변수를 사용하기 위해서는 클로저를 사용하면 된다. 클로저는 반환된 내부함수가 자신이 선언되었을 때의 환경(스코프)을 기억하고 그 스코프 밖에서 호출되어도 접근할 수 있는 원리를 말한다. 꼭 내부 함수를 반환하는 개념 자체가 클로저가 아니며 아래와 같이 사용할 수도 있다.

 

let globalFunction;
{
  let msg = '';
  globalFunction = function(newMsg) { // 클로저
  	msg = msg + newMsg;
    return msg;
  }
}

globalFunction('po'); // "po";
globalFunction('to'); // "pota";
globalFunction('to'); // "potato";

 

클로저는 현재 상태를 기억하고 변경된 최신 상태를 유지한다는 점에서 유용하게 사용될 수 있다.(변수가 소멸되지 않고 마지막 상태를 기억한다는 점)

전역 변수의 사용을 줄이고 코드 재사용에 용이하다는 장점이 있지만 var 변수를 사용하는 경우에 유의해야 한다.

 

 

커링 (Currying)

인자를 여러 개 받는 함수를 분리하여 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다.

function uncurrying(greeting, name){
    console.log(greeting + ", " + name);
}

function currying(greeting){
    return function(name){
        console.log(greeting + ", " + name);
    }
}

// 커링 없이 파라미터 두 개를 받는 경우
uncurrying("hello", "anna");	// "hello, anna"

// 커링
var hello = currying("hello");
hello("jane");		// "hello, jane" 
hello("angela");	// "hello, angela"

 

 

// 커링 변환을 하는 함수
function curry(f) {
  return function(x) {
    return function(y) {
      return f(x, y);
    };
  };
}

// 커링 변환을 하는 함수를 화살표 함수로 표현한 것 (위 curry 함수와 동일)
// const curry = f => x => y => f(x, y);

// f에 전달된 함수: (a, b) => a * b
const curried = curry((a, b) => a * b);
// a에 10, b에 5전달
curried(10)(5); // 50

 

위 예시처럼 같은 인자를 여러 번 전달해야 하는 경우 유용하게 사용될 수 있다.

커링 함수에서는 인자의 순서를 신경써야 하는데, 가장 먼저 받는 인자(외부 함수)는 변하지 않고 가장 나중에 받는 인자(내부 함수)는 가변적으로 구성하는 것이 좋다.

 

 

참고자료 및 출처 🙇‍♂️

https://chifuyu.tistory.com/35?category=1174105 

https://yeongseungjeong.tistory.com/37

https://helloworldjavascript.net/pages/255-fp.html