The Codest
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 산업 분야
    • 핀테크 및 뱅킹
    • E-commerce
    • 애드테크
    • 헬스 테크
    • 제조
    • 물류
    • 자동차
    • IOT
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
뒤로 화살표 뒤로 가기
2022-06-07
소프트웨어 개발

JavaScript의 기능 프로그래밍 파트 2 - 결합기

The Codest

파웰 게드

Vue.js 개발자

이번 글은 JavaScript의 함수형 프로그래밍의 힘을 다룬 시리즈 글의 두 번째 파트입니다. 이 글을 확인하여 결합기에 대한 지식을 넓혀보세요.

결합기 소개

결합자는 함수, 변수 또는 다른 결합자를 결합할 수 있는 상위 수준의 함수입니다. 일반적으로 자체 변수나 비즈니스 로직에 대한 선언은 포함하지 않습니다. 함수 프로그램에서 컨트롤을 플러시하는 유일한 함수입니다.

이 글에서는 그 중 몇 가지를 다루려고 합니다:

  • 탭
  • 카레
  • 파이프/컴포지션
  • 포크
  • 교대
  • 시퀀스

탭

결합기는 아무것도 반환하지 않는 함수에 매우 유용합니다. 매개변수가 전달되는 함수를 취한 다음 반환합니다.

선언

const tap = (fn) => (value) => {
fn(value);
반환 값;
};

필수 예제

const [items, setItems] = useState(() => [])

axios
.get('http://localhost')
.then({ data } => {
setItems(data)
console.log(data)
onLoadData(data)
}).then(...) // 정의되지 않은 반환 - 프라미스의 데이터가 수정되었습니다.

선언적 예제

const [items, setItems] = useState(() => [])

axios
.get('http://localhost')
.then(({ 데이터 }) => 데이터)
.then(tap(setItems)) // (data) => { setItems(data); return data }
.then(tap(console.log)) // 하나의 그때 = 하나의 함수 = 하나의 책임
.then(tap(onLoadData))
.then(...) // 여전히 원본 데이터에 액세스 가능
// 열기/닫기 원칙을 쉽게 유지

카레

함수의 인수를 분할하여 순차적으로 호출할 수 있도록 합니다.

선언

const curry = (fn) => {
const curry = (...args) => {
if (fn.length !== args.length){
return curried.bind(null, ...args)
}
return fn(...args);
};

return curried

};


예

const curry = (fn) => {
const curry = (...args) => {
if (fn.length !== args.length){
return curried.bind(null, ...args)
}
return fn(...args);
};

return curried

};
const sum = (a, b, c) => a + b + c

const currySum = curry(sum)
/*
가능한 호출
currySum(a)(b)(c),
currySum(a)(b,c),
currySum(a,b)(c),
currySum(a,b,c)
*/

currySum(1) // (b, c) => 1 + a + b 또는 (b) => (c) => 1 + a + b
currySum(5)(10) // (c) => 5 + 10 + b
currySum(5, 10) // (c) => 5 + 10 + b
currySum(5)(10)(20) // 35
currySum(5, 10)(20) // 35
currySum(5)(10, 20) // 35

const divideBy = curry((a, b) => b / a)
const multiplyBy = curry((a, b) => a * b)

const divideByTwo = divideBy(2)
divideByTwo(10) // 5를 반환합니다.

const multiplyByFive = multiplyBy(5)
multiplyByFive(10) // 50을 반환합니다.

파이프/컴포지션

구성을 통해 한 함수에서 다른 함수로 데이터를 전달할 수 있습니다. 함수에 동일한 수의 인수를 사용하는 것이 중요합니다. 파이프와 컴포지션의 차이점은 파이프는 함수를 처음부터 마지막까지 실행하고 컴포지션은 마지막부터 호출한다는 점입니다.

선언

const pipe = (...fns) => (value, ...args) =>.
fns.reduce((v, f, i) => =>
i === 0
? f(v, ...args)
: f(v),
value);

const compose = (...fns) => (value, ...args) =>.
fns.reduceRight((v, f, i) => =>
i === (fns.length - 1)
? f(v, ...args)
: f(v),
value);
const pipe = (...fns) => (value, ...args) =>.
fns.reduce((v, f, i) => =>
i === 0
? f(v, ...args)
: f(v),
value);

const compose = (...fns) => (value, ...args) =>.
fns.reduceRight((v, f, i) => =>
i === (fns.length - 1)
? f(v, ...args)
: f(v),
value);

필수 예제

const sine = (val) => Math.sin(val * Math.PI / 180) // 읽을 수 없음
 sine(90) // 1 반환

선언적 예제

const 사인 = 파이프(
multiplyBy(Math.PI) // ↓ val * Math.PI
divideBy(180), // ↓ val * Math.PI / 180
Math.sin, // ↓ Math.sin(val * Math.PI / 180)
)

const sine = compose(
Math.sin, // ↑ Math.sin(val * Math.PI / 180)
divideBy(180), // ↑ val * Math.PI / 180
multiplyBy(Math.PI) // ↑ val * Math.PI
)

sine(90) // 반환값 1

포크

포크 결합기는 값을 두 가지 방식으로 처리하고 그 결과를 결합하려는 경우에 유용합니다.

선언

const fork = (join, fn1, fn2) => (value) => join(fn1(value), fn2(value));

예

const length = (array) => array.length
const sum = (array) => array.reduce((a, b) => a + b, 0)
const divide = (a, b) => a / b

const arithmeticAverage = 포크(divide, sum, length)

arithmeticAverage([5, 3, 2, 8, 4, 2]) // 4를 반환합니다.

교대

이 결합기는 두 개의 함수를 취하고 참이면 첫 번째 함수의 결과를 반환합니다. 그렇지 않으면 두 번째 함수의 결과를 반환합니다.

선언

const alt = (fn, orFn) => (값) => fn(값) || orFn(값)

예

const users = [{
uuid: '123e4567-e89b-12d3-a456-426655440000',
name: 'William'
}]

const findUser = ({ uuid: searchesUuid }) =>.
users.find(({ uuid }) => uuid === searchesUuid)

const newUser = data => ({ ...data, uuid: uuid() // 새 uuid 생성 })

const findOrCreate = alt(findUser, newUser)

findOrCreate({ uuid: '123e4567-e89b-12d3-a456-426655440000' }) // 윌리엄 객체를 반환합니다.
findOrCreate({ name: 'John' }) // 새 uuid를 가진 John 객체를 반환합니다.

시퀀스

이 함수는 많은 독립 함수를 허용하고 각 함수에 동일한 매개변수를 전달합니다. 일반적으로 이러한 함수는 값을 반환하지 않습니다.

선언

const seq = (...fns) => (val) => fns.forEach(fn => fn(val))

예

const appendUser = (id) => ({ name }) => {
document.getElementById(id).innerHTML = name
}

const printUserContact = pipe(
findOrCreate, // 사용자 반환
seq(
appendUser('#contact'), // user => void
console.log, // user => void
onContactUpdate // 사용자 => void
)
)

printUserContact(userData)
협력 배너

관련 문서

상승하는 화살표와 비용 효율성 또는 절감을 상징하는 금화가 있는 하락하는 막대 차트의 추상적인 그림. 밝은 회색 바탕에 "In Code We Trust"라는 슬로건과 함께 왼쪽 상단에 The Codest 로고가 표시됩니다.
소프트웨어 개발

제품 품질 저하 없이 개발팀을 확장하는 방법

개발팀을 확장하고 계신가요? 제품 품질을 저하시키지 않고 성장하는 방법을 알아보세요. 이 가이드에서는 확장할 시기의 징후, 팀 구조, 채용, 리더십 및 도구와 더불어 The Codest가 어떻게...

최신
소프트웨어 개발

미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트

The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...

최신
소프트웨어 개발

라트비아에 본사를 둔 10대 소프트웨어 개발 기업

최신 기사에서 라트비아 최고의 소프트웨어 개발 기업과 그들의 혁신적인 솔루션에 대해 알아보세요. 이러한 기술 리더들이 어떻게 귀사의 비즈니스를 향상시키는 데 도움을 줄 수 있는지 알아보세요.

thecodest
엔터프라이즈 및 스케일업 솔루션

Java 소프트웨어 개발 필수 사항: 성공적인 아웃소싱을 위한 가이드

The Codest로 효율성을 높이고 전문 지식을 활용하며 프로젝트 성공을 이끌 수 있는 성공적인 outsourcing Java 소프트웨어 개발에 대한 이 필수 가이드를 살펴보세요.

thecodest
소프트웨어 개발

폴란드 아웃소싱을 위한 최고의 가이드

폴란드에서 outsourcing가 급증한 것은 경제, 교육, 기술 발전으로 인한 IT 성장과 비즈니스 친화적인 환경이 조성된 덕분입니다.

더코데스트

지식창고를 구독하고 IT 분야의 전문 지식을 최신 상태로 유지하세요.

    회사 소개

    The Codest - 폴란드에 기술 허브를 둔 국제 소프트웨어 개발 회사입니다.

    영국 - 본사

    • 사무실 303B, 182-184 하이 스트리트 노스 E6 2JA
      영국 런던

    폴란드 - 현지 기술 허브

    • 파브리츠나 오피스 파크, 알레야
      포코주 18, 31-564 크라쿠프
    • 뇌 대사관, 콘스트럭터스카
      11, 02-673 바르샤바, 폴란드

      The Codest

    • 홈
    • 회사 소개
    • 서비스
    • Case Studies
    • 방법 알아보기
    • 채용 정보
    • 사전

      서비스

    • IT 자문
    • 소프트웨어 개발
    • 백엔드 개발
    • 프론트엔드 개발
    • Staff Augmentation
    • 백엔드 개발자
    • 클라우드 엔지니어
    • 데이터 엔지니어
    • 기타
    • QA 엔지니어

      리소스

    • 외부 소프트웨어 개발 파트너와의 협력에 대한 사실과 오해
    • 미국에서 유럽으로: 미국 스타트업이 유럽으로 이전을 결정하는 이유
    • 테크 오프쇼어 개발 허브 비교: 테크 오프쇼어 유럽(폴란드), 아세안(필리핀), 유라시아(터키)
    • CTO와 CIO의 주요 과제는 무엇인가요?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • 웹사이트 이용 약관

    저작권 © 2025 by The Codest. 모든 권리 보유.

    ko_KRKorean
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese es_ESSpanish nl_NLDutch etEstonian elGreek ko_KRKorean