[Javascript] 고차 함수와 내장 고차 함수

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

🦔일급 객체

---

자바스크립트에는 특별한 대우를 받는 일급 객체들이 존재한다. 이들은 다음과 같은 특징이 있다.

• 변수에 할당할 수 있다.
• 다른 함수의 전달인자로 전달될 수 있다.
• 다른 함수의 결과로서 리턴될 수 있다.

함수를 변수에 할당할 수 있기 때문에 함수를 배열의 요소나 객체의 속성값으로 지정할 수 있다.

🐈고차 함수의 이해

---

고차함수는 함수를 전달인자로 받을수 있고, 함수를 리턴할 수 있는 함수이다.
함수가 일급 객체이기 때문에 고차함수로 활용이 가능하다.

다른 함수의 전달 인자로 전달되는 함수를 콜백 함수라고 한다

함수를 리턴하는 함수를 커링 함수하고 부릅니다.

콜백 함수와 커링함수 모두 고차 함수로 사용된다.

🦜내장 고차 함수 이해

---

• flter
• map
• reduce

filter

배열의 모든 요소에 콜백함수를 적용시킬때, true를 리턴하는 요소들만 모은 새로운 배열을 리턴한다

let arr = [1, 2, 3, 4];
let output = arr.filter(isEven);
function isEven(el) {
  return el % 2 === 0 ;
}
console.log(output);    //[2,4]

let arr = [1, 2, 3, 4];
let output = arr.filter( function(el){
  return el % 2 === 0 ;
  );
console.log(output);    //[2,4]

let arr = [1, 2, 3, 4];
let output = arr.filter( el => el % 2 === 0);
console.log(output);    //[2,4]

다음 세 코드는 동일한 결과를 보여준다.

filterd의 콜백함수 isEven은 짝수가 들어갈 경우 true를, 홀수가 들어갈 경우 false를 출력한다
filter의 콜백함수가 true일 경우 해당 요소는 남고, false일 경우 해당요소는 걸러진다.

map

배열의 모든 요소에 콜백함수를 적용시킨 새로운 배열을 리턴한다

let arr = [1, 2, 3, 4];
let output = arr.map(isDouble);
function isDouble(el) {
  return el * 2 ;
}
console.log(output);    // [2,4,6,8]

let arr = [1, 2, 3, 4];
let output = arr.map(function(el){
  return el * 2 ;
});
console.log(output);    // [2,4,6,8]

let arr = [1, 2, 3, 4];
let output = arr.map( el => el * 2 );
console.log(output);    // [2,4,6,8]

map의 콜백 함수 isDouble은 배열의 모든 요소에 * 2한 값을 반환합니다.

reduce

배열의 모든 요소를 콜백함수에 맞게 하나로 응축 시킨 값을 리턴한다.

let arr = [1, 2, 3, 4];
let output = arr.reduce(sumFunc,0);
function sumFunc(acc,cur) {
  return acc + cur ;
}
console.log(output);    // 10

let arr = [1, 2, 3, 4];
let output = arr.reduce(function(acc,cur){
  return acc + cur ;
},0);
console.log(output);    // 10

let arr = [1, 2, 3, 4];
let output = arr.reduce( (acc,cur) => acc + cur ,0);
console.log(output);    // 10

arr.reduce(function(acc,cal){
  return acc + cal ;
},0);

다음 코드에서 acc는 accumulation의 약자, cur은 current의 약자이다.
가장 뒤에 있는 숫자 0은 초기값이 들어가는 자리이다.

reduce메서드가 실행되면 acc에 초기값이 들어간다.
cur에 배열의 0번째 인데스 값이 들어가고 함수가 실행하며 return이 반환된다.
반환된 return은 다음 acc에 저장되고 다음 cur에는 1번째 인덱스의 값이 들어가고 함수가 실행하며 반복한다.

 

🦦잡담

---

내장고차함수는 이해하면 코테떄 유용하게 사용할것 같다.

이전에 자바로 코테 공부르 했을떄는, 배열, 객체를 다루는일이 나에게는 큰 어려움이 었다.

자바에도 다음 개념이 존재한다면 나의 배움이 부족한거겠지만, 아무튼 나중에 유용하게 사용할 만한 메서드를 배워 기뻤다.

낯설지만 내장 고차 함수 칭구들 반가워 😊😊😊

 

reduce...

reduce에 조건을 넣어서 실행하는 경우도 있다.

이번 코플릿 문제를 풀면서 많이 마주했는데, 코드노트라는 것을 만들어서 코플릿때 문제를 풀면서 어려웠던, 새로 알게된 내용들을 정리해봐야 할것 같다.🐾