>웹 프론트엔드 >프런트엔드 Q&A >JavaScript가 함수형 프로그래밍을 사용하는 이유는 무엇입니까?

JavaScript가 함수형 프로그래밍을 사용하는 이유는 무엇입니까?

青灯夜游
青灯夜游원래의
2022-09-30 15:10:141554검색

이유: 1. js의 구문은 함수형 프로그래밍 언어 Scheme에서 차용되었습니다. 2. 브라우저의 경우 다양한 단일 페이지 프레임워크의 개발로 인해 클라이언트의 처리 기능이 지속적으로 향상되고 클라이언트에 점점 더 많은 비즈니스 로직이 배치되어 점점 더 많은 상태가 생성됩니다. ;계속되는 문제는 조심하지 않으면 외부 변수에 의존하는 수많은 함수를 사용하게 된다는 점입니다. 이러한 함수는 비즈니스 로직에 따라 계속 증가하여 논리적 분기가 급격히 증가하게 됩니다. 상태를 추적하기 어렵고, 코드 가독성이 떨어지고, 유지 관리가 어렵습니다. 함수형 프로그래밍에는 좋은 솔루션이 있습니다.

JavaScript가 함수형 프로그래밍을 사용하는 이유는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

1. 함수형 프로그래밍이란 무엇인가요?

FP라고도 하는 함수형 프로그래밍(FP)은 절차적 프로그래밍(절차적 프로그래밍)과 달리 라이브러리나 프레임워크가 아니라 프로그래밍 패러다임입니다. FP는 순수 함수 추상 데이터 처리를 선언하여 외부 상태 및 시스템에 대한 함수 호출의 부작용을 피하거나 최소화합니다.

소위 부작용에는 일반적으로 함수 외부에서 시스템 상태 변경, 예외 발생, 사용자 작업 처리, 입력 매개 변수 수정, 데이터베이스 쿼리 작업, DOM 작업 등이 포함되며 이로 인해 시스템 오류가 발생할 수 있습니다.

2. JavaScript에서 함수형 프로그래밍 아이디어를 사용하는 이유

2.1 언어 특성의 관점에서

처음 JavaScript의 구문은 함수형 프로그래밍 언어 Scheme에서 차용했습니다. 언어 표준이 발전함에 따라 언어 자체의 기능이 지속적으로 풍부해졌습니다. 클로저, 화살표 함수, 고차 함수, 배열 반복 및 기타 기능을 통해 JavaScript에서 FP를 쉽게 구현할 수 있습니다.

2.1.1. 람다 표현식

람다 표현식은 실제로 화살표를 사용하여 입력과 출력 간의 매핑 관계를 명확하게 표현하는 익명 함수입니다.

const multiply = x => x * x
multiply(6) // 36

2.1.2 고차 함수

고차 함수는 하나 이상의 함수를 입력 매개변수로 받아들이고 함수를 출력할 수 있습니다.

두 가지 간단한 예 작성

const add = x => y => x + y
const add10 = add(10)
add10(5) // 15
const compose = (...fns) => x =>  fns.reduce((acc, fn) => fn(acc), x)
const a = x => x + 1
const b = x => x + 2
const composedFn = compose(a, b)
composedFn(1) // 1 + 1 + 2 = 4

2.1.3 필터 맵 forEach 감소 반복

Array.prototype 아래의 필터 맵 forEach 감소는 입력 매개변수가 함수이기 때문에 모두 고차 함수입니다.

const flatten = (arr = []) => arr.reduce(
  (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val),
  []
)
let arr = [1,[ 4, 5 ], 2, 3];
flatten(arr)  // [1, 4, 5, 2, 3]

2.2 실제 요구 관점에서 보면

브라우저의 경우 다양한 단일 페이지 프레임워크의 개발로 클라이언트의 처리 능력이 지속적으로 향상되고 비즈니스 로직이 점점 더 많이 투입되고 있습니다. 결과적으로 클라이언트는 유지해야 할 상태가 점점 더 많아집니다. 발생하는 문제는 조심하지 않으면 외부 변수에 의존하는 수많은 함수를 사용하게 된다는 점입니다. 이러한 함수는 비즈니스 로직에 따라 계속 증가하여 논리적 분기가 급격히 증가하여 상태를 파악하기 어렵게 됩니다. 추적이 어렵고 코드 가독성이 낮으며 유지 관리가 어렵습니다. FP에는 좋은 솔루션이 있습니다.

또한 이제 주류 프로그래밍 언어에는 기본적으로 함수형 프로그래밍의 기능이 도입되었습니다. 객체 지향 접근 방식으로 유명한 Java조차도 여전히 스트림 + 람다 표현식을 사용하여 함수형 프로그래밍 아이디어를 실천할 수 있으며 Spring5는 심지어 통합합니다. Reactive 주요 셀링포인트로 한마디로 최근 FP가 큰 인기를 끌고 있습니다.

JS의 함수형 프로그래밍 생태계도 지속적으로 풍부해지고 있으며 RxJS 및 CircleJS와 같은 프레임워크가 프런트 엔드 생산 라인에서 점점 더 많이 사용되고 있습니다.

3. 함수형 프로그래밍 사용의 장점

FP 프로그래밍을 사용하면 주로 다음과 같은 장점이 있습니다.

  • 데이터와 처리 로직이 분리되어 코드가 더 간결하고 모듈화되며 읽기 쉽습니다

  • 테스트하기 쉽습니다. , 테스트 환경은 시뮬레이션하기 쉽습니다

  • 논리 코드는 재사용성이 높습니다

4. 함수형 프로그래밍과 관련된 개념

함수형 프로그래밍의 구현은 주로 다음 사항에 의존합니다.

  • 선언문 프로그래밍

  • 순수 함수

  • 불변 데이터

4.1 선언적 프로그래밍

선언적 프로그래밍은 대상의 특성만 설명하므로 형식 논리를 추상화하고 컴퓨터에 필요하다고 알려줍니다. 계산 방법 대신 단계별로 계산하는 방법입니다. 예를 들어 일반, SQL, FP 등이 있습니다.

명령형 프로그래밍 각 단계의 계산 연산을 컴퓨터에 알려줍니다

가장 간단하고 동일한 배열 처리, for 루프를 사용하는 것이 필수적이며 map과 같은 연산을 사용하는 것은 선언적입니다. 선언적 프로그래밍을 사용하면 코드가 단순화되고 재사용이 향상되며 리팩터링을 위한 공간이 확보됩니다.

4.2 순수 함수

순수 함수에 대한 간략한 요약에는 두 가지 특성이 있습니다.

  • 함수의 출력은 입력과만 관련되어 있으며 동일한 입력에 의해 생성된 출력은 일관성이 있으며 외부에 의존하지 않습니다. 조건

  • 함수 호출 함수 도메인 외부의 상태나 변수를 변경하지 않으며 시스템에 부작용이 없습니다

看个简单的例子:

let counter = 0
const increment = () => ++counter
const increment = counter => ++counter

前一个函数每次调用都会修改外部变量的值,返回值也依赖于外部变量;后一个函数对于同一输入值每次返回的结果都相同,并且不会对外部状态造成影响。所以后一个是纯函数。

为什么要追求函数的纯度,这就涉及到一个称为引用透明性的概念。

4.2.1 引用透明性

纯函数的这种函数的返回值只依赖于其输入值的特性,被称为引用透明性(referential transparency),纯函数都是可以进行缓存的。

const memorize(pureFn) {
  const _cache = {}
  return (...args) => {
    const key = JSON.stringify(args)
    return _cache[key] || (_cache[key] = purFu.apply(null, args))
  }
}

4.3 Immutable Data

「可变的全局状态是万恶之源」(其实从功能代码的角度看,局部和全局是相对而言的),简而言之可变状态会让程序的运行变得不可预测,代码可读性差,难以维护。

在 JS 中,当函数入参是对象类型的数据时,我们拿到的其实是个引用,所以即使在函数内部我们也是可以修改对象内部的属性,这种情景依然会产生副作用。

所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable, Immutable data在初始化创建后就不能被修改了,每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变(当然不是简单的深拷贝再修改)。

Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说, immutable-js 一点都不陌生, immutable-js 配合 Redux 就是一种很好的 FP 实践。

const map1 = Immutable.Map({a:1, b: {d:2}, c:3});
const map2 = map1.set('a', 50);
map1 === map2 // false
const mapb1 = map1.get('b')
const mapb2 = map2.get('b')
mapb1===mapb2 // true

【相关推荐:javascript视频教程编程视频

위 내용은 JavaScript가 함수형 프로그래밍을 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.