[JavaScript]JS_8. Function(2)

jungeundelilahLEE·2020년 10월 9일
0

# INDEX

1. Values & Data type
2. Operators
3. Control flow
4. Scope & Hoisting
5. Object & Array
6. This
7. Prototype & Inheritance
8. Function
  8-1.

9. Callback function
10. Closuer
11. Class
12. Others

8. Function (2)

  • 일급 객체(first-class object)의 세 가지 특징
  • 고차 함수(higher-order function)
  • 추상화(abstraction)
  • 추상화의 관점에서 고차 함수가 갖는 이점
    -배열 메소드(자유자재로)
    -고차 함수를 활용하여 프로그램을 작성(자유자재로)

8-2. 고차함수 (Higher Order Function)

고차함수의 개념

  • 함수를 인자로 받거나 or 함수를 리턴하는 함수 / 이때 다른 함수(caller)의 인자로 전달되는 함수를 "콜백함수"라고 함
  • 콜백함수를 전달받은 원래 함수는, 해당 콜백함수를 호출(invoke)할 수 있으며, 반복해서 실행할 수 있음. 또한
  • "커링함수" : 함수를 리턴하는 함수 (고차함수에 커리함수가 포함되는 개념)

js 일급 객체 중 하나인 함수(function)의 특별함

: 함수도 데이터처럼 취급 가능함

1) 변수에 할당(assignment)할 수 있다.
(-> 함수 표현식(function expression)->표현식은 호이스팅이 적용되지 않음)

  • 함수선언식의 경우 : 코드의 유지보수 측면에서 다소 어려움 / 어느 위치에나 함수를 선언할 수 있고 함수의 실행 위치도 중요하지 않기 때문
  • 함수 선언식 vs 함수 표현식 : "호이스팅"에서 큰 차이를 보임
// 함수 표현식은 할당 전에 사용할 수 없음 (다음과 같은 에러)
// square(7); 
// -> ReferenceError: Can't find variable: square
const square = function (num) {
  return num * num;
};
// square에는 함수가 저장되어 있으므로, square함수는 일급 객체이며, 함수 호출 연산자 '()'를 사용할 수 있음
output = square(7);
console.log(output); // --> 49

2) 변수에 저장된 데이터는 다른 함수의 인자(argument)로 전달될 수 있다.

function double (num) {
  return num * 2;
}
function doubleNum (func, num) {
  let doubledArr = [];
  return func(num);
}
// 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수 (func는 함수(num은 func의 인자))
// 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우, 함수 func는 함수 doubleNum의 콜백 함수
// If 아래의 경우, 함수 double은 함수 doubleNum의 콜백 함수
let output = doubleNum (double, 4);

// callback function 이해하기! (아래)

// output이라는 변수에 doubleNum이라는 함수를 호출
// doubleNum이라는 함수에, 인자로 double과 4가 들어가는데,
// 여기서 double은 함수
// 따라서, double 함수는 다른 함수의 인자로 쓰였기 때문에 
// doubleNum함수의 callback function
console.log(output); 		// 8

3) 변수에 저장된 데이터는 다른 함수의 결과로서 리턴될 수 있다.

function adder (added) {
  return function (num) {
    return num + added;
  };
}
// 함수 adder는 다른 함수를 리턴하는 고차 함수
// adder는 인자 한개(added)를 입력받아서 함수(익명 함수)를 리턴
// 리턴되는 익명 함수는 인자 한개(num)를 받아서 added와 더한 값을 리턴

// 함수는 모두 일급객체다! (아래)

// adder, adder(5)는 함수이므로 함수 호출 연산자 '()' 사용 가능
// 함수는 "실행 후에" 해당 함수가 리턴하는 값으로 평가됨
// adder(5) 는 또다른 함수를 리턴하므로, 
// adder(5) 자체도 함수이다!

let output = adder(5)(3); 	// 8
console.log(output); 		// 8
// adder가 리턴하는 함수를 변수에 저장 가능
// js에서 함수는 일급 객체이기 때문
const add3 = adder(3);
output = add3(2);
console.log(output);		 // 5

Advanced) 함수를 인자로 받고, 함수를 리턴하는 경우

function double (num) {
  return num * 2;
}
function doubleAdder (added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}
// 함수 doubleAdder는 고차 함수
// 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수 
// 함수 double은 함수 doubleAdder의 콜백으로 전달됨 (???)
// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있음
doubleAdder(5, double)(3);	// 13
// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있음 (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); 			// 8

// 이부분 잘 이해가 안됨... 다시 해볼것!! 정신멀쩡할때
profile
delilah's journey

0개의 댓글