프론트엔드 공부/자바스크립트

고차함수, 일급객체, 내장고차함수(filter, map, reduce)

반딧불

오늘 새롭게 시작된 섹션2의 고차함수는 내 멘탈을 탈탈 털어버렸다..

일급객체

JavaScript에 여러 요소들이 있지만 특별한 대우를 받는 일급 객체(킹갓제네럴 퍼스트클래스)가 있으며 일급 객체 중 대표적으로 하나가 함수이다. (JavaScript의 함수는 다른 모든 객체처럼 속성과 메서드를 가질 수 있으므로 일급(first-class) 객체다. 다른 객체와 함수를 구별하는 것은, 함수는 호출할 수 있다는 점!)
일급객체로써 함수는 :
1. 변수에 할당(assignment) 할 수 있다.
2. 다른 함수의 전달인자(argument)로 전달될 수 있다.
3. 다른 함수의 결과로서 리턴될 수 있다.

const plusFive = function (num) {
  return num + num + num + num + num;
};

// 변수 plusFive에는 함수가 할당되어 있으므로 (일급 객체), 
// 함수 호출 연산자 '()'를 사용해 변수에 인자를 할당하고 바로 사용할 수 있다.
output = plusFive(2); 
console.log(output); // --> 10

/*
함수는 변수에 저장된 데이터를 전달 인자로 받거나, 리턴 값으로 사용할 수 있다. 
함수도 변수에 저장될 수 있기 때문에 함수를 인자로 받거나, 리턴 값으로 사용할 수 있다. 
*/

고차함수, 콜백함수, 커리함수

고차 함수(Higher-Order Function)

고차 함수(higher order function)는 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수다.
함수 내부에서 변수에 함수를 할당할 수 있고 함수는 그 변수를 리턴할 수 있다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있다. 어떤 고차 함수에 함수를 전달인자로 전달하고, 고차 함수는 함수 자체를 리턴한다. 변수가 빠졌을 뿐, 동일하게 동작한다.
즉, 함수를 다루는 함수를 말한다. 이를 통해 함수의 재사용성과 추상화를 높일 수 있다.

고차함수 예제

1. 다른 함수를 인자로 받는 경우

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

// doubleNum 함수는 고차 함수이다. (다른 함수를 인자로 받음)
// doubleNum 함수의 인자 func에 함수가 들어올 경우
// func은 doubleNum의 콜백 함수이다.
function doubleNum(func, num) { 
  return func(num);				
}

// 아래의 경우 double은 doubleNum의 콜백 함수이다.
doubleNum(double, 4); // --> 8

2. 함수를 리턴하는 경우

//abc 함수는 고차 함수이다. (다른 함수를 리턴한다. *아래의 num - def가 들어있는 함수)
function abc(def) {
  return function (num) {
    return num - def;
  }
}
// abc(5)는 함수이므로 호출 연산자 '()'를 사용 할 수 있다.
abc(5)(2) // -> -3  *def 자리에 5, num 자리에 2가 들어간다. 2-5 = -3

// abc 함수가 리턴하는 함수를 변수에 저장할 수 있다.
// 이는 자바스크립트에서 함수는 일급 객체이기 때문이다.
const subtract5 = abc(5);
subtract5(10) // -> 5  * def 자리에 5, num 자리에 10이 들어간다. 10-5 = 5

3.함수를 인자로 받고, 함수를 리턴하는 경우

function double(num) {
  return num * 2;
}
// doubleSubtractor 함수는 고차 함수이다.
function doubleSubtractor(subtract, func) {
  const doubled = func(subtract);
  return function (num) {
    return num - doubled;
  }
}
// double 함수는 doubleSubtractor 함수의 콜백으로 전달되었다.
doubleSubtractor(5, double)(18); // --> 8

콜백 함수(Callback Function)

다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.
콜백 함수의 이름은 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백(call back)이라는 이름이 붙여졌다.
콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있다.
부르는 함수(caller)는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있다.
아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있고, 특정 작업의 완료 후에 호출하는 경우도 있다.
어떤 이벤트가 발생하거나 조건이 충족되었을 때 호출되어 특정 작업을 수행하게 된다. 보통 비동기적인 상황에서 많이 사용되며, JavaScript에서 이벤트 핸들러 함수나 setTimeout 함수 등에서 콜백 함수를 사용할 수 있다.
비동기 작업을 위해 사용되는 콜백의 특성상 비동기 이후에 처리될 작업들을 콜백 내부에 작성해주어야 한다. 콜백이란 개념을 처음 접하는 프로그래머들은 그렇지 않고 콜백 안에 콜백을 무는 식으로 작성하게 되는 경우가 많다. 콜백지옥에 빠지지않도록 고려해야한다.

커리 함수(Curry Function)

여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수의 연속적인 호출로 바꾸는 기법이다. 이를 통해 함수를 조합하고 재사용성을 높일 수 있다.
커리된 함수(Curried function)이란 여러 개의 매개변수를 받는 대신에 항상 정확히 하나의 매개변수를 받는 함수를 말한다.
‘함수를 리턴하는 함수’는 모양새가 특이한 만큼, 부르는 용어가 따로 있다.
‘함수를 리턴하는 함수’를 고안해 낸 논리학자 하스켈 커리(Haskell Curry)의 이름을 따, 커리 함수라고 한다.
따로 커리 함수라는 용어를 사용하는 경우에는, 고차 함수란 용어를 ‘함수를 인자로 받는 함수’에만 한정해 사용하기도 한다.
정확하게 따지자면 고차 함수가 커리 함수를 포함한다.
커리 함수(Curry Function)는 다음과 같이 작동한다.
1. 함수에 전달된 인자가 원래 함수의 인자 개수보다 적은 경우, 새로운 함수를 반환한다.
2. 새로 반환된 함수는 인자를 받아 원래 함수의 인자를 채우고 실행.
3. 인자가 충분히 채워지면, 원래 함수를 실행.
4. 원래 함수의 실행 결과를 반환한다.

예를 들어, 다음과 같이 두 개의 인자를 받는 함수가 있다고 가정하면

function add(x, y) {
  return x + y;
}

이 함수를 커리 함수로 변환하면 다음과 같이 만들 수 있다.

function add(x) {
  return function(y) {
    return x + y;
  }
}

이제 add 함수를 호출할 때 하나의 인자만 전달하면, 새로운 함수가 반환되며, 이후에 다시 함수를 호출하여 다른 인자를 전달할 수 있다.

const addFive = add(5);
addFive(3); // 8
addFive(7); // 12

커리 함수는 함수 조합과 부분 적용(partial application)을 할 때 유용하게 사용될 수 있다. 함수 조합은 함수를 조합하여 새로운 함수를 만들어내는 것이고, 부분 적용은 함수의 일부 인자를 미리 고정하여 새로운 함수를 만드는 것. 커리 함수를 사용하면 이러한 작업을 간단하게 수행할 수 있다.

배열의 내장 고차 함수

자바스크립트가 기본적으로 제공해주는 기능이 달린 함수를 내장 함수라고 한다.
예를 들어 배열에서 메소드가 있다. 이것이 내장 함수이다.(해당 내용 하단 참고)
배열 메소드들 중 일부가 고차함수에 해당한다 : forEach(), find(), filter(), map(), reduce(), sort(), some(), every()
배열에 메소드를 직접 만들어 추가할 수도 있다.
이러한 배열 메소드 중에 함수를 인자로 받고 함수를 값으로 변환할 수 있는 함수를 내장 고차함수하고 한다.

- filter()

filter() 메서드는 주어진 함수의 테스트를 통과한 요소를 모아서 새로운 배열을 만든다. 이 메서드는 배열의 각 요소를 순회하면서 주어진 콜백 함수를 호출하고, 콜백 함수가 true를 반환한 요소만을 새로운 배열에 추가한다.

filter() 메서드는 다음과 같은 문법을 갖는다.

// filter의 구문    
arr.filter(callback(element[, index[, array]])[, thisArg])

/*
callback
각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.

다음 세 가지 매개변수를 받습니다.
element
처리할 현재 요소.

index Optional
처리할 현재 요소의 인덱스.

array Optional
filter를 호출한 배열.

thisArg Optional
callback을 실행할 때 this로 사용하는 값.
*/

callback: 각 요소를 검사하는 함수로, 인수로 현재 요소, 해당 요소의 인덱스, 그리고 검사를 수행하는 배열 전체가 차례로 전달된다. 이 함수는 true 또는 false 값을 반환해야 한다.
thisArg (선택 사항): callback 함수 내에서 this로 참조되는 객체를 설정할 수 있다. 기본값은 undefined.

filter() 메서드의 반환 값은 콜백 함수가 true를 반환한 요소로 이루어진 새로운 배열이다. 예를 들어, 1부터 10까지의 숫자 중에서 짝수만을 걸러내는 코드는 다음과 같이 작성할 수 있다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter((num) => {
  return num % 2 === 0;
});

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

위 코드에서는 filter() 메서드에 num이라는 인수를 받아 해당 요소가 짝수인지 검사하는 함수를 전달한다. 이 함수가 true를 반환하는 요소만이 evenNumbers라는 새로운 배열에 추가되어 반환된다.

다른 예제)

// 예제1. 넘버 1~6까지의 배열중 짝수 구하기

const numbers = [1, 2, 3, 4, 5, 6];
function isEven(x) {
    return x % 2 === 0;
}
//.filter()  안에 함수를 집어넣을 수 있다.
const evenNumbers = numbers.filter(isEven);
console.log(evenNumbers); // --> [2, 4, 6]


// 예제2. 10이하의 모든 요소 제거후 새로운 배열 반환

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // --> [12, 130, 44]


// 예제3. 배열 내용 검색

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
// 검색 조건에 따른 배열 필터링(쿼리)
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // --> ['apple', 'grapes']
console.log(filterItems('an')); // --> ['banana', 'mango', 'orange']

- map()

map() 메서드는 주어진 배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아서, 새로운 배열을 만든다. 이 메서드는 원래 배열의 요소를 변형시키지 않으며, 새로운 배열에 변형된 요소를 담아서 반환한다.

map() 메서드 문법

arr.map(callback(element[, index[, array]])[, thisArg])

callback: 배열의 각 요소에 대해 실행할 함수로, 인수로 현재 요소, 해당 요소의 인덱스, 그리고 배열 전체가 차례로 전달된다. 이 함수는 변형된 값을 반환해야 한다.
thisArg (선택 사항): callback 함수 내에서 this로 참조되는 객체를 설정할 수 있다. 기본값은 undefined

map() 메서드의 반환 값은 각 요소에 대해 callback 함수를 호출한 결과를 모아서 만든 새로운 배열이다. 예를 들어, 다음 코드는 1부터 5까지의 숫자를 각각 2배한 새로운 배열을 만든다.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

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

위 코드에서는 map() 메서드에 num이라는 인수를 받아 해당 요소를 2배한 값을 반환하는 함수를 전달한다. 이 함수가 반환한 값을 새로운 배열인 doubledNumbers에 추가하여 반환한다.

다른 예제)

// 예제1. array1 배열에 전체 2곱하여 새로운 배열로 반환  
const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);
console.log(map1); // --> [2, 8, 18, 32]


// 예제2 인자를 받는 함수를 사용하여 숫자 배열 재구성하기
/*
다음 코드는 인자가 한개인 함수를 이용하여 map이 어떻게 동작하는지 나타냅니다. 
인자인 배열과 안의 요소들은 map을 통해 순회하면서 원본 배열로 부터 자동으로 할당됩니다.
*/
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

- reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하며, 하나의 결과값을 반환한다. 배열 요소를 순차적으로 처리하며, 이전에 콜백 함수에서 반환한 값을 다음 호출에 인수로 제공한다.

reduce() 메서드는 다음과 같은 형식으로 사용된다.

// reduce 구문
arr.reduce(callback[, initialValue])

callback: 각 요소에 대해 실행할 콜백 함수로서, 다음 세 가지 인수를 받는다.
- accumulator: 콜백 함수의 반환값이 누적되는 값.
- currentValue: 현재 처리되고 있는 요소의 값.
- index: 현재 처리되고 있는 요소의 인덱스. (선택적)
- array: reduce() 메서드가 호출된 배열. (선택적)
initialValue (선택적): 콜백 함수에 첫 번째 호출에서 제공되는 값입니다. 배열이 비어있는 경우 초기값을 제공하지 않으면 TypeError가 발생한다.

reduce() 메서드는 배열 요소를 하나의 값으로 축소하는 데 유용하게 사용된다. 예를 들어, 다음과 같은 배열이 있다고 가정하면

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

이 배열의 모든 값을 더하는 코드는 다음과 같이 작성할 수 있다.

const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

위 예제에서 reduce() 메서드에 초기값으로 0을 제공하고, 콜백 함수에서 현재 요소의 값을 누적값에 더해 반환하도록 했다. 이를 통해 배열의 모든 요소를 더한 결과를 얻을 수 있다.

다른 예제)

// 예시1. 만화책 배열의 평균점수를 가져오기
//단행본 모음
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;

reduce 다양한 예제 :

Array.prototype.reduce() - JavaScript | MDN

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

developer.mozilla.org

배열 메소드를 직접 만들기

JavaScript에서는 배열 또한 객체이다. 따라서 객체의 속성을 확장하는 것과 마찬가지로, 배열의 프로토타입 객체에 새로운 메소드를 추가하여 배열 메소드를 만들 수 있다.

아래는 Array.prototype을 확장하여 myMethod라는 새로운 배열 메소드를 만드는 예시.

Array.prototype.myMethod = function(callback) {
  // 배열에 대한 작업을 수행
}

위와 같이 작성하면, 이제 배열에서 .myMethod()를 호출하여 해당 함수를 실행할 수 있다. 다만, 내장된 메소드와 이름이 충돌하지 않도록 유의해야 한다. 직접 만든 메소드는 내장된 배열 메소드와는 달리, 성능상 문제를 일으키거나 예기치 않은 동작을 할 가능성이 있으므로, 사용하기 전에 충분한 테스트와 검증이 필요하다.

배열의 내장 함수(그림으로 알아보기!)

자바스크립트에서 배열의 내장 함수는 배열을 조작하거나 배열의 요소를 검색하는 등의 다양한 작업을 수행할 수 있다.

먼저 그림으로 파악하기 전에 그림에서 표현하는게 어떤걸 나타내는지 보면

각각의 배열 아이템에 적용
적용할 콜백함수
적용할 값
[파란색대괄호] : 새로운 배열로 반환됨
"..." 문자열로 반환됨

아래 메서드들은 사용되는 우선순위에 따라 분류되었으며. 가장 많이 사용되는 것들이 맨 위에 있다.

- 새 배열을 반환하는 메서드

map(callback) : 배열의 각 요소에 대해 주어진 콜백 함수를 실행한 결과를 모아서 새로운 배열을 반환합니다.
filter(callback) : 주어진 콜백 함수의 반환값이 true인 요소만 모아서 새로운 배열을 반환합니다.
join([separator]) : 배열의 모든 요소를 문자열로 결합합니다. separator는 구분자 문자열로, 지정하지 않으면 쉼표가 기본값입니다.
concat([item1[, item2[, ...]]]) : 배열의 요소와 지정한 값을 합쳐서 새로운 배열을 반환합니다.
flat([depth])- 배열에 중첩된 배열이 포함된 경우 모든 배열이 상위 수준으로 이동하므로 새 배열이 하나만 생성됩니다.
slice([begin[, end]]) : 배열의 일부분을 추출하여 새로운 배열을 반환합니다.

- 현재 배열을 변환하는 메서드

이러한 방법을 사용할 때 기억해야 할 핵심은 이전 기능과 마찬가지로 새 배열을 반환하지 않는다는 것입니다. 하지만 초기 배열을 변형시킵니다.

forEach(callback) : 배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다.
push(element1, element2, ..., elementN): 배열의 끝에 하나 이상의 요소를 추가합니다.
pop(): 배열의 마지막 요소를 제거하고 반환합니다.
shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
sort([compareFunction]) : 배열을 정렬합니다. compareFunction을 지정하지 않으면 유니코드 순으로 정렬됩니다.
fill(value, start, end): 배열의 시작 인덱스부터 끝 인덱스까지 주어진 값으로 채웁니다. 시작 인덱스와 끝 인덱스는 옵션으로 제공될 수 있으며, 기본값은 각각 0과 배열의 길이입니다.

- 검색을 수행하는 메서드

find(callback) : 주어진 콜백 함수의 반환값이 true인 첫 번째 요소를 반환합니다.
findIndex(callback) : 주어진 콜백 함수의 반환값이 true인 첫 번째 요소의 인덱스를 반환합니다.
indexOf(element[, fromIndex]) : 주어진 요소가 배열에서 처음으로 나타나는 인덱스를 반환합니다. 없으면 -1을 반환합니다.
some(callback) : 하나 이상의 요소가 주어진 콜백 함수의 조건을 만족하는지 검사합니다.
every(callback) : 모든 요소가 주어진 콜백 함수의 조건을 만족하는지 검사합니다.
includes(element[, fromIndex]) : 주어진 요소가 배열에 포함되어 있는지 검사합니다.

- 기타

reduce(callback[, initialValue]) : 각 요소에 대해 주어진 콜백 함수를 실행하며, 하나의 결과값을 반환합니다.
reduceRight(callback[, initialValue]) : 배열의 뒤쪽부터 각 요소에 대해 주어진 콜백 함수를 실행하며, 하나의 결과값을 반환합니다.
lastIndexOf(element[, fromIndex]) : 주어진 요소가 배열에서 마지막으로 나타나는 인덱스를 반환합니다. 없으면 -1을 반환합니다.
splice(start[, deleteCount[, item1[, item2[, ...]]]]) : 배열의 내용을 추가/삭제하여 배열을 수정합니다.

이 외에도 배열의 내장 함수는 매우 다양하니 필요에 따라서 자세한 내용을 찾아봐야한다..

고차 함수를 사용하는 이유

고차 함수를 사용하는 이유는 코드의 재사용성을 높이기 위해서 사용한다.
고차 함수는 다른 함수를 매개변수로 받거나 함수를 반환할 수 있는 함수를 말한다.
이를 이용하면 함수의 로직을 일반화하고 추상화하여 다양한 상황에서 적용할 수 있다.
- 추상화란? 추상화는 복잡한 시스템, 데이터 또는 프로세스에서 중요한 부분만을 강조하고, 불필요한 부분은 무시하여 간결하게 만드는 것을 말한다. 이를 통해 복잡한 것을 이해하기 쉽게 만들고, 추상적인 개념을 구체적으로 나타내기 위해 사용된다.
  예를 들어, 자동차를 추상화하면, 엔진, 바퀴, 핸들, 브레이크 등 자동차의 주요 구성 요소에만 초점을 맞추고, 이를 통해 자동차의 기능과 특성을 이해할 수 있다. 이렇게 추상화를 통해 복잡한 시스템을 단순화하여 이해할 수 있게 되고, 이를 기반으로 다양한 문제를 해결할 수 있다.
또한 고차 함수를 사용하면 코드의 중복을 줄이고 코드의 가독성을 높일 수 있다.

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

고차 함수는 추상화를 가능하게 해주는 함수이다. 이 함수를 사용하면 중복을 제거하고 코드를 간결하게 만들 수 있다. 이점으로는 다음과 같은 것들이 있다.

코드의 중복 제거
- 고차 함수를 사용하면 유사한 기능을 하는 코드를 여러 번 작성하지 않아도 된다. 중복된 코드를 작성하는 것은 오타 등의 오류를 발생시키는 위험이 있으므로, 고차 함수를 사용하여 중복을 제거할 수 있다.
코드의 가독성 향상
- 고차 함수를 사용하면 코드의 가독성이 향상된다. 예를 들어, forEach() 메서드를 사용하여 배열의 요소를 출력하는 코드는 다음과 같다.

const arr = [1, 2, 3];

arr.forEach((item) => {
  console.log(item);
});

위 코드에서 forEach() 메서드의 콜백 함수를 보면, 이 함수가 어떤 일을 하는지 바로 이해할 수 있다. 따라서, 이 코드는 더욱 가독성이 높아진다.

코드의 재사용성
- 고차 함수를 사용하면 코드를 재사용하기 쉬워진다. 예를 들어, filter() 메서드를 사용하여 배열에서 원하는 요소만을 추출하는 코드는 다음과 같다.

const arr = [1, 2, 3];

const filtered = arr.filter((item) => {
  return item > 1;
});

위 코드에서 filter() 메서드의 콜백 함수를 바꾸면, 배열에서 원하는 요소를 추출하는 기능을 다양하게 변경할 수 있다. 이렇게 기능을 변경하면서도, 코드를 다시 작성하지 않아도 되므로 재사용성이 높아진다.

잘 모르는 부분

고차함수에서 의미 정리를 다시 해봐야 할 것 같다.

고차함수에서 전달인자를 받는다.
함수를 리턴할 수 있는 함수다.
함수는 함수를 담은 변수를 전달인자로 받을 수 있다.
함수 내부에서 변수에 할당할 수 있다.
함수 내부에서 변수에 할당한 함수는 변수를 리턴할 수 있다.
고차함수를 전달인자로 전달하고, 고차함수는 함수 자체를 리턴한다. 변수가 빠졌을 뿐, 동일하게 작동한다.
콜백함수가 무었인가?
- 다른 함수의 전달인자로 전달되는 함수를 뜻한다.

어려웠던 부분

고차함수 부분은 모든 부분을 다 처음 접하는 것들이라. 처음부터 끝가지 모든게 어려웠다. 시간은 촉박했고 이해는 되지않았다. 어떤 상황에 어떤 메서드를 접목시켜야 할지 아직 잘 모르겠다. 많이 사용해봐야 필요한곳에 사용할 수 있을것 같다.

느낀점

고차함수는 이론으로 이해하기보다 과제를 풀어보면서 어떻게 사용하는지 파악하고 이해하는게 더 수월했다. 반딧불학습으로 반강제?로 다시 차분하게 문제를 풀어보니 하나둘 풀리기 시작했다. 처음 배웠던 방법에서 고차함수를 사용하니 더 간결해지는것 같았다. 내가 어려워 할수록 더 간결해진다ㅠ 0,1 밖에 모르는 컴퓨터한테 진느낌.ㅋㅋ

참고:
https://www.lambda3.com.br/2017/01/map-filter-reduce-javascript/
https://sooknise.tistory.com/75
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
https://hanamon.kr/javascript-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98%EC%99%80-%EC%BD%9C%EB%B0%B1-%EC%9D%BC%EA%B8%89%EA%B0%9D%EC%B2%B4%EB%9E%80/

저작자표시 비영리 변경금지

'프론트엔드 공부 > 자바스크립트' 카테고리의 다른 글

객체지향 프로그래밍 OOP (캡슐화, 상속, 추상화, 다형성) (0)	2023.01.13
클래스(class)와 인스턴스(instance) 그리고 객체(object) (0)	2023.01.13
배열, 객체를 const로 선언후 요소나 속성을 추가할 수 있는 이유 (0)	2023.01.11
javascript의 undefined는 정확히 무슨 뜻일까? (null vs undefined) (0)	2023.01.05
koans 문제풀이로 알게된 점 (0)	2023.01.04

Contents

새소식

인기 검색어

고차함수, 일급객체, 내장고차함수(filter, map, reduce)

일급객체

고차함수, 콜백함수, 커리함수

고차 함수(Higher-Order Function)

콜백 함수(Callback Function)

커리 함수(Curry Function)

배열의 내장 고차 함수

- filter()

- map()

- reduce()

배열 메소드를 직접 만들기

배열의 내장 함수(그림으로 알아보기!)

- 새 배열을 반환하는 메서드

- 현재 배열을 변환하는 메서드

- 검색을 수행하는 메서드

- 기타

고차 함수를 사용하는 이유

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

잘 모르는 부분

어려웠던 부분

느낀점

'프론트엔드 공부 > 자바스크립트' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바