[자바스크립트 ES6+] 함수형 자바스크립트 기본기

이희제·2021년 1월 30일
6

JavaScript

목록 보기
1/6
post-thumbnail

함수형 프로그래밍과 자바스크립트 ES6+ 내용에 대해서 글을 연재해 나가고자 합니다.


1. 평가와 일급

평가

  • 코드가 계산(Evaluation)되어 값을 만드는 것을 의미합니다.

일급

  • 값으로 다룰 수 있다.
  • 변수에 담을 수도 있다.
  • 함수의 인자로 사용될 수 있다.
  • 함수의 결과로 사용될 수 있다.

[예시]


const a = 10;  // 변수에 담을 수 있다.

const add = x=> x+10; // 함수의 인자로 넘길 수 있다. 

cosnt result = add(a);  // 함수의 결과로 사용될 수 있다. (return 값)

2. 일급 함수

➡️ 자바스크립트에서 함수는 일급입니다.

  • 함수가 일급이라는 이야기는 값으로 다룰 수 있다는 것을 뜻합니다.
  • 조합성과 추상화의 도구입니다.

[예시]

const add5 = a => a + 5;
  log(add5);
  log(add5(5));

  const f1 = () => () => 1; // 함수는 결괏값으로 함수가 사용될 수 있다. 
  log(f1());  // 함수가 출력된다. 

  const f2 = f1();  // 다른 변수에 담을 수 있다. 
  log(f2);  // 마찬가지로 함수가 출력된다.
  log(f2());  // 평가를 통해 결과를 만들어 낼 수 있다. 


3. 고차 함수

➡️ 고차 함수는 함수가 일급이라는 것을 이용해서 함수를 값으로 다루는 함수를 말합니다.

고차 함수는 다음과 같이 크게 2가지로 나누어 볼 수 있습니다.

1. 함수를 인자로 받아서 실행하는 함수

예시를 통해 살펴보겠습니다.


const apply = func => func(1);  // 고차 함수이다. 
const add = val => val+2;

log(apply(add(2));
// 3이 출력된다. 
    
    
const times = (f, n) => {
    let i = -1;
    while (++i < n) f(i);
  };

  times(log, 3);  // 0 1 2

  times(a => log(a + 10), 3);   // 10 11 12

➡️ 함수를 인자로 받아서 함수 내부에서 실행하는 것을 Applicative Programming이라고 합니다.


2. 함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)


const addMaker = a => b => a + b;  // 함수를 리턴하는 함수이다. 
const add10 = addMaker(10);
log(add10(5));  // 15
log(add10(10)); // 20

💡 위의 예시에서 리턴되는 함수는 a 값을 기억하고 있는 클로저(Closure)입니다.

함수가 만들어 질 때의 환경을 기억하는 것입니다.


마무리

이번 시간에는 평가, 일급, 일급 함수, 고차 함수에 대해서 살펴봤습니다.

자바스크립트를 공부하면서 기본기가 정말 중요하다고 느끼고 있습니다.

다음 시간에는 ES6에서의 순화와 이터러블에 대해서 알아보겠습니다. 🧐

profile
오늘만 열심히 살고 모든 걸 남기되 후회는 남기지 말자

0개의 댓글