8. 함수 (8.8~11)

8.8 객체로서의 함수👊

8.8.1 함수는 객체

자바스크립트 함수는 Function 객체다. 다음과 같은 특징이 있다.

• 함수는 변수나 프로퍼티나 배열 요소에 대입할 수 있다.
• 함수는 함수의 인수로 사용할 수 있다.
• 함수는 함수의 반환값으로 사용할 수 있다.
• 함수는 프로퍼티와 메서드를 가질 수 있다.
• 함수는 이름 없는 리터럴로 표현 가능하다. (익명함수)
• 함수는 동적으로 생성할 수 있다.

이러한 작업이 가능한 객체를 가리켜 일급 객체 라고 하며 일급 객체인 함수는 일급 함수 라고 한다.

8.8.2 함수의 프로퍼티

함수의 프로퍼티

• caller : 현재 실행 중인 함수를 호출한 함수
• length : 함수의 인자 개수
• name : 함수를 표시할 때 사용하는 이름
• prototype : 프로토타입 객체의 참조

Function.prototype의 프로퍼티

• apply() : 선택한 this와 인수를 사용하여 함수를 호출. 인수는 배열 객체
• bind() : 선택한 this와 인수를 적용한 새로운 함수를 반환
• call() : 선택한 this와 인수를 사용하여 함수를 호출. 인수는 쉼표로 구분
• constructor : Function 생성자의 참조
• toString() : 함수의 소스 코드를 문자열로 만들어 반환

8.8.3 apply와 call 메서드

apply() 와 call() 동작은 this값과 함수의 인수를 사용하여 함수를 실행한다는 공통점이 있다.
차이점은 apply()의 인수는 배열이고, call()의 인수는 쉼표로 구분한다.

function say(greetings, honorifics) {
  console.log(`${greetings} "${honorifics} ${this.name}`);
}

var tom = { name: "Tom Sawyer" };
var becky = { name: "Becky Thatcher" };

say.apply(tom, ["Hello!", "Mr."]); // Hello! "Mr. Tom Sawyer
say.call(becky, "Hi!", "Ms."); // Hi! "Ms. Becky Thatcher

8.9 고차 함수👊

8.9.1 고차 함수

함수를 인수로 받는 함수 또는 함수를 반환하는 함수를 말한다. 고차 함수는 함수형 프로그래밍을 할 때 자주 사용한다. 그 예로는 map, filter, reduce 등이 있다.

패턴이 같은 작업을 고차 함수로 정리하는 예

digits = "";
for (var i = 0; i < 10; i++) {
  digits += i;
}
console.log(digits); // 0123456789;

randomChars = "";
for (var i = 0; i < 8; i++) {
  randomChars += String.fromCharCode(
    Math.floor(Math.random() * 26) + "a".charCodeAt(0)
  );
}
console.log(randomChars); // 무작위 알파벳 문자열

위의 두 코드는 하는 일이 다르지만 로직은 같다. 공통 부분을 고차 함수로 만들어보자

function joinString(n, f) {
  var s = "";
  for (var i = 0; i < n; i++) {
    s += f(i);
  }
  return s;
}
var digits = joinString(10, function (i) {
  return i;
});
var randomChars = joinString(8, function (i) {
  return String.fromCharCode(
    Math.floor(Math.random() * 26) + "a".charCodeAt(0)
  );
});
console.log(digits);		//0123456789
console.log(randomChars);	// 무작위 알파벳 문자열

8.9.2 메모이제이션

함수에 프로퍼티를 추가하는 방법으로 결과(반환 값)를 캐싱하여 다음 호출 시점에 복잡한 연산을 반복하지 않게 하는 패턴을 Memoization(메이모제이션) 패턴이라고 한다.

function memorize(f) {
  var cache = {};
  return function (x) {
    if (cache[x] == undefined) cache[x] = f(x);
    return cache[x];
  };
}

memorize 함수는 인수로 받은 함수의 실행 결과를 객체 cache 안에 저장한다. 이 덕분에 인수로 받은 함수를 같은 인수로 실행하면 실제 계산을 하는 대신 cache에 저장된 값을 반환하는 함수가 만들어진다

memorize 함수의 사용 예

// 메모이제이션 피보나치수열
function memorize(f) {
  var cache = {};
  return function (x) {
    if (cache[x] == undefined) cache[x] = f(x);
    return cache[x];
  };
}
var fibonacci = memorize(function (n) {
  if (n < 2) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});
for (var i = 0; i <= 20; i++) {
  console.log((" " + i).slice(-2) + ":" + fibonacci(i));
}

8.9.3 함수의 합성

함수 f(x)와 g(x)가 있을 때 함수 f(g(x))의 합성 함수라고 한다.

function compose(f,g) {
    return funciton(x) {
        return f(g(x));
    };
}

var square = function(x) {
    return x*x;
}
var add1 = function(x) {
    return x+1;
}
var h = compose(square,add1);
console.log(h2));

인수 여러개도 가능

function compose(f, g) {
  return function () {
    return f.call(this, g.apply(this, arguments));
  };
}

8.9.4 부분 적용

인수를 여러 개 받는 함수의 몇몇 인수를 상수로 지정해서 새로운 함수를 생성하는 기법

function product(x, y) {
  return x * y;
}
product2 = function (y) {
  return product(2, y);
};
product(3); // 6

// bind 사용
product2 = product.bind(null, 2);

// 부분 적용된 함수를 반환하는 함수
function partial(f) {
  // 중첩 함수에서 arguments를 사용하기 위해 저장해 둠
  var args = arguments;
  return function () {
    // 외부 함수의 두 번째 인수를 변수 a에 복사
    var a = Array.prototype.slice.call(args, 1);
    for (var i = 0, j = 0; i < a.length; i++) {
      // 외부 함수의 두 번째 인수가 undefined면 이 함수의 arguments를 사용한다.
      if (a[i] == undefined) a[i] = arguments[j++];
    }
    return f.apply(this, a);
  };
}
var square = partial(Math.pow, undefined, 2);
var sqrt = partial(Math.pow, undefined, 0.5);
var cubicroot = partial(Math.pow, undefined, 1 / 3);
var exp = partial(Math.pow, Math.E, undefined);

// *arguments는 배열이 아닌 유사 배열 객체이기 때문에 Array.prototype.slice의
// call 메서드에 args를 인수로 넘겨서 호출

8.9.5 커링

인수를 두 개 이상 받는 함수를 분해하여 인수가 하나인 함수의 중첩 함수로 변환하는 작업

var pow = function (exponent) {
  return function (base) {
    return Math.pow(base, exponent);
  };
};
// 이렇게 정의한 함수 pow는 Math.pow를 커링한 것임

Math.pow(base, exponent) = pow(exponent)(base);

8.10 콜백함수👊

8.10.1 콜백함수

다른 함수에 인수로 넘겨지는 함수를 가리켜 콜백 함수 라고 한다.
15장에서 배울 이벤트 처리기 addEventListener는 콜백 함수를 쓴다.

f(g, ...) {
    ...
    function f(callback, ...) {
        ...
        callback();
        ...
    }
}

8.11 ES6부터 추가된 함수의 기능👊

8.11.1 화살표 함수 표현식으로 함수 정의하기

• var square = (x) => {return x*x; };
  
  기존의 함수 리터럴 정의를 화살표 함수 표현식으로
• var f = (x,y,z) => {...};
  
  인수가 여러 개 있으면 인수와 인수를 쉼표로 구분
• var square = x => {return x*x;};
  인수가 하나만 있으면 인수 묶는 괄호 생략
• var f = () => {...};
  인수가 없으면 인수를 묶는 괄호를 생각할 수 없다.
• var square = x => x*x;
  문장이 return 뿐이면 중괄호와 return 키워드를 생각가능
• 함수의 반환값이 객체 리터럴이면 객체 리터럴을 그룹 연산자인 ()로 묶을 것
  var f = (a,b) => ({x:a, y:b})

함수 리터럴과 화살표 함수의 차이점을 알아보자

1. this의 값이 함수를 정의할 때 결정된다.

var obj = {
  say: function () {
    console.log(this); // [object Object]
    var f = function () {
      console.log(this);
    }; // [object Window]
    f();
    var g = () => console.log(this); // [object Object]
    g();
  },
};
obj.say();

함수 f는 say라는 함수의 중첩 함수이며 this의 값은 전역 객체를 가리킨다. 한편 화살표 함수
g의 this값은 함수 g를 정의한 익명 함수의 this의 값인 객체 obj를 가리킨다.
화살표 함수는 call이나 apply 메서드를 사용하여 this를 바꾸어 호출해도 this 값이 바뀌지 않는다.

2. arguments 변수가 없다.

var f = () => console.log(arguments);
f(); // ReferenceError : arguments is not defined

3. 생성자로 사용할 수 없다.

var Person = (name, age) => {
  this.name = name;
  this.age = age;
};
var tom = new Person("Tom", 17); // TypeError : Person is not a contructor

4. yield 키워드를 사용할 수 없다.
화살표 함수는 제너레이터로 사용할 수 없다. (324p 제너레이터 참고)

8.11.2 인수에 추가된 기능

나머지 매개변수

함수의 인자가 들어가는 부분에 ...을 입력하면 그만큼의 인수를 배열로 받는다.

function args(a, b, ...args) {
  console.log(a, b, args);
}
f(1, 2, 3, 4, 5, 6); // 1 2 [3,4,5,6]

인수의 기본값

함수의 인자에 대입(=) 연산자를 사용해서 기본값을 설정할수 있다.

function multiply(a, b = 1) {
  return a * b;
}
multiply(3); // 3
multiply(3, 2); // 6

8.11.3 이터레이터와 for/of 문

이터레이션

이터레이션은 반복 처리 라는 뜻으로 데이터 안의 요소를 연속적으로 꺼내는 행위

var a = [5, 4, 3];
a.forEach(function (val) {
  console.log(val);
});
// 5
// 4
// 3

이터레이터

배열은 Symbol.iterator 메서드를 가지고 있고 그 메서드는 이터레이터를 반환하는 함수이다.

var a = [5, 4, 3];
var iter = a[Symbol.iterator]();
console.log(iter.next()); // {value: 5, done: false}
console.log(iter.next()); // {value: 4, done: false}
console.log(iter.next()); // {value: 3, done: false}
console.log(iter.next()); // {value: 2, done: true}
console.log(iter.next()); // {value: 1, done: true}

이처럼 iter의 next 메서드를 호출할 때마다 이터레이터 리절트(iterator result)라는 객체가 반환되고 이터레이터 리절트(iterator result)는 value와 done 프로퍼티를 갖는다. next가 호출 될 때마다 value 프로퍼티에는 차례대로 꺼내진 배열 요소의 값이 저장되고 done 프로퍼티에는 요소의 열거가 끝났는지를 뜻하는 논리값이 저장된다.

반복 가능한 객체와 for/of 문

var a = [5, 4, 3];
var iter = a[Symbol.iterator]();
while (true) {
  var iteratorResult = iter.next();
  if (iteratorResult.done == true) break;
  var v = iteratorResult.value;
  console.log(v);
}
// 5
// 4
// 3

for/of 문을 사용하면 이러한 반복 처리를 자동으로 하도록 만들 수 있다.

var a = [5, 4, 3];
for (var v of a) console.log(v);

for/of 문은 a 이터레이터의 next 메서드를 순회할 때마다 매번 호출한다.

일반적으로 for/of 문은 다음 두 가지 조건을 만족하는 객체를 반복 처리 한다.

• Symbol.iterator 메서드를 가지고 있다.
• Symbol.iterator 메서드는 반환값으로 이터레이터를 반환한다.

Symbol.iterator 메서드를 가진 객체를 반복 가능(이터러블, iterable)한 객체라고 한다.

8.11.4 제너레이터

제너레이터 의 성질은 다음과 같다

• 반복 가능한 이터레이터를 값으로 반환한다.
• 작업의 일시 정지와 재시작이 가능하며 자신의 상태를 관리한다.

제너레이터 정의와 실행

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
var iter = gen();
console.log(iter.next()); // Object {value:1, done:false}
console.log(iter.next()); // Object {value:2, done:false}
console.log(iter.next()); // Object {value:3, done:false}
console.log(iter.next()); // Object {value:undefined, done:true}

위의 프로그램 실행 과정을 살펴보면

1. 제너레이터 함수인 gen은 바로 실행되지 않고 이터레이터를 변수 iter에 대입한다.
2. 이터레이터의 next 메서드가 호출되면 첫 번째 yield 연산자의 위치까지 실행하고 결괏값으로 이터레이터 리절트를 반환한다. 이때 제너레이터 함수의 내부 처리는 yield 1에서 일시 정지 상태가 된다.
3. 또 다시 이터레이터 next 메서드가 호출되면 일시 정지한 위치에 있는 처리를 재개한다. 마찬가지로 value 프로퍼티와 done 프로퍼티를 가진 이터레이터를 반환하고 처리를 일시 정지 한다.
4. 3과 동일
5. 마지막 yield에 도착하고, 이터레이터 리절트인 value 프로퍼티 값 undefined와 done 프로퍼티 값인 true를 반환한다.

제너레이터에 값 넘기기

function* fibonacci() {
  var fn1 = 0,
    fn2 = 1;
  while (true) {
    var fnew = fn1 + fn2;
    fn1 = fn2;
    fn2 = fnew;
    reset = yield fn1;
    if (reset) {
      (fn1 = 0), (fn2 = 1);
    }
  }
}
var iter = fibonacci();
for (var i = 0; i < 10; i++) {
  console.log(iter.next().value); // 1,1,2,3,5 ... 55 순서대로 출력
}
console.log(iter.next().value); // 89
console.log(iter.next(true).value); // 1
console.log(iter.next().value); // 1
console.log(iter.next().value); // 2