JAVASCRIPT · 심층 가이드

JavaScript 함수형 완전 정리

compose와 curry부터 Maybe·Result 스타일 처리까지, 라이브러리 없이 순수 JavaScript로 함수형 기법을 조립하는 15편의 실전 코드입니다.

주제 15개 · 예제 코드 포함 · 최종 수정 2026-08-30 · 작성 pullh 편집팀

함수형 스타일이 JavaScript에서 특히 자연스러운 이유는 함수가 값이고 클로저가 언어에 내장돼 있기 때문입니다. 다만 타입 시스템이 없어서 Haskell이나 Rust처럼 컴파일러가 대신 확인해 주지 않습니다. 불변성도 관례일 뿐이라 const로 선언한 배열의 내용은 얼마든지 바뀝니다. 결국 규율을 코드 형태로 강제해야 하고, 그 형태를 익히는 것이 이 묶음의 목적입니다.

순수 함수와 불변 업데이트가 토대이고, compose·partial 적용·curried 함수는 같은 아이디어를 세 각도에서 본 것입니다. 인자를 나눠 받는 curry가 있어야 compose에 넣을 단항 함수가 만들어지고, 그 조각들이 pipeline으로 이어집니다. Maybe 스타일 처리와 Result 스타일 매핑은 null과 예외를 값으로 다루는 방식입니다.

실무에서 발목을 잡는 것은 대개 성능이 아니라 얕은 복사입니다. 스프레드 연산자로 만든 사본은 한 겹만 새것이라, 중첩 객체를 그대로 물고 갑니다. 최신 런타임에는 structuredClone이 있지만 함수나 클래스 인스턴스는 복제하지 못합니다. 또 lazy iterator를 제너레이터로 만들면 한 번 소비된 이터레이터는 재사용이 불가능하다는 점을 놓치기 쉽습니다. 두 번 순회할 계획이라면 배열로 실체화해 두는 편이 안전합니다.

01순수 함수

JavaScript에서 순수 함수 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// 순수 함수
const addTax = (price) => price * 1.1;
console.log(addTax(10));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

02불변 업데이트

JavaScript에서 불변 업데이트 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// 불변 업데이트
const state = { page: 1, tags: ["x"] };
const next = { ...state, page: state.page + 1, tags: [...state.tags, "y"] };
console.log(next);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

03Maybe 스타일 처리

JavaScript에서 Maybe 스타일 처리 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// Maybe 스타일 처리
const steps = [(value) => value + 1, (value) => value * 2];
console.log(steps.reduce((value, step) => step(value), 3));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

04Result 스타일 매핑

JavaScript에서 Result 스타일 매핑 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// Result 스타일 매핑
function* numbers() { yield 1; yield 2; yield 4; }
console.log([...numbers()]);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

05fold 합계

JavaScript에서 fold 합계 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// fold 합계
const addTax = (price) => price * 1.1;
console.log(addTax(50));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

06compose

JavaScript에서 compose 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// compose
const state = { page: 1, tags: ["x"] };
const next = { ...state, page: state.page + 1, tags: [...state.tags, "y"] };
console.log(next);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

07partial 적용

JavaScript에서 partial 적용 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// partial 적용
const steps = [(value) => value + 1, (value) => value * 2];
console.log(steps.reduce((value, step) => step(value), 7));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

08curried 함수

JavaScript에서 curried 함수 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// curried 함수
function* numbers() { yield 1; yield 2; yield 8; }
console.log([...numbers()]);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

09pipeline

JavaScript에서 pipeline 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// pipeline
const addTax = (price) => price * 1.1;
console.log(addTax(90));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

10lazy iterator

JavaScript에서 lazy iterator 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// lazy iterator
const state = { page: 1, tags: ["x"] };
const next = { ...state, page: state.page + 1, tags: [...state.tags, "y"] };
console.log(next);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

11패턴 분기

JavaScript에서 패턴 분기 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// 패턴 분기
const steps = [(value) => value + 1, (value) => value * 2];
console.log(steps.reduce((value, step) => step(value), 11));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

12reducer 상태 누적

JavaScript에서 reducer 상태 누적 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// reducer 상태 누적
function* numbers() { yield 1; yield 2; yield 12; }
console.log([...numbers()]);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

13all predicate

JavaScript에서 all predicate 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// all predicate
const addTax = (price) => price * 1.1;
console.log(addTax(130));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

14flatMap

JavaScript에서 flatMap 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// flatMap
const state = { page: 1, tags: ["x"] };
const next = { ...state, page: state.page + 1, tags: [...state.tags, "y"] };
console.log(next);

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

15함수 값을 반환하는 함수

JavaScript에서 함수 값을 반환하는 함수 개념을 코드로 빠르게 확인하는 함수형 예제입니다.

JavaScript code

// 함수 값을 반환하는 함수
const steps = [(value) => value + 1, (value) => value * 2];
console.log(steps.reduce((value, step) => step(value), 15));

알아두면 좋은 점

함수형 예제는 입력과 출력이 분명할수록 재사용과 테스트가 쉬워진다는 점이 핵심입니다.

자주 하는 실수

원본 데이터를 직접 바꾸기 시작하면 함수형 스타일의 장점이 크게 줄어듭니다.

정리하며

compose에 넣을 조각은 curry나 partial로 단항 함수로 만들어 둡니다
스프레드 복사는 한 겹만 새것이므로 중첩 구조는 경로별로 갱신합니다
제너레이터 기반 lazy 시퀀스는 일회용이니 재사용 전에 배열화합니다
Maybe와 Result는 null 체크와 try 블록을 값 흐름으로 바꿔 줍니다

더 깊이 들어가고 싶다면 JavaScript 학습 라이브러리에서 다른 주제 가이드를 이어서 보거나, 언어 비교에서 같은 개념이 다른 언어에서 어떻게 표현되는지 확인해 보세요.