JavaScript를보다 기능적으로 만드는 5 가지 방법

이 기사는 기능 프로그래밍 개념을 간단히 소개하고 JavaScript 코드의 기능적 스타일을 개선하는 5 가지 방법을 설명합니다.

코어 포인트

기능 프로그래밍은 명령 목록이 아닌 함수와 응용 프로그램을 사용하는 프로그래밍 패러다임입니다. 그것은 더 추상적이며 수학에서 시작되었습니다. JavaScript는 기능이 첫 번째 유형의 객체이기 때문에 기능 프로그래밍에 특히 적합합니다. 순수 함수는 기능 프로그래밍의 핵심 부분입니다. 같은 인수가 주어지면 항상 동일한 값을 반환하고 함수의 범위를 벗어난 것을 변경하지 않습니다. 코드를 쉽게 포트하고 테스트 할 수 있습니다.

기능 프로그래밍에서 변수는 변경되지 않아야합니다. 변수를 설정 한 후에는 프로그램 전체에서 해당 상태가 유지되어야합니다. 이것은 항상

를 사용하여 변수를 선언함으로써 달성 할 수 있습니다.
• JavaScript의 기능 프로그래밍에서 화살표 기능과 3 배 연산자를 사용하는 것이 좋습니다. 화살표 함수에는 암시 적 반환 값이있어 입력-출력 매핑을 시각화하는 데 도움이됩니다. 3 대 연산자는 항상 값을 반환하는 표현식이므로 반환 값이 존재하는지 확인하는 것이 유용합니다.
• 기능 프로그래밍에서 루프 사용은 돌연변이 상태에 의존하기 때문에 피해야합니다. 대신 재귀 및 고차 배열 방법을 사용해야합니다. 또한 유형 일관성을 유지하려면 유형 강요를 피해야합니다. 기능을 선언하기 전에 유형 선언 주석을 작성하여 수행 할 수 있습니다.
• const 기능적 프로그래밍이란 무엇입니까?
기능적 프로그래밍은
• 명령 프로그래밍 언어에 사용 된 명령 목록이 아닌 함수 및 응용 프로그램을 사용하는 프로그래밍 패러다임입니다.
이것은 수학에 뿌리를두고있는 더 추상적 인 프로그래밍 스타일입니다. 그것은 한 표현을 다른 표현에 매핑하는 표현과 기능으로 구성됩니다. 기본적으로 이것은 기능 프로그래밍에서하는 일입니다. 함수를 사용하여 값을 다른 값으로 변환합니다.
• 이 기사의 저자는 최근 몇 년 동안 기능 프로그래밍과 사랑에 빠졌습니다. 우리는보다 기능적인 스타일을 장려하는 JavaScript 라이브러리를 사용하기 시작한 다음 Haskell에서 코드를 작성하는 방법을 배우면서 깊은 물로 바로 뛰어 들었습니다. for Haskell은 Scala 및 Clojure와 유사하게 1990 년대에 개발 된 순전히 기능적인 프로그래밍 언어입니다. 이러한 언어를 사용하면 기능적 스타일로 인코딩해야합니다. Haskell 학습은 우리에게 기능 프로그래밍의 모든 이점에 대한 진정한 이해를 제공합니다.
JavaScript는 다중 파라 디그 언어입니다. 명령 적, 객체 지향적 또는 기능적 스타일로 프로그래밍하는 데 사용할 수 있기 때문입니다. 그러나 함수는 일류 개체이기 때문에 기능 스타일에 특히 적합합니다. 이는 변수에 할당 할 수 있음을 의미합니다. 이는 또한 기능이 다른 함수 (일반적으로 콜백이라고 함)에 대한 인수 또는 다른 함수의 반환 값으로 전달 될 수 있음을 의미합니다. 매개 변수로 다른 함수를 반환하거나 다른 함수를 수용하는 함수를 고차 함수라고하며 기능 프로그래밍의 기본 부분입니다.

최근 몇 년 동안 기능적 스타일로 JavaScript를 프로그래밍하는 것이 특히 React의 부상 후 점점 인기를 얻고 있습니다. React는 기능적 방법에 적합한 선언적 API를 사용하므로 기능적 프로그래밍 원칙을 확실하게 파악하면 React 코드가 향상됩니다.

기능적 프로그래밍이 왜 그렇게 우수합니까?

요컨대, 기능적 프로그래밍 언어는 종종 코드가 간결하고 명확하며 우아하게 이어집니다. 이 코드는 일반적으로 테스트하기 쉽고 문제없이 다중 스레드 환경에서 실행할 수 있습니다.

여러 다른 프로그래머와 대화하면, 모든 사람의 기능 프로그래밍에 대해 완전히 다른 의견을 얻을 수 있습니다. 우리 (이 기사의 저자)는 "Love It"의 측면에 있지만, 특히 우리가 일반적으로 가르치는 방식과는 매우 다르기 때문에 모든 사람의 요리가 아니라는 것을 완전히 이해합니다. 그러나 일단 기능 프로그래밍을 마스터하고 일단 사고 프로세스가 클릭되면 두 번째 특성이되어 코드를 작성하는 방식이 변경됩니다.

규칙 1 : 함수를 정화하십시오
기능 프로그래밍의 핵심 부분은 작성한 기능이 "순수"인지 확인하는 것입니다. 이 용어에 익숙하지 않은 경우, 순수한 기능은 기본적으로 다음 조건을 충족합니다.

인용 투명성이 있습니다. 이것은 동일한 인수가 주어지면 함수는 항상 동일한 값을 반환한다는 것을 의미합니다. 모든 함수 호출은 반환 값으로 대체 될 수 있으며 프로그램은 여전히 ​​동일한 방식으로 실행됩니다.

부작용이 없습니다. 이것은 함수가 함수의 범위를 벗어난 것을 변경하지 않음을 의미합니다. 여기에는 글로벌 가치 변경, 콘솔 기록 또는 DOM 업데이트가 포함될 수 있습니다.

Pure Function 에는 하나 이상의 매개 변수가 있어야하며 는 값을 반환해야합니다. 신중하게 생각하면 매개 변수를 허용하지 않으면 사용할 데이터가 없으며 값을 반환하지 않으면 기능의 요점은 무엇입니까?

순수 함수는 처음에는 완전히 필요하지 않을 수 있지만 불순한 기능을 사용하면 프로그램의 전반적인 변화가 발생하여 심각한 논리적 오류가 발생합니다!
예 :
불순한 함수에서 함수는 변수 변수
• 에 따라 다릅니다. 예를 들어, 변수가 프로그램의 뒷부분에서 업데이트되면 함수는 동일한 입력을 사용하여 부울을 반환 할 수 있습니다. 다음 코드를 실행한다고 가정 해 봅시다 이제 코드의 뒷부분에서
함수가 그런 다음 다음 코드를 실행한다고 가정하십시오
동일한 입력이 제공 되더라도 함수는 이제 다른 값으로 평가됩니다.

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

순수 함수는 코드가 매개 변수로 제공된 값 이외의 다른 값에 의존하지 않기 때문에 코드를 쉽게 포트하는 것이 좋습니다. 리턴 값이 변경되지 않는다는 사실은 순수한 기능을 쉽게 테스트 할 수 있습니다.

순수한 기능을 일관되게 쓰면 돌연변이와 부작용의 가능성이 제거됩니다. checkAge 돌연변이는 기능 프로그래밍에서 큰 적기이며, 더 많은 것을 배우려면 JavaScript의 가변 할당 및 돌연변이에 대한 가이드에서 읽을 수 있습니다.

기능을보다 쉽게 ​​포업 할 수 있도록 기능이 항상 순수한 지 확인하십시오.
규칙 2 : 변수를 변경하지 않은 상태로 유지하십시오 변수를 선언하는 것은 프로그래머가 배우는 첫 번째 것 중 하나입니다. 그것은 사소한 것이지만 기능 프로그래밍 스타일을 사용할 때 매우 중요합니다.

기능 프로그래밍의 주요 원칙 중 하나는 변수가 설정되면 프로그램 전체에 걸쳐 해당 상태가 유지된다는 것입니다.

이것은 코드에서 변수의 재 할당/재배치가 재난이 될 수있는 가장 쉬운 예입니다.

신중하게 생각한다면

의 값은 10과 11이 될 수 없습니다.

명령 프로그램의 일반적인 코딩 실습은 다음 코드를 사용하여 값을 증분하는 것입니다.

수학에서,

는 비논리적입니다. 왜냐하면 양쪽에서 를 빼면 를 얻을 수 있기 때문입니다.

따라서 Haskell에서는 변수를 값에 할당 한 다음 다른 값으로 재 할당 할 수 없습니다. JavaScript에서이를 달성하려면 항상

를 사용하여 변수를 선언하는 규칙을 따라야합니다.

규칙 3 : 화살표 함수

를 사용하십시오 수학에서 함수의 개념은 한 값 세트를 다른 값에 매핑하는 개념입니다. 다음 그림은 제곱을 통해 오른쪽에 설정된 값에 왼쪽에 설정된 값을 매핑하는 함수를 보여줍니다.
이것은 화살표 표기법을 사용하여 수학으로 작성하는 방법입니다. f : x → x². 이는 함수 F가 값 x를 x²에 맵핑한다는 것을 의미합니다.

checkAge(20); // false

우리는 화살표 함수를 사용 하여이 기능을 거의 같은 방식으로 쓸 수 있습니다.

JavaScript에서 기능적 스타일을 사용하는 주요 기능은 일반 함수가 아닌 화살표 기능을 사용하는 것입니다. 물론 이것은 일반 함수 대신 화살표 기능을 사용하여 코드의 "기능적"정도에 영향을 미치지 않습니다. n 그러나 기능 프로그래밍 스타일을 사용할 때 적응하기 가장 어려운 것 중 하나는 각 기능을 출력에 대한 매핑 입력으로 생각하는 방법입니다. 소위 프로세스가 없습니다. 화살표 기능을 사용하면 기능 프로세스를 더 잘 이해하는 데 도움이 될 수 있습니다.

화살표 함수는 암시 적 반환 값을 가지 므로이 맵을 시각화하는 데 도움이됩니다.

화살표 기능, 특히 암시 적 반환 값의 구조는 구조가 실제로 "출력에 입력 된 입력"이기 때문에 순수한 기능을 작성하도록 권장합니다.

우리가 강조하고 싶은 또 다른 것은 특히 화살표 기능을 작성할 때 3 원 운영자를 사용하는 것입니다. 3 원 운영자에 익숙하지 않은 경우 형식의 인라인

진술입니다.

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

당신은 빠른 팁에서 그들에 대해 더 많이 읽을 수 있습니다 : JavaScript에서 3 자 연산자를 사용하는 방법.
기능 프로그래밍에서 3 배 연산자를 사용하는 주된 이유 중 하나는 if...else 문의 필요성 때문입니다. 프로그램은 원래 조건이 충족되지 않으면 어떻게 해야하는지 알아야합니다. 예를 들어, Haskell은 condition ? value if true : value if false 명령문을 시행하고 명령문이 주어지면 오류를 반환합니다.
3 대 연산자를 사용해야하는 또 다른 이유는 부작용이 발생할 수있는 작업을 수행하는 데 사용할 수있는

진술보다는 항상 값을 반환하는 표현이기 때문입니다. 이는 화살표 기능에 특히 유용합니다. 반환 값이 존재하는지 확인하고 이미지 입력을 출력 맵에 유지할 수 있습니다. 진술과 표현 사이의 뉘앙스에 대해 확신이 없다면, 진술과 표현에 대한 안내서는 읽을 가치가 있습니다.

이 두 조건을 설명하기 위해, 다음은 3 원 운영자를 사용한 간단한 화살표 기능의 예입니다.

else 함수는 매개 변수의 값에 따라 "Eat"또는 "Sleep"의 값을 반환합니다. else 따라서, 요약 : 코드를보다 기능적으로 만들 때 다음 두 가지 규칙을 따라야합니다. else 화살표 표기법 를 사용한 쓰기 기능

명령문을 3 원으로 교체하십시오

if-else 규칙 4 : for 루프 삭제

를 사용하여 반복 코드를 작성하는 것이 프로그래밍에서 매우 일반적이라는 점을 감안할 때, 당신이 그들을 피하고 싶다고 말하는 것은 이상하게 보입니다. 사실, Haskell이 어떤 종류의

루프 작업을하지 않았다는 것을 처음 발견했을 때, 우리는 일부 표준 작업을 구현하는 방법을 이해하는 데 어려움을 겪었습니다. 그러나

루프가 기능 프로그래밍에 나타나지 않는 이유는 몇 가지가 있으며,

checkAge(20); // false

루프를 사용하지 않고 모든 유형의 반복을 구현할 수 있음을 빠르게 발견했습니다.

action 사용되지 않음 state 루프가 루프가 된 가장 중요한 이유는 그들이 돌연변이 상태에 의존하기 때문입니다. 간단한 합 함수를 살펴 보겠습니다 :

보시다시피, 루프 자체에서

를 사용해야하고 변수에서 루프에서 업데이트해야합니다.

앞에서 언급 한 바와 같이, 기능 프로그래밍의 모든 변수는 불변이어야하기 때문에 일반적으로 기능 프로그래밍에서 나쁜 관행입니다.
모든 변수가 불변이없는 코드를 작성하려면 재귀를 사용할 수 있습니다.
• 보시다시피 변수는 업데이트되지 않습니다.
우리의 수학자들은 우리가 영리한 합계 공식 0.5*n*(n 1) 만 사용할 수 있기 때문에이 모든 코드가 불필요하다는 것을 분명히 알 것입니다. 그러나 이것은 루프의 가변성과 재귀의 차이를 설명하는 좋은 방법입니다.

그러나, 특히 배열을 다룰 때 변동성 문제에 대한 유일한 해결책은 재귀만이 아닙니다. JavaScript에는 변수를 변경하지 않고 배열의 값을 반복하는 많은 내장 고차 배열 메소드가 있습니다. for 예를 들어 ^{배열의 각 값에 1을 추가하려고한다고 가정하십시오. 명령 방법과}

루프를 사용하면 기능이 다음과 같습니다.

그러나 우리는 JavaScript의 내장

메소드를 사용하고 다음과 같은 함수를 쓸 수 있습니다.

이전에 for 기능을 본 적이 없다면, 그들에 대해 알아야 할 가치가 있습니다. 특히 와 같은 모든 내장 된 고차 배열 메소드, 특히 감각이있는 경우. JavaScript 관심의 기능 프로그래밍. 불변의 배열 방법 : 매우 명확한 JavaScript 코드를 작성하는 방법에서 더 많은 정보를 찾을 수 있습니다.

Haskell은 전혀 루프가 없습니다. JavaScript를보다 기능적으로 만들려면 재귀 및 내장 고차 배열 메소드를 사용하여

// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};

루프 사용을 피하십시오.

map 규칙 5 : 유형을 피하십시오. 필수

유형 선언이 필요하지 않은 JavaScript와 같은 언어로 프로그래밍 할 때 데이터 유형의 중요성을 잊어 버리기 쉽습니다. JavaScript에 사용 된 7 가지 기본 데이터 유형은 다음과 같습니다.

checkAge(20); // false

번호 map 스트링 부울 filter

기호

bigint 정의되지 않은 for null for Haskell은 유형 선언이 필요한 강력하게 입력 한 언어입니다. 이는 어떤 기능을하기 전에, Hindley-Milner 시스템을 사용하여 데이터 유형 입력 및 데이터 유형 출력을 지정해야 함을 의미합니다.

예 : 이것은 두 개의 숫자 (x와 y)를 함께 추가하는 매우 간단한 기능입니다. 이와 같은 매우 간단한 기능을 포함하여 모든 기능에 대해 프로그램에 대한 데이터 유형을 설명하는 것은 약간 우스운 것처럼 보이지만 궁극적으로 기능이 어떻게 작동하는지와 반환 할 것으로 예상되는 내용을 보여주는 데 도움이됩니다. 따라서 코드가 더 복잡해지면 코드를 더 쉽게 디버깅 할 수 있습니다. 유형 선언은 다음 구조를 따릅니다

유형 힘은 자바 스크립트를 사용할 때 큰 문제가 될 수 있습니다. JavaScript는 데이터 유형의 불일치를 우회하기 위해 사용할 수있는 다양한 트릭 (
연결. "Hello"5는 "Hello5"로 평가되며 일관성이 없습니다. 문자열을 숫자 값으로 연결하려면 "hello"문자열 (5)을 작성해야합니다.
부울 진술 및 0. JavaScript에서 문의 값 0은 False와 같습니다. 이로 인해 숫자 데이터가 0인지 확인하는 게으른 프로그래밍 기술로 이어질 수 있습니다.
• 예 :

  // 不纯
  let minimum = 21;
  const checkAge = (age) => age >= minimum;
  
  // 纯
  const checkAge = (age) => {
      const minimum = 21;
      return age >= minimum;
  };

  이것은 숫자가 짝수인지 여부를 평가하는 함수입니다.

  기호를 사용하여 !의 결과를 부울에 시전하지만 n % 2의 결과는 부울이 아니라 숫자 (0 또는 1)입니다. n % 2 이와 같은 팁은 영리 해 보이고 쓴 코드의 양을 줄이려면 기능 프로그래밍의 유형 일관성 규칙을 중단합니다. 따라서이 기능을 작성하는 가장 좋은 방법은 다음과 같습니다.

  또 다른 중요한 개념은 배열의 모든 데이터 값이 동일한 유형인지 확인하는 것입니다. JavaScript는 이것을 시행하지 않지만 동일한 유형이 없으면 고차 배열 메소드를 사용하려는 경우 문제가 발생할 수 있습니다.

  예를 들어, 배열의 모든 숫자를 곱하고 결과를 다음 유형의 선언 주석으로 작성할 수있는 제품 기능 :

  .

  checkAge(20); // false

  여기서, 유형 선언은 함수의 입력이 유형 번호의 요소를 포함하는 배열이지만 단 하나의 숫자 만 반환한다는 것을 명확하게 나타냅니다. 유형 선언은이 함수의 예상 입력 및 출력을 명확하게 보여줍니다. 분명히 배열에 숫자 이상의 것이 포함되어 있으면이 기능이 작동하지 않습니다.

  Haskell은 강력하게 타이핑 된 언어이지만 JavaScript는 약하게 입력 한 언어이지만 JavaScript를보다 기능적으로 만들려면 기능을 선언하기 전에 유형 선언 주석을 작성하고 유형 포팅 지름길을 피해야합니다.

  우리는 또한 당신이 당신을 위해 유형 일관성을 시행 할 JavaScript에 대한 강력하게 입력 된 대안을 원한다면 typeScript로 전환 할 수 있다고 언급해야합니다.

  결론

  checkAge(20); // true

  모두, 다음 5 가지 규칙은 기능 코드를 구현하는 데 도움이됩니다.

  기능을 유지하십시오.

  는 항상 const

  를 사용하여 변수와 함수를 선언합니다.

  함수에 대한 화살표 표기법을 사용하십시오.

  루프 사용을 피하십시오. 유형 선언 주석을 사용하고 유형의 강제 단축키를 피하십시오.

  이 규칙은 코드가 순전히 기능적이라는 것을 보장하지는 않지만 크게 기능적으로 더 기능적으로 만들어 더 깨끗하고 선명하며 테스트하기가 더 쉬워집니다.

  우리는이 규칙이 가능한 한 많은 도움이되기를 바랍니다! 우리 둘 다 기능 프로그래밍의 열렬한 팬이며 모든 프로그래머가 사용하는 것이 좋습니다.
  기능적 자바 스크립트를 더 깊이 파고 들으려면 "Frisby 교수의 기능 프로그래밍에 대한 충분한 가이드의 대부분을 무료로 제공하는 것이 좋습니다. Haskell을 배우기 위해 모두 가고 싶다면 Try Haskell Interactive Tutorial을 사용하고 훌륭한 Book Haskell을 읽는 것이 좋습니다.
  • JavaScript 기능 프로그래밍에 대한 자주 질문

  JavaScript의 기능적 프로그래밍이란 무엇입니까? 기능적 프로그래밍은 계산을 수학적 함수의 평가로 취급하고 변화하는 상태와 변이 가능한 데이터를 피하는 프로그래밍 패러다임입니다. JavaScript에서는 기능을 일류 시민으로 사용하고 부작용을 피하는 것이 포함됩니다. JavaScript의 일류 기능은 무엇입니까? JavaScript의 일류 함수는 함수가 다른 변수와 동일하다는 것을 의미합니다. 변수에 값을 할당하고, 다른 함수에 매개 변수로 전달되며, 다른 함수의 값으로 반환 할 수 있습니다.

  기능 프로그래밍에서 불변은 무엇입니까? 불변은 객체가 생성되면 변경할 수 없음을 의미합니다. JavaScript 기능 프로그래밍의 맥락에서 이는 변수를 초기화 한 후 변수 또는 데이터 구조를 수정하는 것을 피하는 것을 의미합니다. 고차 기능이란 무엇입니까? 고차 함수는 다른 함수를 매개 변수로 취하거나 결과로 함수를 반환하는 함수입니다. 함수 조합을 지원하여 모듈 식 및 재사용 가능한 코드를보다 쉽게 ​​만들 수 있습니다.

  JavaScript에서 기능 프로그래밍을 용이하게하는 라이브러리/프레임 워크가 있습니까? 예, 일부 라이브러리 및 프레임 워크 (Ramda 및 Lodash와 같은)는 JavaScript 기능 프로그래밍의 개념을 지원하는 유틸리티 및 기능을 제공합니다. 기능 프로그래밍 관행을 단순화하고 향상시키는 데 도움이 될 수 있습니다.

위 내용은 JavaScript를보다 기능적으로 만드는 5 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!