본문 바로가기

JavaScript/Syntax

[JavaScript] Functional programming

1. First-class function

-프로그래밍 언어가 갖는 일반적인 특징이다. 

-자바스크립트는 함수를 일급 객체(first-class citizen)로 취급 한다.

  *이 말은 즉, 함수는 그 자체로 value이며 객체의 일종이다.

-일급 객체 함수는 다음과 같은 성질을 갖는다.

  1. 변수에 할당할 수 있다. const func1 = function() {...} ;

      *이때 func1은 함수 value이고, func1()은 함수 호출임

  2. 객체 프로퍼티에 할당할 수 있다. (메소드)

  3. 다른 함수의 arguments로써 input data로 사용할 수 있다.

      *이때 함수를 인자로 받는 어떤 함수를 고차함수(high-level, higher-order function)라 함 (내가 직접 호출함)

      *인자로 전달되는 함수는 callback function이라고 함 (자바스크립트가 호출함)

  4. 다른 함수의 return으로써 output data로 사용할 수 있다.

      *functional-programming paradigm의 핵심 개념이다! (함수에서 다른 함수를 꺼낸다)

      *이때, 함수를 리턴하는 어떤 함수 또한 고차함수라 함. (커링 함수라고도 함)

      *활용 예) const greet = (hi) => (name) => {alert(`${hi}, ${name}`};

 

 

2. Array bulit-in high-level function

-모두 콜백 함수를 인자로 받는 배열 메소드이다. 

-배열의 각 순환마다 콜백함수가 호출되고 해당 순회의 요소가 인자로 전달된다.

-또 다른 배열을 반환하는 메소드가 중요하다.

  *method chaining이 가능하기 때문! -> 'functional code'를 지향. 코드를 더 쉽게 작성 가능

 

-forEach(fn) : 콜백함수(fn)는 (요소, 인덱스, 배열)을 인자로 받고, forEach은 undefined를 반환한다.

-map(fn) : fn은 (요소, 인덱스, 배열)을 인자로 받고, map은 그 결과를 모두 모아 배열로 반환한다. (매핑)

-filter(fn) : fn은  (요소, 인덱스, 배열)을 인자로 받고 조건에 맞는 값을 반환한다. filter는 그것들을 모아 배열로 반환한다. (필터링)

-reduce(fn, 초기값) : fn은 (accumulator, 요소, 인덱스, 배열)을 인자로 받아 연산처리를 한다. reduce는 최종 결과값 하나를 반환한다

  *초기값을 콜백함수의 acc에 전달한다. 콜백함수에 의해 (acc+요소) 등의 연산처리를 한 후 그 결과값을 다음 순회의 콜백함수 acc에

   전달한다. 반복 후 최종적으로 하나의 값을 반환한다. reduce는 별명이 snow ball이다

  *초기값 인자를 따로 전달 받지 않으면 첫번째 요소를 초기값으로 하고 두번째 요소부터 순회를 진행한다.

  *reduce() 메소드는 활용 범위가 넓다. 배열 요소를 합하거나 더할 때, 서로의 값을 비교하여 최대/최소 값을 구할 때, 객체로 변환할 때 등

  *초기값을 통해 최종 결과의 타입을 설정할 수 있다.

let arrayOfNumbers = [1, 2, 3];
let sumObject = arrayOfNumbers.reduce((accumulator, currentValue) => {
  accumulator['sum'] = (accumulator['sum'] ?? 0) + currentValue;
  return accumulator;
}, {}); // { sum: 6 } 반환

-sort(fn) : 배열을 오름차순으로 정렬하는 방법 -> arr.sort( (a,b) => a-b );

 

-find(fn) : fn은 불리언을 반환. 'first filter' 즉 fn이 참을 반환하는 순회에서 그 차례의 요소를 반환함. 검색용으로 많이 사용함.

-findIndex(fn) : 콜백함수를 활용한 indexOf 메소드임. fn이 참을 반환하는 요소의 인덱스 값을 최초에만 반환함.

-some(fn) : fn은 불리언을 반환하고, 요소 가운데에 판별한 값이 하나라도 참이면 참을 반환함. (or논리)

-every

 

 

3. Abstraction

-어떤 복잡한 것을 압축해서 핵심만 추출하여 사용하는 것이 추상화이다.

-우리는 동작하는 어떤 기능의 모든 원리를 전부 알 필요가 없다. (Hide the details of code implementation)

-추상화는 생산성의 향상으로 이어진다. 

-반복되는 로직을 하나로 묶어 함수로 작성하는 것 또한 추상화의 사례라고 볼 수 있다.

-고차함수는 사고(혹은 논리) 수준에서의 추상화이다.

 

 

4. 그 외

-MapReduce Model

-function composition

-declarative programming vs imperative programming (https://sanxang.tistory.com/63)

 

 

'JavaScript > Syntax' 카테고리의 다른 글

[JavaScript] this keyword  (0) 2022.07.22
[JavaScript] OOP(Object-Oriented Programming)  (0) 2022.07.22
[JavaScript] DOM  (0) 2022.07.14
[JavaScript] Destructuring Assignment  (0) 2022.07.13
[JavaScript] Closure  (0) 2022.07.12