[TIL]JS-一級オブジェクトとしての関数

Today I Learned

第1クラスオブジェクト

宣言プログラミングとコマンドプログラミング

// Q. 다음 배열에서 5보다 큰 수만 담은 새로운 배열을 만들어라
const nums = [3, 5, 8, 1, 12, 7, 4, 9];

// Imperative Solution ----------
const numsBiggerThan5 = (arr) => {
  // Step 1. 리턴할 빈 배열 생성 
  const result = [];
  // Step 2. arr의 각 요소들을 for loop으로 조회
  for (let el of arr) {
    // Step 3. 5보다 큰 경우 result 배열에 push
    if (el > 5) {
      result.push(el);
    }
  }
  // Step 4. 새로 생성된 배열을 리턴
  return result;
}

// Declarative Solution ----------
const numsBiggerThan5 = (arr) => {
  // filter 함수의 로직을 몰라도 filter가 무엇을 하는 함수인지만 알면 됨
  return arr.filter(el => el > 5);
}

抽象化

高次関数/高次関数

function isEven(num) {
  return num % 2 === 0;
}

function getEvenNums(arr) {
  return arr.filter(isEven);
}
// filter는 함수 isEven을 인자로 받고 있으므로 고차함수
// isEven은 filter의 전달인자로 사용되고 있으므로 콜백함수

コールバック関数

// 타겟 요소
const scrollTopBtn = document.querySelector('#scroll-top-btn');

// 이벤트 리스너의 콜백함수로 사용할 scrollTop 함수
function scrollTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

// 이벤트 리스너 생성 + 콜백함수 등록
scrollTopBtn.addEventListener('click', scrollTop);
// 타겟 요소에 클릭 이벤트가 발생하면 그때 콜백함수가 호출(실행)됨

トリム関数

const curry = (func) => {
	return function curriedFunc(...args) {
		if (args.length >= func.length) {
			return func(...args);
		} else {
			return (...args2) => curriedFunc(...args, ...args2);
		}
	};
};

関数の組合せ

const compose = (...funcs) => (initialValue) => funcs.reduceRight((value, func) => func(value), initialValue);