함수형 프로그래밍 - 고차함수 HOF ( 일급객체 )

프로그래밍 패러다임에서도 설명드렸다시피 프로그래밍에는 크게 명령형과 선언형으로 구분됩니다.

 

명령형은 결과(Waht)보다 과정(How)을 중요시하고

선언형은 과정(How)보다 결과(What)를 중요시합니다.

 

이 과정에서 명령형은 OOP 를 지향하여 객체들간의 상호작용과 객체의 상태변화를 중심으로 프로그래밍을 설계하고

선언형은 함수형 프로그래밍을 지향합니다.

 

함수형 프로그래밍의 특징

- 순수함수

- 불변성

- 고차함수

- 1급 객체

 

순수함수

 

순수함수란 같은 입력에는 항상 같은 출력을 반환해야하며, 외부상태를 변경하지않고 외부에 사이드이팩트를 미치지 않는 함수를 말합니다

 

순수함수 예제)

// 순수 함수 예제 1: 두 숫자의 합을 반환하는 함수
function add(a, b) {
  return a + b;
}

// 순수 함수 예제 2: 배열의 모든 요소에 숫자를 더하는 함수
function addToList(arr, num) {
  return arr.map(item => item + num);
}

// 순수 함수 예제 3: 문자열의 길이를 반환하는 함수
function stringLength(str) {
  return str.length;
}

// 순수 함수 예제 4: 제곱 값을 반환하는 함수
function square(x) {
  return x * x;
}

만약 예제에서 function 외부 전역 스코프에 let a = 0 이라는 변수와 함께 function 에서 a 라는 변수에 할당/ 재할당을 하면서 외부 변수를 건드리게 되면 입력에 따라 출력값도 달라질수있고 외부변수에 의존하게 되어 사이드이팩트도 초래할수도 있습니다.

 

불변성

 

불변성은 원본 데이터는 변경되지않아야한다는 점입니다. 함수형 프로그래밍에서는 원본 데이터는 변경하지않고 새로운 데이터를 반환하므로 이 또한 사이드이팩트를 줄여 안전한 프로그래밍을 할수 있습니다.

 

불변성 예제)

// 배열에 요소를 추가하는 함수 (불변성 유지)
function addToArray(arr, element) {
  return [...arr, element];
}

// 객체에 속성을 추가하는 함수 (불변성 유지)
function addToObject(obj, key, value) {
  return { ...obj, [key]: value };
}

// 배열에서 요소를 제거하는 함수 (불변성 유지)
function removeFromArray(arr, index) {
  return arr.slice(0, index).concat(arr.slice(index + 1));
}

// 객체의 속성을 제거하는 함수 (불변성 유지)
function removeFromObject(obj, key) {
  const newObj = { ...obj };
  delete newObj[key];
  return newObj;
}

// 예시 데이터
const originalArray = [1, 2, 3];
const originalObject = { a: 1, b: 2, c: 3 };

// 불변성 유지한 데이터 조작
const newArray = addToArray(originalArray, 4);
const newObject = addToObject(originalObject, 'd', 4);
const modifiedArray = removeFromArray(newArray, 1);
const modifiedObject = removeFromObject(newObject, 'b');

console.log(originalArray); // [1, 2, 3]
console.log(newArray);      // [1, 2, 3, 4]
console.log(originalObject); // { a: 1, b: 2, c: 3 }
console.log(newObject);      // { a: 1, b: 2, c: 3, d: 4 }
console.log(modifiedArray);  // [1, 3, 4]
console.log(modifiedObject); // { a: 1, c: 3, d: 4 }

예제에서 spread 문법으로 객체/배열을 얕은 복사하여 새로운 데이터를 반환하고 있습니다.

새로운 데이터를 반환하는 함수에는 예제와 같이 slice 도 있고 map, filter 등이 있고 객체에는 object.assign() 과 JSON.parse() 등 다른 메서드들도 있습니다.

 

 

고차함수란? 

고차함수는 함수형 프로그래밍에 자주 사용되는 패턴입니다.

고차함수에는 2가지의 특징이 있는데 하나라도 만족 한다면 고차함수라고 볼 수 있습니다.

 

- 함수를 인자로 받는 함수

- 함수를 리턴하는 함수

 

보통 JS 의 Array 메서드들이 HOF에 속합니다.

예를들어 우리는 map method 에 [1,2,3].map((num) =>  num + num) 에서 (num) => num +num 라는 함수를 인자로 받았기 때문입니다.

 

간단하게 다른 예제를 살펴보겠습니다.

// 고차 함수 예시 1: 함수를 인자로 받는 함수
function doOperation(operation, x, y) {
  return operation(x, y);
}

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(doOperation(add, 5, 3));       // 출력: 8
console.log(doOperation(subtract, 8, 2));  // 출력: 6

// 고차 함수 예시 2: 함수를 반환하는 함수
function multiplyBy(factor) {
  return function (number) {
    return number * factor;
  }
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));  // 출력: 10
console.log(triple(4));  // 출력: 12

 

일급 객체

 

- 변수나 데이터에 할당 할 수 있어야한다.

- 객체의 인자 값으로 넘길 수 있어야한다.

- 객체의 리턴 값으로 리턴 할 수 있어야한다.

 

고차함수와 마찬가지로 객체의 인자 값으로 넘길수, 리턴 값으로 활용할수 있어야한다. 자바스크립트의 함수는 모두 일급객체이므로 고차함수로 사용할 수 있고 함수형 프로그래밍을 구현할 수 있다.