[JavaScript] JS 함수형 프로그래밍 3단계로 설명하기

이인송·2021년 6월 20일
0
post-thumbnail

SOPT 동아리를 시작하면서, 생각보다 많은 분들이 꾸준히 블로그 글을 적고 계신걸 봤다!
노션에 쌓아놓기한 reference 와 내가 나름 정리한 내용을 이제는 그만 미루고
내용을 이해했다면 블로그에 기록하는 습관을 가지려고 한다 :)

함수형 프로그래밍

함수형 프로그래밍은 프로그래밍 패러다임 중 하나이다.
프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하고 결정하는 역할을 한다

일단 프로그래밍 패러다임은 크게 두 가지로 나뉠 수 있다.

  • 명령형 프로그래밍 : 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명한다.
    - 절차지향 프로그래밍 : 수행되어야할 연속적인 계산 과정을 포함하는 방식이다.
    ex) C, C++
    - 객체지향 프로그래밍 : 객체들의 집합으로 프로그램의 상호작용을 표현한다.
    ex) C++, Java, C#
  • 선언형 프로그래밍 : 무엇을 할것인지를 설명하는 방식이다
    - 함수형 프로그래밍 : 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 하스켈, 리스프)

명령형 프로그래밍은 알고리즘을 명시하고 목표는 명시하지 않지만
선언형 프로그래밍은 알고리즘을 명시하지 않고 목표만 명시한다는 특징을 갖는다!

함수형 프로그래밍은 순수 함수, 불변성, 선언적 패턴

순수 함수

어떠한 함수를 순수하다고 할 수 있을까?
다음 2가지 특징을 갖는다고 할 수 있다

  1. 동일한 입력에 대해 동일한 출력을 반환한다
    2.부작용(sideEffect)이 없다

즉, 순수 함수는 입력과 출력을 매핑시킬 수 있으며,
함수의 호출 코드와 함수의 정의 코드는 인자와 반환 값을 통해서만 서로 통신할 수 있다!

다음 예시를 통해 순수 함수에 대해 조금 더 알아보자!

// 순수하지 않다 (반환값 없이 부가 효과를 이용하고 있다)
functionaddTaco(array){
   array.push("taco");
}

// 순수하지 않다 (인자 대신 공유 변수를 이용하고 있다)
functionaddTaco(){
   return [...globalArray, "taco"];
}

// 순수하다!
functionaddTaco(array){
   return [...array, "taco"];
}

이러한 이유로 순수 함수는 예측이 가능하고, 디버그와 테스트가 쉽다!

순수함수의 참조 투명성referentially transparent 덕분에, 함수 결과를 캐싱하여 반복적으로 사용 할 수 있는 메모이제이션memoization 최적화 기법이 사용 가능하다.

모든 함수가 순수할 수는 없지만, 순수 함수는 함수가 다룰 수 있는 영역을 더 넓히고 핵심을 간단하게 유지할 수 있다는 장점이 있다!

불변성 (immutability)

JavaScript에서 모든 원시 자료형(boolean, string 등)은 불변하다.
객체나 배열의 경우는 그렇지 않지만, 이들 역시 마치 그런 것 처럼 다룰 수 있다.
불변한 객체나 배열은 만들어진 후에는 더 이상 수정 할 수 없다.

만약, 수정이 하고 싶다면 복제해서 새로운 변수에 할당해야 한다.

// mutable
const bands = ["Metallica", "Queen"];
bands.push("Nirvana");

// immutable
const someBands = ["Metallica", "Queen"];
const bands = [...someBands, "Nirvana"];

오직 단 하나의 상태만을 가지고 있기 때문에, 불변한 객체나 배열은 그 내용을 변경해서 무효화 시킬 수가 없고 이로 인해 부작용을 막을 수 있다.

불변 데이터는 스레드로부터 안전(thread-safe)하고 오류에 대해 국소적(failure atomic) 이다.

불변 객체나 배열은 “변경” 여부를 알아내기 위해 깊은deep 비교를 할 필요가 없다. 단지 참조에 대한 검사만 해도 되기 때문에, 효율적으로 상태를 관리해야 하는 상황(예를 들어, React 애플리케이션)에서 빠른 변경 감지를 가능하게 하는 주요 역할을 한다.

Reference

함수형 프로그래밍 요약

조금 더 공부하고 싶은 내용

클로져 : React 의 setState 와도 관련이 있다는데 꼭 개념을 이해하고 정리하자!
부작용 (sideeffect) : 클로져 글을 읽었을 때 봤던거 같은데 다시 한 번 찾아보고 정리하자!
parameter 와 argument : 항상 헷갈리는데 이제는 조금 외워야할 때가 온거 같다!
참조 투명성, 캐싱, 메모이제이션 : 처음 들어본다,, 공부하자!
스레드로부터 안전 : 스레드 많이 들어봤는데 공부하자!
참조에 대한 검사 : 하는 방법이 궁금하다!

profile
프론트 엔드와 심리학을 공부하는 대학생입니다 :)

0개의 댓글