JavaScript 함수형 프로그래밍 패러다임

What is Functional Programming?

---

함수형 프로그래밍 패러다임

자바스크립트는 함수형 프로그래밍 패러다임을 추구하며 추가로 객체지향 프로그래밍 패러다임도 지원한다.

• 객체지향 프로그래밍 패러다임의 여러 패턴을 적용하려면 클래스(상속)와 객체를 활용할 수 있다.
• 타입스크립트를 통해 인터페이스(다형성)를 도입할 수 있다.

따라서 자바 개발자가 객체지향 프로그래밍을 모두 이해하는 것과 같이 자바스크립트 개발자가 제대로 개발하기 위해선 함수형 프로그래밍에 대한 모든 이해가 필요하다. 

 

일급함수: 함수 변수 + 함수 파라미터 + 함수 반환

일급함수란, 일급 객체로 취급되는 개념이다. 함수가 마치 숫자나 문자열처럼 일반적인 값으로 다루어질 수 있다는 의미.

일급 함수를 지원하는 언어는 함수를 변수에 저장하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 반환할 수 있다.

따라서 일급 함수는 함수를 변수처럼 다룰 수 있다는 의미.

 

1. 함수 변수 할당: 함수 표현식으로 할당된 함수를 변수에 저장할 수 있다.

const assignment = function() {
  return "Hello World";
};
console.log(assignment()); // "Hello World"

 

2. 함수 파라미터 전달: 함수를 다른 함수의 파라미터로 전달할 수 있다.

function Callback(callback) {
console.log(callback());
}
Callback(assignment); // "Hello"

 

var array = [ 1, 2, 3, 4 ]
var parameter = (element) => {
	return element * 10
}
var calcarray = array.map(parameter)
console.log(calcarray) // "[ 10, 20, 30, 40 ]"

 

3. 함수 반환: 함수는 또 다른 함수를 반환할 수 있다.

function firstFunction(){
  return function() {
    return "Hello secondFunction"
  };
}
const secondFunction = firstFunction();
console.log(secondFunction()); // "Hello secondFunction"

function returnvalue(unit) {
  return (parameter) => {
    console.log(parameter * unit)
  }
}
var returned = returnvalue(10)
returned(1230) // "12300"

 

 

순수함수 -  Thread-Safe: No Side-Effects

순수 함수는 외부 상태에 의존하지 않으며(참조 투명성: Referentially Transparent), 같은 입력이 주어지면 항상 같은 출력을 반환하고, 외부 상태를 변경하지 않는다(부수 효과 없음: No Side-Effects). 따라서 참조 투명성과 부수 효과 없음 이라는 두 가지 중요한 특성을 가지고 있다.

 

순수 함수는 멀티스레드 환경에서 안전하다. (Thread-Safe) 

Thread-Safe(멀티스레드 안전성)

• 병렬적으로 수행되는 모든 함수들은 서로에게 영향을 주어선 안되고, 외부의 값을 변경해서도 안된다.
• 하나의 작업을 여러개로 나누어 수행한 뒤 합쳤을때, 하나의 작업을 한번에 수행했을때와 같은 결과여야 한다.

함수형 프로그래밍: 함수형 프로그래밍에서 우리가 사용하는 모든 함수 단위들은 순수함수여야 한다.

참조 투명성(Referentially Transparent)

참조 투명성은 같은 입력 값에 대해 항상 같은 결과를 반환하는 특성을 의미한다.

function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1, 2)); // 3(항상 동일한 출력)

 

부수 효과 없음(No Side-Effects)

부수 효과가 없는 함수는 함수가 실행되어도 외부 상태나 변수를 변경하지 않는 함수를 의미한다.

let count = 0;

function pureAdd(x, y) {
  return x + y; // 외부 상태에 영향을 주지 않음
}

function impureAdd(x) {
  count += x; // 외부 상태(count)를 변경하는 부수 효과
}

 

순수 함수의 장점

• Testability(테스트 용이성): 일정한 입력 값에 대해 동일한 결과를 반환하기 때문에 테스트가 용이하다.
• Debugging(디버깅 용이성): 외부 상태에 의존하지 않으므로 함수의 버그를 쉽게 추적할 수 있다.
• Memoization(메모이제이션 가능성): 같은 입력에 대해 캐싱된 결과를 사용할 수 있어 성능이 향상된다.

비순수 함수의 단점

• Side-Effect 부수효과 발생: 비순수 함수는 외부 상태를 변경하여, 그 결과로 코드의 다른 부분에서 문제가 발생할 수 있다.
• Unpredictable Output 예상치못한 결과: 비순수 함수는 외부 상태에 의존하므로, 동일한 입력값을 넣었을 때 상황에 따라 다른 결과가 나올 수 있다.
• Difficult to Reason 디버깅 및 프로그램 흐름 분석 어려워짐: 비순수 함수는 외부 상태를 변경하거나 의존하므로, 함수 호출 흐름을 추적하고 디버깅하는 것이 어렵다. 

참조 투명성 사례

외부 상태에 의존하면 참조 투명성이 깨질 수 있다.

let multiplier = 2;

function multiply(x) {
  return x * multiplier; // 외부 변수 multiplier에 의존
}

console.log(multiply(5)); // 10
multiplier = 3;
console.log(multiply(5)); // 15 ( 같은 입력에 다른 출력)

 

var c = 3
function sideeffect_type0(a, b) {
  console.log(a + b + c)
}
sideefect_type0(1, 2) // 6
var c = 5
sideefect_type0(1, 2) // 8

 

해결

• 참조 투명성을 유지하려면 함수 내부에서 외부 상태를 참조하지 않아야 한다.

function multiply(x, y) {
  return x * y; // 외부 변수 없이 내부 상태로만 처리
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5, 2)); // 10 (일관된 출력)

function sideeffect_type0(a, b, c) {
  console.log(a + b + c);
}

sideeffect_type0(1, 2, 3); // 6
sideeffect_type0(1, 2, 5); // 8

 

사이드 이펙트(Side effect, 부수효과) 사례

부수 효과가 있는 함수는 외부 상태로 변경하므로 디버깅이 어려워진다.(Difficult to Reason)

var object = {name: 'CheonSang', age: 28}
function sideEffect_type1() {
 object.name = 'CheonHa'
}
sideEffect_type1()
console.log(object)  // { name: 'CheonHa', age: 28 }

1. sideEffect_type1 함수는 함수가 외부 객체 object를 직접 변경하여 Side-Effect를 일으킴.

 

var object = { name: 'CheonSang', age: 28 }
function sideEffect_type2(object) {
  object.name = 'CheonJung'
}
sideEffect_type2(object)
console.log(object)

2. 파라미터를 통해 객체를 전달 받아 `sideEffect_type2` 함수가 객체 `object`의 `name` 속성을 변경하고있다.

앞서 1번보다는 낫지만 여전히 Side-Effect를 일으키고 반환 값 없이 파라미터 객체를 변경하는 것은 너무 명시적이지가 않다.

var object = { name: 'CheonSang', age: 28 }
function sideEffect_type3(object) {
  var copied = object
  copied.name = 'CheonHa'
  return copied
}

var manipulated = sideEffect_type3(object)
console.log(manipulated)
console.log(object)
manipulated == object

3. 2번에서의 너무 명시적이지 않는 문제는 해결되었지만 여전히 파라미터 객체가 바뀌고 바꾼 객체가 파라미터 객체와 동일하다. 여전히 Side-Effect가 발생하는 비순수 함수이다. 외부 상태인 `object`가 변경되므로 함수가 참조 투명성을 가지지 않는다.

 

 

해결

• 함수가 외부 상태를 직접 변경하지 않도록 불변성(Immutability)을 유지한다.

var object = { name: 'CheonSang', age: 28 }
function sideEffect_type3(object) {
  var copied = { ...object }
  copied.name = 'CheonHa' // 복사된 객체의 name 속성만 변경
  return copied
}

var manipulated = sideEffect_type3(object)
console.log(manipulated) // { name: 'CheonHa', age 28 }
console.log(object) // { name: 'CheonSang', age: 28 } (원본 객체는 변경되지 않음)
console.log(manipulated == object) // false (서로 다른 객체)

• `{ ...object }를 사용하여 객체를 얕은 복사 한 후, 복사된 객체의 속성만 변경한다.
• 이제 `manipulated`와 `object`는 서로 다른 객체를 가르키므로 `manipulated == object`는 `false`이다.
• 원본 객체는 변경되지 않고, 새로운 객체만 변경된다.

var object = { name: 'CheonSang', age: 28 }
function no_sideEffect(object) {
  var copied = Object.assign({}, object)
  copied.name = 'CheonHa'
  return copied
}

var manipulated = no_sideEffect(object)
console.log(manipulated)
console.log(object)
manipulated == object

• `Object.assign({}, object)`는 원본 객체의 얕은 복사본을 만든다.
• 복사된 객체 (`copied`)의 `name`속성을 변경했으므로, 원본 객체(`object`)에는 영향을 주지 않는다.
• 원본 객체와 새로운 객체는 서로 다른 참조를 가지므로 `manipulated == object`는 `false`이다.

React에서는 Immutability 불변성이 매우 중요하다.

React가 리렌더를 위한 상태 변경의 기준을 "객체 주소의 변경"으로 인지하기 때문이다.

따라서 불변성을 유지하면 상태가 변경된 경우 새로운 주소를 가르키기 때문에 React는 상태가 변경되었음을 쉽게 감지할 수 있다.

얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy)

• 얕은 복사(Shallow Copy)

얕은 복사는 1계층만 복사(객체의 최상위 속성)하고 그 속성들이 가르키는 참조 타입(객체, 배열)은 동일한 참조를 가진다.

즉, 중첩된 객체나 배열은 원본과 복사본이 동일한 객체를 참조하게 된다.

var object = {
  name: 'CheonSang',
  age: 28,
  address: {
   location: 'Seoul',
  }
}

var shallowCopy = Object.assign({}, object); // 얕은 복사
shallowCopy.name = 'CheonHa'; // 최상위 속성은 복사본에만 영향을 준다.

console.log(object); // { name: 'CheonSang', age: 28, address: { location: 'Seoul' } }
console.log(shallowCopy); // { name: 'CheonHa', age: 28, address: { location: 'Seoul'} }

object.address.location = 'GyeonGi'; // 중첩된 객체는 원본과 복사본이 동일한 참조를 가짐.

console.log(object);  // { name: 'CheonSang', age: 28, address: { location: 'GyeongGi' } }
console.log(shallowCopy);  // { name: 'CheonHa', age: 28, address: { location: 'GyeongGi' } }

 

• 깊은 복사(Deep Copy)

깊은 복사는 모든 계층의 객체를 새로운 객체로 복사하는 방식. 원본 객체와 복사된 객체가 완전히 독립적인 구조를 가지며, 중첩된 객체까지 새로 복사된다.

• 어려운 방법: typeof를 활용한 재귀함수 직접 개발
• 간단한 방법 `JSON.stringify`와 `JSON.parse`를 사용하는 방법: Stringify하여 Object→String으로 만들었다가 다시 역으로 String → Object로 변환

var object = {
  name: 'CheonSang',
  age: 28,
  address: {
    location: 'Seoul',
  }
}

var deepCopy = JSON.parse(JSON.stringify(object)); // 깊은 복사
deepCopy.name = 'CheonHa' // 최상위 속성은 복사본에만 영향을 준다.

console.log(object); // { name: 'CheonSang', age: 28, address: { location: 'Seoul' } }
console.log(deepCopy); // { name: 'CheonHa', age: 28, address: { location: 'Seoul' } }

object.address.location = 'GyeongGi' // 중첩된 객체는 독립적인 참조를 가짐.

console.log(object); // { name: 'CheonSang', age: 28, address: { location: 'GyeongGi' } }
console.log(deepCopy); // { name: 'CheonHa', age: 28, address: { location: 'Seoul' } }

 

---

 

ℹ️참고

[ASAC 6기 강의자료]

 

https://medium.com/@jmprada/mastering-functional-programming-in-javascript-a-guide-to-clean-and-elegant-code-10c99519ef44

Mastering Functional Programming in JavaScript: A Guide to Clean and Elegant Code