Blue Chicken - The Legend Of Zelda
본문 바로가기

개인공부

함수형 프로그래밍, 자바스크립트 메소드

코드를 더 깔끔하게 작성하는 법 : 함수형 프로그래밍

함수형 프로그래밍은 함수를 기반으로 돌아간다.

자바스크립트가 완벽히 함수형 프로그래밍일수는 없지만 스타일을 따라해보자는 취지로 생각해보자

메소드를 사용하는 것은 함수형 프로그래밍의 핵심 원리와 특성에 상당히 부합한다.

함수형 프로그래밍(Functional Programming, FP)이란 순수 함수와 데이터의 불변성을 중심으로 하는 프로그래밍 패러다임, 이 패러다임에서는 데이터를 변형하는 대신, 새로운 데이터를 생성하여 반환하는 방식을 선호한다.

 

함수형 프로그래밍에 일조하는 메소드 사용의 특징

1. 데이터의 불변성 (Immutability) :

- 함수형 프로그래밍에서는 데이터를 직접 변경하는 것을 피하며 데이터의 불변성을 유지합니다.

- 예를들어 map(), filter(), reduce() 같은 배열 메소드들은 원본 배열을 수정하지 않고 새로운 배열을 반환합니다. 이는 함수형 프로그래밍에서 중요한 데이터의 불변성을 지키는 데 도움을 준다.

 

2. 순수 함수 (Pure Functions) :

- 순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 부작용이 없다.

- 배열의 map(), filter(), reduce() 메소드는 주어진 콜백 함수를 사용하여 데이터를 처리하고, 외부 상태를 변경하지 않으며, 콜백 함수 자체가 순수 함수일 경우, 이 메소드들은 순수 함수의 원칙을 따른다.

 

3. 고차 함수 (Higher-order Functions) :

- 고차 함수는 다른 함수를 인자로 받거나 함수를 결과로 반환하는 함수다.

- JavaScript의 map(), filter(), reduce() 등은 고차 함수다. 이들은 함수를 인자로 받아 배열의 각 요소에 적용하고, 결과를 반환한다. 이러한 특성은 함수형 프로그래밍에서 함수를 데이터와 같이 취급하는 개념을 잘 보여준다.

 

4. 함수의 조합 (Function Composition) :

- 함수형 프로그래밍에서는 작은 함수들을 조합하여 더 큰 기능을 구현한다.

- map()과 filter()를 연속적으로 사용하여 배열을 변형하고, 이를 통해 데이터를 순차적으로 처리하는 것은 함수의 조합을 사용하는 예시이다.

const numbers = [1, 2, 3, 4, 5];
const doubleOddNumbers = numbers
    .filter(n => n % 2 !== 0)
    .map(n => n * 2);
console.log(doubleOddNumbers);  // [2, 6, 10]

`filter`와 `replace`는 JavaScript에서 문자열 및 배열을 다룰 때 사용되는 서로 다른 용도의 메소드입니다. 이 두 메소드의 기능과 사용 방법, 그리고 다른 관련 메소드들에 대해 자세히 알아보겠습니다.

`filter`
- 용도: `filter` 메소드는 배열의 각 요소에 대해 주어진 테스트 함수를 실행하고, 그 결과가 `true`를 반환하는 모든 요소로 새 배열을 생성합니다. 이 메소드는 원본 배열을 변경하지 않습니다.
  ```javascript

  const numbers = [1, 2, 3, 4, 5];
  const evenNumbers = numbers.filter(number => number % 2 === 0);
  // evenNumbers: [2, 4]


  ```

`replace`
- 용도: `replace` 메소드는 문자열에서 패턴에 일치하는 부분을 찾아 다른 문자열로 대체합니다. 정규 표현식 또는 문자열을 패턴으로 사용할 수 있습니다.
  ```javascript

  const text = "Visit Microsoft!";
  const newText = text.replace("Microsoft", "Google");
  // newText: "Visit Google!"


  ```

### 그 외의 문자열 및 배열을 다루는 메소드들:

 

문자열 메소드

- `split()`: 문자열을 특정 구분자로 나누어 배열로 반환합니다.
  ```javascript

  const data = "apple, banana, cherry";
  const fruits = data.split(", ");
  // fruits: ["apple", "banana", "cherry"]


  ```
- `concat()`: 하나 이상의 문자열을 현재 문자열에 연결하여 새 문자열을 반환합니다.
  ```javascript

  const hello = "Hello, ";
  const world = "world!";
  const greeting = hello.concat(world);
  // greeting: "Hello, world!"


  ```
- `substring()`: 문자열의 특정 부분을 추출하여 새 문자열을 만듭니다.
  ```javascript

  const text = "Mozilla";
  const part = text.substring(0, 3);
  // part: "Moz"


  ```
- `trim()`: 문자열 양쪽 끝의 공백을 제거합니다.
  ```javascript

  const name = "   JavaScript   ";
  const trimmedName = name.trim();
  // trimmedName: "JavaScript"


  ```

배열 메소드


- `map()`: 배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새 배열을 반환합니다.
  ```javascript

  const numbers = [1, 2, 3];
  const squared = numbers.map(x => x * x);
  // squared: [1, 4, 9]


  ```
- `reduce()`: 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
  ```javascript

  const numbers = [1, 2, 3, 4];
  const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  // sum: 10


  ```
- `forEach()`: 배열의 각 요소에 대해 주어진 함수를 실행합니다. 반환값은 없습니다.
  ```javascript

  const numbers = [1, 2, 3];
  numbers.forEach(number => console.log(number));
  // Console output: 1, 2, 3


  ```
- `push()`: 하나 이상의 요소를 배열의 끝에 추가하고, 배열의 새로운 길이를 반환합니다.
  ```javascript

  const fruits = ["apple", "banana"];
  fruits.push("cherry");
  // fruits: ["apple", "banana", "cherry"]


  ```

이러한 메소드들을 통해 데이터를 다양한 방식으로 처리하고 조작할 수 있으며, JavaScript에서 효율적인 데이터 관리와 변형을 가능하게 합니다.