자바스크립트 기본, 심화 문법 및 엔진 동작 원리(1) - 함수형 프로그래밍 패러다임(순수함수, 얕은복사, 깊은복사)

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

자바스크립트의 핵심은 함수(함수형 프로그래밍 패러다임) 와 객체(객체지향 프로그래밍 패러다임)이다.

자바스크립트 개발자가 제대로 개발하기 위해서는 함수형 프로그래밍에 대해 완전히 이해해야한다.

• 물론 자바스크립트 개발자도 객체지향을 완전히 이해해야한다. (우테코 자바스크립트 과제에서 객체지향 강조)

일급함수

함수를 변수, 파라미터, 반환으로 사용될 수 있다.

순수 함수

Thread-Safe: No Side Effects ⊂ 참조 투명성

순수 함수 특징

1. 참조 투명성(Referentially Trannsparent) : 함수가 외부 상태에 의존하지 않는다.
   • 같은 파라미터에 같은 반환값
2. 부수 효과 없음(No Side-Effects): 함수가 외부 상태를 변경하지 않는다.
   • 부수효과 없음 사례: 멀티 스레드에서 외부 상태를 서로 바꾸는 상황

[순수함수가 중요한 부분]

Thread-Safe

• 멀티스레드를 활용한 개발 시 순수함수 특성은 매우 중요
• 병렬적으로 수행되는 모든 함수들은 서로에게 영향을 주어선 안되고, 외부의 값을 변경해서도 안된다.
• 하나의 작업을 여러개로 나누어 수행한 뒤 합쳤을 때, 하나의 작업을 한번에 수행했을 때와 같은 결과여야한다.

함수형 프로그래밍

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

 

순수함수의 장점(Medium 글)

1. Testability 테스트 가능: 일전한 값(파라미터)에 일정한 값(반환값)이 나온다면, 유닛 테스트 용이
2. Debugging 디버깅 가능: 문제가 생기는 함수만 보면 문제가 해결된다.
3. Memoziation: 메모이제이션 가능: 캐싱 가능

 

비순수함수의 단점

1. Side Effect: 부수효과 발생
2. Unpredictable Output: 예상치 못한 결과
3. Difficult to Reason: 디버깅 및 프로그램 흐름 분석이 어려워짐

---

Side Effect 해결 방법

Immutability 불변 객체 사용: 파라미터는 외부 상태이기에 변경이 없어야한다.

이 말은 즉, 무조건 새로운 값이 반환되어야한다는 의미

• 메모리가 부족하지 않을까 생각할 수 있지만, 파라미터로 가진 객체를 다른 사람이 사용할 때 해당 객체가 어떤 방식으로든 바뀔것이라고 가정하게끔 두어서는 안된다.
• 극단적으로는 자바스크립트에서 사용하는 모든 객체는 Object.freeze() + const 사용하는게 좋다.

React에서 불변성은 매우 중요

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

---

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

얕은 복사

`object.assign()`은 얕은복사(Shallow Copy)에 해당

얕은 복사는 1계층만 복사: 아래 예시를 보면 Earth -> Moon을 바꾸었으나 모두에서 변경

• 객체의 주소 값이 동일하다

깊은 복사

모든 계층의 복사

• 새로운 객체를 만들어서 객체의 주소값이 다르다.

 

객체 내 객체, 배열은 어떻게 복사할 것인가?

1. 어려운 방법: `typeof` 을 활용한 재귀 함수 직접 개발
2. 쉬운 방법: `Stringify` 하여 Object -> String으로 만들었다가 다시 역으로 String -> Object 변환