JS 고차함수 [TIL 23일차]

JUNGHUN KIM·2021년 7월 7일
0
post-custom-banner

함수

자바스크립트에는 일급객체(first-class-citizen)이 있으며 함수또한 대표적인 일급 객체
일급 객체라는건 함수로 무엇이든 할 수 있다는 이야기.

함수의 특징

- 변수에 할당(assignment)할 수 있다.

예시(함수 표현식은 변수에 할당한 다음 사용 가능)

let a = function(num){
	return num * num
}

output = a(10) // 결과는 100

- 다른 함수의 인자(argument)로 전달될 수 있다(콜백함수)

예시

function a(b) {  
    return b *2
}

function double(x,y) { 
    return x(y);
}

let output = double(a,10)  //double이라는 함수에 인자로 a변수(함수)의 주소값을 보냄 

- 다른 함수의 결과로서 리턴될 수 있다.(커리함수)

예시1 (클로저) /함수를 리턴하는 경우

function adder(added) {
  return function (num) {
    return num + added;
  };
}

let output = adder(5)(3) // 결과값 8
const add3 = adder(3)
output = add3(2) // output ==> 5

예시2 / 함수를 인자로 받고 함수를 리턴하는 경우

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

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}

doubleAdder(5, double)(3); // -> 13
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8

고차함수(Higher order function)

함수를 인자로 받을 수 있고(콜백함수), 함수의 형태로 리턴할 수 있는 함수(커리함수)
고차함수와 콜백함수랑은 다르다. 고차함수는 콜백함수를 사용할수 있는 존재
콜백함수는 우리가 작성할 수 있음.

filter

모든 배열의 요소 중에서 특정 조건을 만족하는 특정 요소를 걸러내는 메소드
ex) 배열에서 짝수만 골라서 찍거나 , 18보다 작은 수만 골라서 찍기

주의사항
각 요소의 참거짓을 확인하고 바로 result값에 리턴하는것이 아니고 먼저, JS내부에서 생성된 배열에 담아둔다음 모든 요소의 참거짓 확인이 끝난 다음 result값에 담긴다.

코드 예시

let arr= [1,2,3]
let result = arr.filter(function(ele) { //각 요소의 참거짓을 확인하고 바로 result값에 리턴하는것이 아니고 먼저, JS내부에서 생성된 배열에 담아둔다음 모든 요소의 참거짓 확인이 끝난 다음 result값에 담긴다.
return ele % 2 !== 0
})
화살표 함수로 할경우
let result = arr.filter(ele => ele % 2 !==0)

기준이 되는 특정 조건은 filter 메소드의 인자로 전달되며 전달은 함수형태로 되어야 함.

필터 메소드의 사용법

  • 사용할때 매개변수의 값은 항상 boolean형이여야 함.
  • filter는 true만 담아서 반환함.
  • 기준은 함수로 정한다음 기준에 맞는것은 담고 나머지는 다 거름
  • filter는 원본이 바뀌지 않기 때문에 새로운 변수에 결과값을 담아주어야 함.

map

모든 요소에게 동일한 행동을 준값을 모두 반환한다.
기존 배열을 수정하지 않기 때문에 새로운 변수에 결과값을 주어야 함.

코드예시

[1,2,3,4].map( e =>e +1) //결과값 [2,3,4,5]

let arr= [1,2,3]
let result = arr.map(function(ele){
 retun ele *2
})
let result = arr.map(ele => ele*2)

reduce

배열을 하나의 값으로 만드는 것.
배열을 처음부터 끝까지 반복함

reduce === 누적
map, filter도 reduce로 대체 가능하여 만능 같은 존재

reduce특징

  • 초기값을 정할수 있음 정하지 않는 다면 배열의 첫번째 요소가 초기값이며 초기값은 누적값의 기반이됨
  • 초기값은 옵셔널한 값이며 초기값을 자료형으로 주고하면 원하는 자료형으로 만들기 쉬움
  • 마지막에 누적값의 값을 반환함.
  • 더하기 빼기, 제일 작은것 제일 큰것, 배열이외에 다른 형태의 구조를 만들수 있음.
[1,2,3,4].reduce((acc,cur) => {
  //한번 순회할때마다
  //acc를 업데이트
  //이게 궁극적인 목표
  acc = acc+ cur; 
  return acc; 
 // return acc+cur 만 써도 답이 되긴함. 
}, 0) //초기값을 줌 초기값은 옵셔널한 값. 초기값을 자료형으로 주고 하면 쉬움(ex문자열, 배열, 객체)

초기값을 0으로 주면
acc 0 / cur 1
acc 1 / cur 2  --> 3  acc
acc 3 / cur 3  --> 6  acc
acc 6 / cur 4  --> 10 acc
acc 10

초기값이 없다면
acc 1 / cur 2 --> 3 acc
acc 3 / cur 3  --> 6  acc
acc 6 / cur 4  --> 10 acc
acc 10

배열 내장 고차함수

배열 내장 메소드는 JS에서 은혜를 베품.
해당 메소드를 사용해서 배열을 쉽게 바꾸거나 사용할 수 있다.
메소드: 어떠한 객체의 함수라고 했는데.. 왜 배열은 메소드 라고하지..?
결국에는 배열을 쉽게 사용하게 해 주려고 만든 함수들 = 메소드
배열 메서드중 콜백 함수를 써야하는 메서드가 있음. (reduce, map,filter)
배열 메서드중 콜백 함수를 사용하는 메서드들은 보통 배열을 0부터 끝까지 한번씩 훒으면서 취하는 각각의 액션 특징이 있음.
하지만 조건이 까다롭다면??(문자열이나 숫자 배열로 걸러지지 않으면..?) 쓰기가 어려우니
자유도를 높이기 위해서 콜백 함수를 사용. 콜백함수는 우리가 작성할 수 있음. ==> 이말은 즉 조건을 우리가 직접 정할수 있다는 의미.

profile
개발자가 되고 싶은 일문학도
post-custom-banner

0개의 댓글