Javascript 고차함수 ( map,filter,reduce)

전예훈·2023년 3월 14일
0

고차함수 와 콜백 함수

고차 함수란 무엇 일까?🤔

고차 참수란, 함수를 파라미터로 전달 받거나 연산의 결과로 반환해 주는 메서드를 일컫는 말입니다.

고차 함수는 함수를 전달인자로 받을 수 있고, 함수를 리턴 할 수 있는 함수입니다.

쉽게 말하자면 우리가 정의해서 사용하는 함수가 함수를 인자로 받아서 사용하거나 결과 값으로 함수를 반환하게 한다면 그것을 고차 함수라고 부를 수 있습니다.

**즉 함수를 정의할 때 함수를 사용하는 함수

콜백 함수란 무엇일까?🤔

다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 합니다.

콜백 함수의 이름은, 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백이라는 이름이 붙여졌고 콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있습니다.

부르는 함수(caller)는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있다.
아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있고, 특정 작업의 완료 후에 호출하는 경우도 있다.

고차 함수를 사용하는 이유???

고차 함수를 사용하는 이유는 추상화를 통한 효율성 향상 때문에 사용 하고 있습니다.

여기서 추상화란?

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것으로 일상 생활 에서 추상화가 아닌 것을 찾아 보기 힘들 정도입니다. 우리가 자주 이용하는 버스나 지하철 사이트 주소창 카톡창 등등 수많은 것 들은 추상화를 통해 만들어 졌습니다. 우리가 지금 사용하고 있는 자바스크립트도 프로그래밍 언어의 추상화의 결과입니다.!

그러면 추상화 와 고차 함수? 둘이 서로 가지는 장점은?

앞서 말했듯이 추상화 = 효율성 향상 즉 생산성이 향상됩니다.

우리는 자바스크립트 문법을 올바르게 사용하는 것만으로도 다양한 프로그램을 손쉽고 다양하게 사용할 수 있습니다. 추상화 관점에서 함수를 보는 것은 함수는 사고 또는 논리의 묶음이라고 할 수 있습니다.

따라서... 고차 함수는 추상화를 한단계 높인 것이라고 볼 수 있다.

  • 함수 = 값을 전달받아 값을 리턴한다. = 값에 대한 복잡한 로직은 감춰있다. = 값 수준에서의 추상화
  • 고차 함수는 이 추상화의 수준을 사고의 추상화 수준으로 끌어올린다.
  • 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
  • 사고의 추상화: 함수(사고의 묶음)을 전달받아 처리하는 수준

고차함수의 종류 (map, filter, reduce ...)

map()

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. array를 돌면서 array 로 결과가 출력된다.


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

function multiplyTwo(number){
    return number *2;
}
let newNumbers = numbers.map(multiplyTwo);
console.log(newNumbers); // [2, 4, 6, 8, 10, 12, 14, 16, 18]

filter()

주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환.
한마디로 find()의 찾아서 값을 반환하는 기능과 map()의 배열 생성 기능의 융합 버젼.

ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다"라고 정의되어 있습니다. 예제를 통해 filter의 정의를 살펴보면 다음과 같습니다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

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

console.log(result);
// [4, 5]

reduce()

고차 함수에 종류중에서 제일 헷갈렸던 부분중 하나였습니다.

reduce는 배열의 왼쪽 부터 콜백 함수를 실행후 누산을 하게 되는데
기본적인 reduce 의 값은

배열.reduce( function(acc, cur, index, arr) {

} , initialValue )

acc 는 처음 값
cur 은 현재 값
index 는 현재 인댁스 ex) cur[index]
arr 은 원본 배열을 뜻하고

마지막 initialvalue 값은 초기값을 뜻합니다. 만약에 이 초깃값이 없으면
배열의 첫 번째 요소를 사용하게됩니다.

빈 배열에서 초기값이 없이 reduce()를 호출 하게 되면 오류가 발생합니다.


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

const result = numbers.reduce((number1, number2) => number1 + number2, 10); 
/* 
  10,1 => 11   initialValue값, 배열값 1번째 부터 시작
  11,2 => 13
  13,3 => 16
  16,4 => 20
*/
console.log(result); // 20;

이외에 공부 하고 싶었던거 메소드 체이닝
페어님과 공부하면서 메소드체이닝에대해서 알아보면 좋을 것같아서 조사하였습니다.

Method Chaining (메소드 체이닝)

연속적인 코드 줄에서 개체의 Method를 반복하여 호출 하는 것을 의미합니다.

메서드의 반환값 또한 객체이기 때문에 .(닷)을 사용하면 연속적으로 메서드를 사용할 수 있습니다.

메서드의 실행 결과로 객체가 반환되면, 해당 객체를 사용하여 다시 메서드 실행하게되는데.

이렇게 메서드가 이어져있는 모습이 사슬 같다고 해서 Method Chaining이라는 이름으로 불린다.

코드는 눈으로 보는 것보다 직접 쳐보면서 하는 것이 이해가 되므로 예제를 보면서 하겠습니다.


// => 메서드 체이닝을 사용하지 않는 경우
function solution(str){
  var strArr=[]
  strArr = str.split('')
  strArr = strArr.reverse()
  strArr = strArr.join('')
  return strArr
}
// => 메서드 체이닝을 사용하는 경우
function solution(str){
  return str.split('').reverse().join(''); 
}
// => 메서드 체이닝이 가능한 메서드 중 일부
str.split('').sort().reverse().map(val=> val+'1').join(' | ').toUpperCase().toLowerCase()

메서드 체이닝을 너무 많이 하면 한줄로 정리 되기 때문에 가독성은 떨어집니다.
그래서 상황에 맞게 메서드 체이닝을 하기전 코드에 익숙해 지고나서 혼자서 알고리즘을 풀때
사용하면 좋을 것 같다는 것을 느꼈습니다.

profile
더욱더 QA스럽게!

0개의 댓글