[JavaScript] 함수 ( 선언 ) 형 프로그래밍

2022. 5. 17. 12:57·JavaScript
반응형

함수형 프로그래밍? 

 

함수를 다른 함수의 파라미터로 넘길 수 있고, return 값으로 함수를 받을 수 있는 프로그래밍 형태이다. 

// 명령형
function double (arr) {
  let results = []
  for (let i = 0; i < arr.length; i++){
    results.push(arr[i] * 2)
  }
  return results
}

function add (arr) {
  let result = 0
  for (let i = 0; i < arr.length; i++){
    result += arr[i]
  }
  return result
}

// 함수형
function double (arr) {
  return arr.map((item) => item * 2)
}

function add (arr) {
  return arr.reduce((prev, current) => prev + current, 0)
}

 

함수형 프로그래밍의 특징 

1. 순수 함수 ( Pure Function )

  • 동일한 입력에는 항상 값은 값을 반환해야 하는 함수
  • 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 하는 함수
  • 함수 내에서 인자 값을 변경하거나 프로그램 상태를 변경하는 Side Effect가 없는 것
let num = 1;

function add(a) {
    return a + num;   // 전역 변수 수정
}

add라는 함수 내에서 전역으로 선언된 num을 참조하기 때문에 순수 함수라고 볼 수 없다. 

 

function add(a, b) {
    return a + b;      // 전역 변수 없이 사용
}

const result = add(2, 3);

add가 프로그램 실행에 영향을 미치지 않고 입력 값에 대해서만 값의 변환이 있으므로 순수 함수이다. 

 

2. 비상태, 불변성 ( Stateless, Immutability )

  • 함수형 프로그래밍에서의 데이터는 변하지 않는 불변성을 유지해야 한다.
  • 데이터의 변경이 필요한 경우, 원본 데이터 구조를 변경하지 않고 데이터의 복사본을 만들어 일부를 변경하고, 
    변경한 복사본을 사용해 작업을 진행한다. 
let person = { name: "jongmin", age: "26" };

function increaseAge(person) {
    person.age = person.age + 1;         // 전역 변수 속성 변경
    return person;
}

increaseAge 함수에서 전역으로 선언된 person의 age 속성을 변경하므로 불변성 유지를 만족하지 못한다. 

 

const person = { name: "jongmin", age: "26" };

function increaseAge(person) {
    return { ...person, age: person.age + 1 };  // 복사본을 만들어서 작업
}

전역으로 선언된 person의 복사본을 만들어서 age를 수정 후 새로운 객체를 반환한다. 

 

3. 선언형 함수 ( Expressions )

let numbers = [1, 2, 3];

function multiply(numbers, multiplier) {
    for (let i = 0; i < numbers.length; i++) {
        numbers[i] = numbes[i] * multiplier;
    }
}

for 문을 사용해서 배열의 각 요소에 multiplier를 곱해주는 명령형 프로그래밍이다. 

 

function multiply(number, multiplier) {
    return number.map((num) => num * multiplier);
}

함수형 프로그래밍에서는 if, switch, for 등 명령문을 사용하지 않고 함수형 코드를 사용한다. 

 

for문을 map으로 변경, JavaScript에서는 filter, map, take, reduce 등의 함수형 코드를 사용한다. 

 

함수형 프로그래밍의 장단점

장점 

  1. 높은 수준의 추상화를 제공한다. 
  2. 함수 단위의 코드 재사용이 수월하다
  3. 불변성을 지향하기 때문에 프로그램 동작을 예측하기 쉬워진다. 

단점

  1. 순수 함수를 구현하기 위해서 코드의 가독성이 좋지 않을 수 있다.
  2. 함수형 프로그래밍에서 반복이 for문이 아닌 재귀를 통해 이뤄지는데, 재귀적 코드는 무한 루프에 빠질 수 있다.
  3. 순수 함수를 사용하는 것은 쉬울 수 있지만 조합하는 것은 쉽지 않다. 

명령형 프로그래밍 vs 함수형( 선언형 ) 프로그래밍 

지금까지 함수형 프로그래밍을 알아봤다. 

그렇다면 명령형 프로그래밍은 어떤 걸까? 

 

일반적으로 명령형 프로그래밍은 함수형 프로그래밍의 반대되는 개념이다. 

어떤 방법으로 작업을 수행할 것인지에 중점을 둔 방식으로, 알고리즘을 명시하지만 목표는 명시하지 않는다. 

 

한마디로 프로그램이 수행할 명령어들을 순서대로 써 놓은 것이다. 또한 정답(목표)에 도달하기 위해서 

제어문을 사용해서 제어의 흐름을 변경한다. 

 

작업을 진행할 때 무엇을 할지 세세하게 지정한다. 

function double(arr) {
    let result = [];
    
    for(let i = 0; i < arr.length; i++ ) {
    	result.push(arr[i] * 2)
    }	
	
    return result;
}

 

반대로 함수형 프로그래밍은 무엇인가를 작업하기 위한 방법을 정의하는 것을 의미한다. 

제어 흐름을 설명하지 않고 계산 논리에 집중하는 프로그래밍 패러다임이다. 

 

결과만 기술하고 어떻게는 기술하지 않는 의도에 집중한 프로그래밍 방법이다. 

function double(arr) {
	return (arr.map(x => x * 2));
}
반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] 콜스택  (1) 2022.06.04
[JavaScript] 제너레이터와 이터레이터  (4) 2022.05.20
[JavaScript] ES6에서의 순회와 이터러블  (2) 2022.05.19
[JavaScript] 고차 함수 ( Higher-Order Function )  (2) 2022.05.18
[JavaScript] for문과 forEach문 차이  (0) 2022.04.25
'JavaScript' 카테고리의 다른 글
  • [JavaScript] 제너레이터와 이터레이터
  • [JavaScript] ES6에서의 순회와 이터러블
  • [JavaScript] 고차 함수 ( Higher-Order Function )
  • [JavaScript] for문과 forEach문 차이
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    바질 키우기
    CSS
    Docker
    영어독학
    Babel
    리얼학습일기
    CCNA
    다이소
    타입스크립트
    영어회화
    알고리즘
    리액트
    redux
    ChatGPT
    react
    next.js
    바질
    ReactNative
    타일러영어
    네이버 부스트캠프
    식물
    Node.js
    덤프
    webpack
    네트워크
    javascript
    자바스크립트
    리얼클래스
    typescript
    프로그래머스
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[JavaScript] 함수 ( 선언 ) 형 프로그래밍
상단으로

티스토리툴바