211220 D+33 고차함수 리뷰

 

자세한 내용은 여기에

1. 고차함수

① 고차함수는 다른 함수를 인자(arg)로 전달 받을 수 있음.

→ 콜백함수(Callback function): 고차함수의 인자로 전달되는 함수.

→ 어떠한 작업 중에 호출하는 경우가 많음.

→ parameter로 넘겨받는 함수(B)는 콜백 함수(A)를

경우에 따라 즉시 실행(동기적, synchronously)할 수도, 나중에 실행(비동기적, asynchronously)할 수도 있음.

ex)

function B() {
  console.log("call back")
}

funcion A(callback) {
  callback(); // callback === B
}

A(B);

 

‣ callback in action: 반복 실행하는 함수(iterator)

let arr = [1, 2, 3];
arr.map(function(element, index) { // callback function
  return element * element;
});

// 배열의 길이만큼(3번) 실행됨

 

‣ callback in action: 이벤트에 따른 함수(event handler)

document.querySelector('#btn').addEventListenr('click', function(e) {
  console.log('button clicked');
}));

// 문서에서 'btn'이라는 아이디를 가진 버튼을 찾아오는데
// 거기에 클릭 이벤트를 주어서 어떤 함수를 뒤에 나오는 'button clicked'라는 콘솔을 찍는
// 그러한 함수를 실행시킨다

 

✷ 함수 자체를 연결할 것(실행 연결 X)

funciton handleClick() {
  console.log('button clicked');
}

// 전부 맞는 코드
// 1. handleClick 함수 자체를 적음
document.querySelector('#btn').onClick = handleClick;

// 2. 새로운 익명 함수 function()을 만들어 안에 handleClick()함수 실행 
document.querySelector('#btn').onClick = function() {
  handleClick();
}

// 3. bind()메소드를 사용함 --> 함수 그 자체를 리턴
document.querySelector('#btn').onClick = handleClick.bind();


// 틀린 코드
// 4. handleClick() 자체를 실행을 하고 있음 
// --> 리턴값이 없기 때문에 undefined를 연결한 것과 같음
document.querySelector('#btn').onClick = handleClick();

 

② 고차함수는 다른 함수를 리턴할 수 있음

→ 커리함수라는 용어는 고차함수란 용어를 '함수를 인자로 받는 함수'에만 한정해 사용하기도 함.

→ '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두 고차함수.

⇒ 고차함수: 콜백함수와 커리함수의 상위 개념.

 

③ 콜백 함수를 전달받은 caller 함수는 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있다.

④ caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있다.

→ 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있다.

(특정 작업의 완료 후에 호출하는 경우를 자주 접할 수 있음)

 

2. Underbar sprint

(고차함수에서 배웠던 메소드들

(slice, forEach, indexOf, filter, map, reduce 등)을 구현하며 원리를 이해하는 sprint 해결)