[05.10] 고차함수

NellaFantaJia's TechLog👩🏻‍💻·2023년 6월 19일

JavaScript TIL 고차함수

고차함수
내장고차함수
고차함수의 중요성
회고

📌 고차함수

일급객체 (함수가 일급객체라서 고차함수로 활용 가능)

: Javascript에서 특별한 대우를 받는 객체/ 대표적인 일급 객체 중 하나가 함수

변수에 할당할 수 있음
```
let result = function A();
```
다른 함수의 전달인자로 전달될 수 있다.
```
function A (function B);
```
다른 함수의 결과로서 리턴 될 수 있다.
```
return function A;
```

함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장가능 함수를 데이터 (string, number, boolean, array, object)처럼 다룰 수 있음

//Javascript에서 함수는 일급 객체이기 때문에 변수에 할당가능
//함수표현식은 할당전에 사용 불가
const square = function (num) {
	return num* num; 
};

//변수 square에는 함수가 할당되어 있으므로(일급객체), 함수 호출 연산자() 사용가능
let output = square(7);
console.log(output); 
//49

고차함수란?

: 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수

→ 콜백함수 : 함수의 전달인자로 전달되는 함수

 (어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 한다고 이해하면 될듯?)

함수는 변수에 저장가능
함수는, 함수를 담은 변수를 전달인자로 받을 수 있음
함수 내부에서 변수에 함수를 할당할 수 있음 → 해당 변수를 리턴도 가능 → 변수에 할당하지 않고 바로 이용 가능

[예시1] 다른 함수를 인자로 받는 경우

function double(num) {
	return num * 2;
}
//doubleNum은 콜백함수와 num을 입력받아 콜백함수의 배개변수로 num을 전달
function doubleNum(func,num) {
	return func(num);
}

/*
- doubleNum은 다른 함수를 인자로 받는 고차 함수
- doubleNum의 첫번째 인자 func에 함수가 들어올 경우 함수 func는 함수 doublNum의 콜백함수가 됨
- 아래와 같이 output이라는 변수에 
	double을 콜백함수로 갖는 doubleNum 고차 함수가 할당됨*/
let output = doubleNum(double, 4);
console.log(output);
//8

[예시2] 함수를 리턴하는 경우

// 다른 함수를 리턴하는 고차 함수
function adder(num) {
	// 매개변수를 받아서 고차함수의 배개변수와 더해주는 함수
	return function (added) {
		return num + added;
	};
}

/* 
- 함수 adder은 다른 함수를 리턴하는 고차 함수
- adder은 인자 한개를 입력받아 함수를 리턴
- 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한값을 리턴
*/
let output = adder(5)(3);
console.log(output);
//8

[예시3] 함수를 인자로 받고, 함수를 리턴하는 경우

function double(num) {
	return num. * 2;
}
/* 
doubleAdder(5, double)을 호출하면 매개변수 added에 5가 전달되고
func 매개변수에는 double 함수가 전달됨*/
function doubleAdder(added, func) {
	const doubled = func(added); //doubled의 값은 10이 됨
	// 그후에 반환된 익명함수는 num 매개변수를 받아 [3+10]의 값을 반환
	return function (num) {
		return num + doubled;
	};
}

doubleAdder(5, double)(3);
/* doubleAdder가 리턴하는 함수를 변수에 저장하고
변수에 num 인자를 주어 값이 나오게 하기 */
const addTwice3 = doubleAdder(3, double);
addTwice(2);
//8

📌 내장 고차 함수

: Javascript에는 기본적으로 내장된 고차 함수

FILTER

: 특정 조건을 만족하는 요소를 걸러냄
→ true,false를 리턴

이럴때사용!

만화책 식객 27권의 정보가 배열에 담겨있다. 출판연도가 2003년인 단행본만 담은 배열을 만드세요!

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 

// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003);

[코플릿 13번] 정수를 요소로 갖는 배열과 정수(num)를 입력받아 num을 배열에 추가하고 정렬한다고 가정할 경우, num의 인덱스(배열에서 몇번째)를 리턴해야 합니다.

let output = getIndex([5, 4, 1, 3], 2);
console.log(output); // --> 1

function getIndex(arr, num) {
  return arr.filter (function(el) {
    return el < num
    // num보다 작은 el의 값을 포함하고 있는 배열의 길이를 
    // 알기 위해 마지막에 .length를 붙임
  }).length
}

MAP

: 배열의 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)된다.

map 메서드는 인자로 함수를 전달받음
전달 받은 함수에 배열읭 요소를 하나씩 전달함
함수가 요소를 전달받아서 리턴하는 값이 새로운 요소가 됨

이럴때 사용!

만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 책의 부제(subtitle)만 담은 배열을 만드세요.

// 만화책 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;
}; 

// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]

[코플릿 16번] 문자열을 요소로 갖는 배열을 입력받아 각 요소의 길이를 요소로 갖는 새로운 배열을 리턴해야 합니다.
```
function getLengthOfElements(arr) {
  return arr.map(function(obj) {
    return obj.length;
  })
}
```

REDUCE

: 배열의 각 요소를 특정 방법에 따라 원하는 하나의 형태로 응축

이럴때사용!

만화책 식객 27권의 정보가 배열에 담겨있습니다. 각 단행본의 평점의 평균을 리턴하세요.

/ 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
];

// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;

[코플릿 23번] number 타입을 요소로 갖는 배열을 입력받아 배열의 모든 요소의 합을 리턴해야 합니다.

function computeSumOfAllElements(arr) {
  // TODO: 여기에 코드를 작성합니다.
  return arr.reduce(function(acc, cur) {
    const newAcc = acc + cur;
    return newAcc;
  },0)
}

📌 고차함수의 중요성

고차함수 왜 써?

: 복잡한 어떤 것을 압축해서 핵심만 추출한 상태인 추상화가 가능해서 사용

🙋🏻‍♀️회고

섹션 1도 뭔가 두루뭉술하게 어느정도 이해가 가는 것도 힘들었는데 섹션 2는 그냥 시작하자마자 힘들다..

수업난이도에 비해 시간을 너무 안주고 과제의 양이 너무 많아서 정말 밥먹고 자는 시간외에 앉아서 공부안하면 과제 제출도 못할뻔…

얼마 커리큘럼에서 다루는 수업의 양이 방대하면 이렇게 수업 시간을 적게 주는것인지 의문이다…

그리고 그룹회고?라고 해서 외부 강사를 초청해서 하는건데.. 너무 별로다..

취지는 좋으나 강사가 아니기도 해서 수업에 대한 예절?이 너무 없고, 설명 내용이 귀에 들어오지 않는다.. 뭐 좀 더 지켜보고 아니다 싶으면 말씀을 드려야 할 것 같다

NellaFantaJia's TechLog👩🏻‍💻

💡 R=VD

이전 포스트

[05.05~08] solo_아고라스테이츠 만들기

다음 포스트