[ 06.03 ] 고차함수 ( 콜백함수 )

이숙영·2021년 6월 3일
0

Java Script

목록 보기
13/20
post-thumbnail

[Achievement Goal]

일급 객체의 세가지 특성을 설명할 수 있다.

고차함수에 대해 설명할 수 있다.

고차함수를 자바스크립트로 작성할 수 있다.

1. 일급 객체의 세가지 특성

일급 객체란 ?
슬프게도 자본주의 사회에서는 특별대우를 받는 사람이 있고 나같은 서민들이 있다. (흑)
자바스크립트의 세계에서도 이러한 구조를 가진 것이 있는데 이것을 일급객체라 칭하고 대표적으로 함수가 있다.

함수의 특징 :

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

함수를 변수에 할당하는 경우

함수에는 함수표현식, 함수선언식, 화살표 함수 총 세개의 방식으로 나뉠 수 있는데
변수에 함수를 할당하는 식은 함수 표현식이다.
방식만 다를뿐 다 같아보이지만, 함수표현식은 호이스팅이 적용되지 않는다!

🧐 호이스팅 ?

선언된 위치에 관계없이 함수(함수선언식)나 변수(var)를 사용할 수 있는 용어를 말한다.
코드 유지보수나 실수를 줄이기 위해서는 호이스팅에 의존하는것을 줄이는 것이 좋다.

함수표현식 형태

const func = function(a,b){
  return a+b
}
let result = func(1,2)
result = 3

a와 b 를 더하는 함수식을 func 라는 변수에 할당 해 주었다.
앞서 말한것 처럼 함수 표현식은 호이스팅이 적용되지 않기 때문에 함수의 할당, 호출되는 순서를 잘 지켜주어야 한다.

2.고차함수

고차함수란 (higher order function) ?
커리함수라고도 하며, 함수를 리턴하는 함수라고 할 수 있다.
이 말은, 어떠한 변수에 담겨진 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있다.
이때, 인자로 들어오는 함수를 콜백함수라고 한다.
이 콜백함수를 전달받은 고차함수는 함수 내부에서 콜백함수를 호출 할 수 있다.
(콜백함수는 보통 어떤 작업이 완료되었을 때 호출하는 경우가 많다.)

고차함수 형태 - 함수를 인자로 받기

function double(num){
  return num + 1;
};
function double2(anotherFunc,num){
  return anotherFunc(num)
};
let result = double2(double,2)
result //  3
  1. double 이라는 함수의 인자로 num 이 왔고 그 함수는 num+1 을 리턴한다.
  2. double2 라는 함수의 인자로 anotherFunc,num 이라는 두개의 인자가 오고
    anotherFunc(num) 을 리턴한다.
  3. result 라는 변수에 인자가 두개인, double2(double,2) 를 할당한다.
  4. 첫번째 인자로 들어온 double 은 num+1 을 리턴한다고 했으니까 num 인 2와 1을 더해주면 결과값 3이 된다.

고차함수 형태 - 함수를 리턴하기


function plus(adder){
 return function(number){
  return number + adder;
 };
}
let result = plus(3)(4) // 7

plus의 인자 adder 에 내부함수인 number 인자까지 합쳐주어서 결과는 7이 된다.

고차함수 형태 - 함수를 인자로 받고 함수를 리턴하기

function calc(num){
  return num + 1;
}

function calc2(add,func){
  const calc = func(add);
  return function(num){
   return num + calc 
 }
}
calc2(2,calc)(5)
  1. calc 라는 함수는 인자num과+1 을 리턴하고 있다.
  2. calc2 는 인자 add, func 두개가 있으며, func(add) 를 변수 calc 에 담고 있다. (여기서 변수 calc 는 사용자정의이지만 함수 calc 와 형태가 같기때문에 변수명을 calc 로 지어주었다.)
  3. calc2 의 내부함수에 인자 num 을 넣어주었고 그 num 을 calc 와 더한값을 리턴한다.
  4. calc2 의 인자는 2개이기 때문에 add 인자에 숫자 2, func 자리에 calc 함수를 넣어주았다. 하지만 calc2 는 내부함수를 하나 더 갖고있기 때문에
    내부함수 num 자리에 온 5를 더할 수 있는 것이다.
  5. 그리하여, (2, 2+1)(5) 가 되고, 결과는 8이 된다.

아 .. 개어렵다 .. ㅁㅊ ,,

profile
FrontEndDeveloper

0개의 댓글