beeimp
BeeImp
beeimp
전체 방문자
오늘
어제
  • 분류 전체보기 (110)
    • Program_Language (17)
      • Python (13)
      • Go (0)
      • JavaScript (4)
      • TypeScript (0)
      • Rust (0)
      • Solidity (0)
    • OS (8)
      • UNIX&LINUX (7)
      • Windows (0)
      • MacOS (1)
    • Front-End (19)
      • Svelte (19)
      • React (0)
    • Blockchain (6)
      • Bitcoin (0)
      • Ethereum (1)
      • Klaytn (0)
      • Project (5)
    • Data Structure&Algorithm (11)
      • Greedy (7)
      • Dynamic Programming (1)
      • Sort (0)
      • DFS & BFS (2)
      • Recursive (1)
    • Security (0)
      • SDP (0)
      • Authentication (0)
    • Network (3)
      • OpenWrt (0)
      • SDN&NFV (1)
    • Git (5)
    • IT_News (0)
    • 베타 학습단 (12)
      • SQL (12)
    • Project (1)
    • Issues (1)
    • Reviews (3)
    • I Learned (23)
      • TIL (23)
      • WIL (0)
    • Other (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • react
  • ubuntu
  • jenkins
  • PYTHON
  • github
  • Nest.js
  • Git
  • mysql
  • sql
  • solidity
  • blockchain
  • javascript
  • typescript
  • svelte
  • 탐욕법
  • 기초
  • 블록체인
  • Docker
  • greedy
  • Ethereum

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
beeimp

BeeImp

Program_Language/JavaScript

[JavaScript] 고차함수(Higher-Order Function)

2022. 3. 24. 23:18

고차함수

목표

  • first-class citizen의 세 가지 특징

  • higher-order functiond의 이해

  • 내장 고차함수에 대한 이해

    • forEach

    • find

    • filter

    • map

    • reduce

    • sort

    • some

    • every

  • 추상화(Abstraction)에 대한 이해

  • 추상화 관점에서 고차 함수가 갖는 이점

First-class citizen

JS에서는 특별한 대우를 받는 first-class citizen가 있습니다. 이 중 하나가 데이터를 다루듯이 사용할 수 있는 함수 입니다. 따라서 함수는 변수에 저장할 수 있습니다.

console.log(a(2));

const a = function (num) {
    return num * 2;
}
/*
 * 오류가 발생 - 변수에 함수를 할당한 경우 Hoisting이 적용되지 않음
 * VM558:1 Uncaught SyntaxError: Identifier 'a' has already been declared
 */

console.log(b(2));

function b(num){
    return num * 2;
}

/*
 * 오류가 발생하지 않음 - Hoisting 적용
 */

고차함수

고차함수(Higher-Order Function)란 하나 이상의 function을 인자(argument)로 function 형태로 반환하는 함수입니다. 이때, function 인자를 callback 함수라 합니다. 고차함수는 내부에서 조건에 따라 callback 함수를 호출(invoke)하여 사용합니다.

function funcA (num) {
    return num * 2;
};

const hdf = function (func, num) {
    return func(num);
};

console.log(hdf(funcA, 4));

내장 고차함수

JS는 기본적으로 여러 고차함수를 제공합니다. MAN web docs를 참조하시기 바랍니다. 아래 함수들은 주로 사용하는 내장 고차함수입니다. 함수명 - 추상화된 설명과 예시로 구성되어 있습니다. (추상화 : 복잡한 과정이나 내용을 주요 과정이나 목적의 요약을 의미)

filter - 배열에서 조건을 만족하는 값들을 배열로 반환

/*
 * arr.filter(callback(item, index, array) => true, false를 반환하는 조건)

 * Array.prototype.filter = function(func) {
 *   const arr = this;
 *   const newArr = []
 *   for(let i = 0; i < arr.length; i++) {
 *     if (func(arr[i]) === true) {
 *       newArr.push(this[i])
 *     }
 *   }
 *   return newArr;
 * }
 */
const arr = [1, 2, 3, 4, 5, 6, 7, 8];

const result = arr.filter(item => item % 2 === 0); // 짝수 반환

console.log(result); // [2, 4, 6, 8]

find - 배열에서 조건을 만족하는 첫번째 값을 반환

const arr = [1, 2, 3, 4, 5, 6, 7, 8];

const result = arr.find(item => item % 2 === 0); // 짝수 반환

console.log(result); // 2

forEach - 반환값이 없는 배열 반복문

// arr.forEach((value, index, array) => {
// 반복할 표현식
// })

const arr = [1, 2, 3, 4];

const result = arr.forEach((vlaue) => {
    console.log(value);
});
// 1
// 2
// 3
// 4

console.log(result); // undefined

map - 반환값을 배열로 반환하는 배열 반복문

// arr.map((value, index, array) => {
//     return 반환값;
// })

const arr = [1, 2, 3, 4];

const result = arr.map((value) => value * 2);

console.log(result); // [2, 4, 6, 8]

reduce - 하나의 값만 반환하는 배열 반복문

// arr.reduce((acc, value, index, array) => {
//     return 반환값;
// }, initialValue)

const arr = [1, 2, 3, 4];

const result = arr.reduce((acc, value) => acc + value, 0);

console.log(result); // 10

sort - 배열을 정렬하여 배열을 반환

// arr.sort([compareFunction])
// boolean값을 반환하는 compareFunction이 없을 경우 기본적으로 오름차순으로 정렬
// function compareFunction(a, b){
//  if(a < b) return -1; // -1일때 변경
// }

const arr = [2, 3, 1, 4];

const result = arr.sort(compareFunction);

console.log(result); // [1, 2, 3, 4];

some - 배열에서 하나라도 조건을 만족하면 true 리턴

// arr.some((currentValue, index, array)=>{return (true or false);}, thisArg)
// thisArg : 콜백함수에서 실행할 this 값

const arr = [2, 3, 1, 4];

const result1 = arr.some((value)=>value===1);
console.log(result); // true;
const result1 = arr.some((value)=>value===7);
console.log(result); // false;

every - 배열에서 모두 조건을 만족하면 true 리턴

// arr.some((currentValue, index, array)=>{return (true or false);}, thisArg)
// thisArg : 콜백함수에서 실행할 this 값

const arr = [2, 3, 1, 4];

const result1 = arr.every((value)=>value===1);
console.log(result); // false
const result1 = arr.every((value)=>value<7);
console.log(result); // true - 모두 7보다 작은 숫자이기 때문

참조

  • mdn Web Docs

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

[JavaScript] DOM(Document Object Model) 주요 정리  (0) 2022.03.21
[JavaScript를 들어가기 전] Selector와 Layout  (0) 2022.03.21
[JavaScript를 들어가기 전] HTML 및 CSS 기초 정리  (0) 2022.03.21
    'Program_Language/JavaScript' 카테고리의 다른 글
    • [JavaScript] DOM(Document Object Model) 주요 정리
    • [JavaScript를 들어가기 전] Selector와 Layout
    • [JavaScript를 들어가기 전] HTML 및 CSS 기초 정리

    티스토리툴바