현대 JavaScript에서 함수형 프로그래밍을 사용하는 방법과 이유

이 기사에서는 함수형 프로그래밍과 그 이점에 대해 깊이 이해하게 될 것입니다.

함수형 프로그래밍 소개

기능 프로그래밍 (FP)은 컴퓨터 과학의 패러다임 또는 패턴 유형입니다. 모든 것은 FP의 기능의 도움으로 이루어지며 기본 빌딩 블록은 기능 일뿐입니다.

순전히 함수형 프로그래밍을 지원하는 프로그래밍 언어는 다음과 같습니다.

  1. Haskell
  2. 폐쇄
  3. 스칼라
  4. SQL

함수형 프로그래밍 및 기타 프로그래밍 패러다임을 지원하는 프로그래밍 언어 중 일부는 다음과 같습니다.

  1. 파이썬
  2. 자바 스크립트
  3. C ++
  4. 루비

이름이 기능적이라고 말했기 때문에 대부분의 프로그래머는 수학 함수에 대해 생각합니다. FP는 그렇지 않습니다. 현실 세계의 복잡한 문제를 쉽고 효과적인 방식으로 해결하는 것은 추상화 일뿐입니다.

객체 지향 프로그래밍 시대 이전에 소프트웨어 산업은 함수형 프로그래밍에 전적으로 의존했습니다. 이 패러다임은 수십 년 동안 소프트웨어 산업을 뒤흔들 었습니다. 함수형 프로그래밍에는 몇 가지 문제가 있으며 이것이 바로 객체 지향 패러다임으로 이동 한 이유입니다. FP 관련 문제는이 문서의 뒷부분에서 설명합니다.

이것이 함수형 프로그래밍에 대한 소개입니다. 이제 먼저 함수가 무엇인지 배워야합니다.

기능

실제 정의를 밝히기 전에 실제로 FP를 어디에서 사용해야하는지 알 수있는 상황을 설명하고 싶습니다. 애플리케이션을 빌드하기위한 코드를 작성한다고 가정하십시오. 개발 과정에서 여러 위치에서 몇 줄 (100)의 코드를 재사용하려고합니다. 응용 프로그램의 경우 기능이 유용합니다. 한곳에서 함수를 작성할 수 있으며 프로그램의 어느 곳에서나 이러한 함수에 액세스 할 수 있습니다. 함수형 프로그래밍에는 다음과 같은 기능이 있습니다.

  1. 코드 중복을 줄입니다.
  2. 모듈성을 향상시킵니다.
  3. 복잡한 문제를 해결하는 데 도움이됩니다.
  4. 유지 보수성을 증가시킵니다.

함수의 실제 정의를 살펴 보겠습니다.

함수는 프로그램에서 특정 작업을 수행하는 데 사용되는 지정된 코드 블록입니다.

가장 많이 사용되는 기능 유형은 다음과 같습니다.

  1. 일반 기능
  2. 화살표 기능
  3. 익명 함수

일반 기능

일반 기능은 프로그래머가 특정 작업을 수행하기 위해 자주 사용하는 기능에 불과합니다. Javascript에서 일반 함수를 선언하는 구문은 다음과 같습니다.

function functionName(parameters) { // code to be executed}

function — 함수 를 선언하는데 필요한 키워드입니다.

functionName — 함수 작업에 따라 이름을 지정할 수 있습니다.

매개 변수 — 함수에 원하는 수의 매개 변수를 전달할 수 있습니다.

선언 된 함수는 즉시 실행되지 않습니다. "나중 사용을 위해 저장"되고 나중에 호출 (호출) 될 때 실행됩니다.

함수 내에서 반환되는 코드 조각을 실행하려면 함수를 호출해야합니다.

일반 기능은 다음과 같이 분류됩니다.

인수없는 함수

함수에 인수를 전달할 필요가 없습니다.

// Function Declaration
function sayHello(){ alert('Hello...!');}
// Calling the functionsayHello()

sayHello () 함수를 호출하면 경고 메시지가 Hello로 생성됩니다.

인수 함수

이 유형의 함수에서는 인수를 전달합니다.

// Declaring a Function
function add(num1, num2){ return num1 + num2;}
// Function Call
var result = add(7, 11);
console.log(result);

함수를 선언하는 동안 전달되는 인수, 즉 (num1, num2)는 형식 매개 변수 로 호출됩니다 .

함수를 호출하는 동안 전달되는 인수 (예 : (7, 11))는 실제 매개 변수 로 호출됩니다 .

함수는 일반적으로 일부 값을 반환하며 해당 값을 반환하려면 return 키워드 를 사용해야 합니다. 함수가 어떤 값을 반환 할 때 그것은 우리를 위해 어떤 출력도 인쇄하지 않는다는 것을 의미하며 단지 최종 출력을 반환합니다. 그 결과를 인쇄하는 것은 우리의 책임입니다. 위의 프로그램에서 함수는 값을 반환하고 해당 값을 변수 이름 'result'에 전달합니다. 이제 함수는 결과를 'result'변수에 전달합니다.

자바 스크립트 함수의 전문성

선언 된 수보다 많은 인수를 전달하면 오류가 발생하지 않습니다. 그러나 Python, C, C ++, Java 등과 같은 다른 프로그래밍 언어에서는 오류가 발생합니다. Javascript는 요구 사항에 따라 고려합니다.

// Calling the function with more number of arguments than the declared number
var result1 = add(2, 4, 6);console.log(result1);
var result2 = add(2);console.log(result2);

산출

선언 된 수보다 적은 인수를 전달하면 오류도 발생하지 않습니다. 그러나 함수 기능에 따라 출력이 생성되기 때문에 프로그램의 출력을 예측할 수 없습니다.

가변 인수 함수

Javascript 함수의 가장 큰 장점은 함수에 여러 인수를 전달할 수 있다는 것입니다. 이 기능은 개발자가 일관된 방식으로보다 효과적으로 작업 할 수 있도록 도와줍니다.

// Creating a function to calculate sum of all argument numbers
function sumAll(){
let sum = 0;
for(let i=0;i
    
return sum;
}
// Calling the sumAll function
sumAll();
sumAll(1,2,3,12,134,3234,4233,12,3243);

Output

This is all about general functions that are used to perform our complex task in a simple manner. Now let’s discuss some advanced functions introduced in ES6 called Arrow Functions.

Arrow Functions

An arrow function expression is a syntactically compact alternative to a regular function expression. It doesn’t have its own bindings to the this, super, arguments or new.target keywords. Arrow function expressions are ill-suited as methods. They cannot be used as constructors.

One of the most loved features in Es6 are Arrow functions. This arrow function helps developers time and simplify function scope.

The syntax for the arrow function is:

const functionName = (parameters) => { // code to be executed}
 (OR)
var functionName = (parameters) => { // code to be executed}
 (OR)
let functionName = (parameters) => { // code to be executed}

Examples for Arrow Functions

Eg 1

Creating an Arrow function to say a welcome message to the users.

// Creating a Welcome function
let sayHello = () => { return 'Welcome to Javascript World...!';}
// Calling the function
console.log(sayHello())

Output

Eg 2

In this example, we are creating an Arrow function to generate the greatest of all numbers that are passed as an argument.

let maxNumber = (a,b,c,d) => {
 if(a > b && a > c && a > d) return a; else if(b > a && b > c && b>d) return b; else if(c > a && c > b && c > d) return c; else return d;}
// Calling the function
console.log(maxNumber(1,2,4,3));

Output:

Combination of Variable Arguments with Arrow Functions

Since we are working with an arrow function, it doesn’t support the arguments array by default like general function. It is our responsibility to declare explicitly that it supports the variable number of arguments

Eg 3

let varArgSum = (...args) => { let sum = 0;
 for(let i=0;i
     
return sum;
}
// Calling the Function
console.log(varArgSum());
console.log(varArgSum(1,2,3,4,5,6,7,8,9,10));

Output

This is how we can combine a variable number of arguments with arrow functions. Now let’s discuss Anonymous functions in JavaScript.

Anonymous Functions

An anonymous function is simply a function with no name. The purpose of using anonymous function is to perform a certain task and that task is no longer required to program. Generally, anonymous functions are declared dynamically at run time.

Anonymous functions are called only once in a program.

Example:

// Working with an Anonymous function
var a = 10; // Global Scope Variable.
// creating a function(function() {
 console.log("welcome to the world of Anonymous function");
 var b = 20; // b is a local scope variable.
 var c = a+b; // c is a local scope variable //a can be used because it is in the global scope
 console.log("Addition of two numbers value is: "+c);})();

Output

This is the concept of anonymous functions. I think I explained it in a simple and easy way.

Higher Order Functions

A higher-order function is a function that takes functions as an argument or that returns another function as a result.

The best example of higher-order functions in Javascript is that of Array.map(), Array.reduce(), Array.filter().

Example 1: Array.map()

// working with Array.map()
let myNumberArray = [4,9,16,25,36,49];
let mySquareRootArray = myNumberArray.map(Math.sqrt);
console.log(mySquareRootArray);

Output

Example 2: Array.reduce()

// working with Array.reduce()
let someRandomNumbers = [24,1,23,78,93,47,86];
function getSum(total, num){ return total + num;}
let newReducedResult = someRandomNumbers.reduce(getSum);
console.log(newReducedResult);

Output

Example 3: Array.filter()

// Working with array filter
let ages = [12,24,43,57,18,90,43,36,92,11,3,4,8,9,9,15,16,14];
function rightToVote(age){ return age >= 18;}
let votersArray = ages.filter(rightToVote);
console.log(votersArray);

Output

Recursion

This is one of the key topics in functional programming. The process in which a function calls directly or indirectly is called a recursive function. This concept of recursion is quite useful in solving algorithmic problems like the Towers of Hanoi, Pre-Order, Post-Order, In-Order, and some graph traversal problems.

Example

Let’s discuss a famous example: finding the factorial of a number using recursion. This can be done by calling the function directly from the program repeatedly. The logic for the program is

factorial(n) = factorial(n) * factorial(n - 1) * factorial(n - 2) * factorial(n - 3) * ….. * factorial(n - n);
// Finding the factorial of a number using Recursion
function factorial(num){ if(num == 0) return 1; else return num * factorial(num - 1);
}
// calling the function
console.log(factorial(3));
console.log(factorial(7));
console.log(factorial(0));

Output

Characteristics Of Functional Programming

The objective of any FP language is to mimic the use of mathematical concepts. However, the basic process of computation is different in functional programming. The major characteristics of functional programming are:

Data is immutable: The data which is present inside the functions are immutable. In Functional programming, we can easily create a new Data structure but we can’t modify the existing one.

Maintainability: Functional programming produces great maintainability for developers and programmers. We don’t need to worry about changes that are accidentally done outside the given function.

Modularity: This is one of the most important characteristics of functional programming. This helps us to break down a large project into simpler modules. These modules can be tested separately which helps you to reduce the time spent on unit testing and debugging.

Advantages Of Functional Programming

  1. It helps us to solve problems effectively in a simpler way.
  2. It improves modularity.
  3. It allows us to implement lambda calculus in our program to solve complex problems.
  4. Some programming languages support nested functions which improve maintainability of the code.
  5. It reduces complex problems into simple pieces.
  6. It improves the productivity of the developer.
  7. It helps us to debug the code quickly.

Disadvantages Of Functional Programming

  1. For beginners, it is difficult to understand. So it is not a beginner friendly paradigm approach for new programmers.
  2. Maintainance is difficult during the coding phase when the project size is large.
  3. Reusability in Functional programming is a tricky task for developers.

Conclusion

For some, it might be a completely new programming paradigm. I hope you will give it a chance in your programming journey. I think you’ll find your programs easier to read and debug.

This Functional programming concept might be tricky and tough for you. Even if you are a beginner, it will eventually become easier. Then you can enjoy the features of functional programming.

If you liked this article please share with your friends.

Hello busy people, I hope you had fun reading this post, and I hope you learned a lot here! This was my attempt to share what I’m learning.

I hope you saw something useful for you here. And see you next time!

Have fun! Keep learning new things and coding to solve problems.

Check out My Twitter, Github, and Facebook.