[코드스테이츠 FE 45기] _2023.05.10 _ Day 21 (JS_고차 함수)

---

살려주세오 너무 힘들어오 ~!!

하.. 자바스크립트 왜 이렇게 나를 힘들게 하는지

오늘은 Section2 첫 날

언제부터인지 오전에 라이브로 변경되었다...

아침에 너무 졸려서 정신을 못차리고 강의 듣는게 너무 힘들다....

나 새벽 출근은 어떻게 한거지... 그래도 습관을 들여야지 !! 

오늘도 화이팅!!

 

 

---

유닛1 ] 자바스트립트_고차함수 

---

고차함수란?

자바스크립트 배열 고차함수

함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드

를 일컫는다. 요즘 자주 거론되는 함수형 프로그래밍의 핵심이기도 하며, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성이기도 하다.

---

자바스크립트에서 고차함수는 다른 함수를 인자로 받거나, 다른 함수를 반환하는 함수를 의미합니다.

 

즉, 함수를 인자로 받아서 이 함수 내부에서 다른 함수를 실행하거나, 함수를 반환하는 함수가 고차함수입니다.

예를 들어, Array.prototype.map() 함수는 인자로 받은 함수를 각 배열 요소에 대해 실행하여 새로운 배열을 반환합니다.

이때, map() 함수가 인자로 받은 함수는 고차함수입니다.

Array.prototype.filter() 함수도 마찬가지로, 인자로 받은 함수를 각 배열 요소에 대해 실행하여 조건을 만족하는 요소만 남긴 새로운 배열을 반환합니다.

고차함수를 사용하면 코드의 중복을 줄이고 가독성을 높일 수 있습니다.

또한, 함수형 프로그래밍에서는 함수를 일급 객체로 취급하므로, 함수를 인자로 받는 고차함수가 매우 중요한 역할을 합니다.

 

---

JavaScript에서는 여러 가지 유형의 고차함수가 있습니다.

종류	설명
map ()	주어진 함수를 사용하여 배열 내의 모든 요소를 변환하고 새로운 배열을 반환
filter ()	주어진 함수를 사용하여 배열에서 조건을 만족하는 요소들만 추출하여 새로운 배열을 반환
reduce ()	주어진 함수를 사용하여 배열의 각 요소를 왼쪽에서 오른쪽으로 축소하여 하나의 값으로 만듦
some ()	주어진 함수를 사용하여 배열의 요소 중 하나라도 조건을 만족하면 true, 아니면 false를 반환
every ()	주어진 함수를 사용하여 배열의 모든 요소가 조건을 만족하면 true, 아니면 false를 반환
find ()	주어진 함수를 사용하여 배열에서 조건을 만족하는 첫 번째 요소를 반환
findIndex ()	주어진 함수를 사용하여 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 반환
forEach ()	주어진 함수를 사용하여 배열의 각 요소에 대해 한 번씩 실행
flat ()	중첩된 배열을 펼쳐서 새로운 배열을 반환
flatMap ()	배열 내의 각 요소를 변환하고, 그 결과를 펼쳐서 새로운 배열을 반환

이러한 고차함수들은 함수형 프로그래밍에서 매우 중요하며, 코드의 가독성과 유지보수성을 향상시키는 데 도움이 됩니다.

고차 함수들을 사용하려면, 각 함수의 매개변수로 콜백 함수를 전달해야 합니다.

이 콜백 함수는 고차 함수 내부에서 실행되며, 일반적으로 매개변수로 현재 배열 요소나 객체 프로퍼티, 인덱스 등을 받아와서 그 값을 기반으로 새로운 값을 반환합니다.

 

간단한 예시로, map() 함수를 사용하여 배열의 모든 요소에 2를 곱해보겠습니다.

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

const multipliedNumbers = numbers.map(function(number) {
  return number * 2;
});

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

위 코드에서 map() 함수는 numbers 배열의 모든 요소를 돌며, 각 요소에 대해 전달받은 콜백 함수를 실행합니다. 이 콜백 함수는 **number**라는 매개변수를 받아와서 해당 요소에 2를 곱한 값을 반환합니다. map() 함수는 각 요소에 대해 반환된 값을 모아서 새로운 배열을 반환합니다.

따라서 위 코드를 실행하면 multipliedNumbers 배열에 **[2, 4, 6, 8, 10]**이라는 값이 저장됩니다. 이렇게 고차 함수를 사용하면 반복문 등을 사용하지 않고도 간단하게 배열 요소를 처리하거나 필요한 값을 추출할 수 있습니다.

---

콜백 함수

콜백 함수는 함수의 인자로 전달되는 함수로, 다른 함수의 동작 결과에 따라 실행되는 함수이다. 즉, 콜백 함수는 함수를 인자로 전달 받아 특정 상황에서 실행되는 함수이다. 콜백 함수를 이용하면 비동기적인 처리와 함수의 재사용성을 높일 수 있다.

setTimeout(function() {
  console.log('This is a callback function.');
}, 1000);

위 코드에서 첫 번째 인수로 전달된 익명 함수가 콜백 함수이며, 이 함수는 1초 후에 실행됩니다.