DevYoon

[JS] 함수와 일급 객체 본문

언어/Javascript

[JS] 함수와 일급 객체

gimewn 2022. 6. 23. 17:59

함수와 일급 객체 ⭐

CONTENTS ✏️

  • 일급 객체란?
  • 일급 객체로 무엇을 할 수 있을까?
  • 함수형 프로그래밍이란?
  • 순수함수란?

1️⃣ 일급 객체란?

아래의 조건을 만족하는 객체를 일급 객체라고 함

  • 무명의 리터럴로 생성 가능
    • 무명의 리터럴? ➡️ 함수 표현식을 뜻함
    • 즉, 런타임에 생성 가능
    const name = function(){}
    ➡️ 함수 표현식 & 변수에 할당될 때 생성됨
  • 변수나 자료구조(객체, 배열 등)에 저장 가능
  • 함수의 매개변수에 전달 가능
  • 함수의 반환값으로 사용 가능

⭐ 함수의 매개변수에 전달 가능 && 함수의 반환값으로 사용 가능

​ ➡️ 함수형 프로그래밍을 가능하게 하는 자바스크립트의 장점 중 하나

⭐ 자바스크립트의 함수는 일급객체❕

2️⃣ 일급 객체로 무얼 할 수 있을까?

1️⃣ 고차함수를 만들 수 있음

  • 고차함수 : 함수를 인자로 받거나 리턴하는 함수
  • 예시
  • 
    1. 다른 함수를 인자로 받는 경우
    
      function double(num){
          return num * 2;
      }
    
      function doubleNum(func, num){
          return func(num);
      }
    
      doubleNum(double, 5); //10
    
      2. 함수를 리턴하는 경우
    
      function subtractor(subtract){
          return function(num){
              return num - subtract;
          }
      }
    
      subtractor(5)(8); //3
    
      const subtract5 = subtractor(5);
    subtract5(8); // 3
  • 자바스크립트 내장 고차함수 ➡️ 배열 메소드 중 forEach, find, sort, filter, map, reduce ...

2️⃣ 콜백 함수로 사용할 수 있음

  • 콜백 함수 : 다른 함수의 인자로 전달되는 함수
  • 예시
  • function doubleNum(func, num){
        return func(num);
    }
    
    // doubleNum이 고차 함수라면, func은 콜백 함수

3️⃣ 함수형 프로그래밍이란?

1️⃣ 프로그래밍 패러다임

  • 명령형 프로그래밍 : 어떻게(How)의 관점에서 프로그래밍
    • 절차지향 프로그래밍
    • 객체지향 프로그래밍
  • 선언형 프로그래밍 : 무엇을(what)의 관점에서 프로그래밍
    • 함수형 프로그래밍

2️⃣ 함수형 프로그래밍

  • 거의 모든 것을 순수함수로 작성 ➡️ 조합
  • 모듈화 수준을 높이는 것
    • 작은 문제를 해결하기 위한 함수를 작성
    • 생산성과 안정성 확보
  • 상태와 가변 데이터를 멀리함 ➡️ 원본 데이터 불변성 유지
    • 데이터 변경이 필요하면 복사본을 만들어 변경

4️⃣ 순수함수란?

동일한 인자를 넣었을 때 항상 동일한 리턴값을 반환하고, 외부에 영향을 받지 않는 함수

  • 입출력이 순수해야 함
    • 반드시 하나 이상의 인자를 받고, 받은 인자를 처리하여 반드시 결과물을 돌려줘야 함
    • 인자를 제외한 다른 변수를 사용해선 ❌
    ➡️ 순수함수
  • Side Effect가 없어야 함
    • 함수의 실행이 외부에 영향을 끼치지 않음
    • 평가 시점에 상관없이 동일한 인자가 들어오면 동일한 결과를 제공
      • 함수의 실행 순서에 좌우되지 않음
    • 함수 내부에서 값을 변경하거나 프로그램 상태를 변경 ❌

❓ QUIZ

var arr = [1, 2, 3, 4, 5];
var map = arr.map(function(x) {
  return x * 2;
}); // [2, 4, 6, 8, 10]

➡️ 순수함수

var arr = [1, 2, 3, 4, 5];
var condition = function(x) { return x % 2 === 0; }
var ex = function(array) {
  return array.filter(condition);
};
ex(arr); // [2, 4]

➡️ 순수함수 x

var ex = function(array, cond) {
  return array.filter(cond);
};
ex(arr, condition);

➡️ 순수함수 o