11-4. Function 오브젝트 / 함수 호출

call()

• getTotal.call(this, 10, 20);
  call 메소드 앞에 호출할 함수를 작성합니다.
  첫번째 파라미터 : 호출된 함수에서 this로 참조할 오브젝트를 작성합니다.
  두번째 이후 파라미터 : , 콤마로 구분하여 호출된 함수로 넘겨줄 파라미터를 작성합니다. 이것은 선택입니다.

    function getTotal(one, two) {
        return one + two;
    }
    var result = getTotal.call(this, 10, 20);
    console.log(result); // 30
  

  1. getTotal.call(this, 10, 20) 형태로 호출
  2. 1번째 파라미터 this가 파라미터 값으로 넘어가지 않습니다.
     일반적으로 첫번째 파라미터 위치에 this를 사용합니다.
     물론 다른 오브젝트를 넣을 수도 있습니다.
  3. 2번째 파라미터가 첫 번째 파라미터로 넘어가고 3번째 파라미터가 두번째 파라미터로 넘어갑니다.
  4. one에 10이, two에 20이 설정됩니다.
  5. call()은 파라미터 수가 고정일 때 사용합니다.

• 첫번째 파라미터

  • 호출된 함수에서 this로 참조할 오브젝트

  • 일반적으로 this 사용
    다른 오브젝트 작성 가능

      var value = {one: 10, two: 20};
      function getTotal() {
          return this.one + this.two;
      }
      var result = getTotal.call(value);
      console.log(result); // 30
    

    1. getTotal.call(value)의 파라미터에 value 오브젝트 작성
    2. getTotal()에서 this가 value 오브젝트 참조
       this.one으로 프로퍼티 값을 구할 수 있습니다.

    
    
    이처럼 call 메소드의 첫번째 파라미터는 호출된 함수에서 this로 참조합니다.

apply()

apply는 call과 같습니다.
다른 것이 있다면 두번째 파라미터를 배열로 작성하는 것입니다.
배열이므로 배열 안에 엘리먼트 수는 관계가 없습니다.
5개가 들어가던 10개가 들어가던 관계가 없습니다.

• getTotal.apply(this, [10, 20]);

• 파라미터 수가 유동적일 때 사용
  두번째 파라미터에 배열 사용

    function getTotal(one, two) {
        return one + two;
    }
    var result = getTotal.apply(this, [10, 20]);
    console.log(result); // 30
  

  1. 파라미터 수가 유동적이므로 배열을 사용합니다.
  2. getTotal() 파라미터 one에 10이 two에 20이 설정됩니다.

call 메소드는 파라미터 수가 고정되어있을 때 사용합니다.
그래서 10, 20 이런식으로 작성을 했었습니다.
그런데 apply는 파라미터 수가 유동적일 때 사용합니다.

예를 들면, html에 좋아하는 스포츠를 선택하도록 했습니다.
그런데 이때 다수를 선택할 수도 있고 하나만 선택할 수도 있습니다.
이럴땐 apply로 배열로 넘겨주면 되겠죠?

한편 좋아하는 스포츠를 라디오버튼으로 선택하도록 만들었습니다.
라디오 버튼은 하나만 선택할 수 있죠?
그때는 call 메소드를 사용합니다.

• call(), apply() 부가적인 목적?

  • 첫번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트 사용
    호출된 함수에서 오브젝트를 바꿔서 사용하는 것입니다. 아직은 이 개념이 조금 어려울 것입니다.
  • 논리 전개는 단계적 설명이 필요하므로 중고급 강좌에서 다룹니다.

현시점에서는

• 호출된 함수에서 this로 참조할 오브젝트를 작성할 수 있다라는 것
• 그리고 일반적으로 this를 사용한다는 것 이것을 아시면 되겠습니다.

toString()

• 거의 대부분의 빌트인 오브젝트에

  • toString()이 있지만
  • 오브젝트마다 반환되는 형태가 다름

• function 오브젝트의 toString()은 함수 코드를 문자열로 반환

    var getBook = function () {
        return 100 + 23;
    }
    var result = getBook.toString();
    console.log(result); // function (){ return 100 + 23; }