함수 메소드 Function Method

함수를 실행하는 다양한 방법

  • function(method) 호출
  • new 키워드를 이용한 호출
  • 함수 메소드 .call .apply .bind를 이용

.call .apply 이용 방법

function add(x, y) {
  this.val = x + y;
  console.log(this.val);
}

let obj = { val: 0 };

add.call(obj, 2, 8);

function add(x, y) {
  this.val = x + y;
  console.log(this.val);
}

let obj = { val: 0 };

add.apply(obj, [2, 8]);

두개의 차이점을 명확히 알겠는가?
.call에서는 argument를 계속 추가하는 한 편, .apply에서는 argument를 배열로 추가해야한다.

.bind 안내

call / apply와는 다르게, 함수를 바로 실행시키지 않고, this 값이 바인딩된 함수를 리턴합니다

function add(x, y) {
  this.val = x + y;
  console.log(this.val);
}

let obj = { val: 0 };

let boundFn = add.bind(obj, 2, 8) //boundFn은 함수
boundFn() // add.bind는 여기서 실행된다


인자 순서는 call과 같이 추가하면 된다.
boundFn()을 살펴보면, 일반적인 function(method) 호출처럼 보이지만, 이 곳엔 this값이 이미 바인딩 되어 있다.

apply case

let arr = [7, 35, 2, 8, 21];

이 배열에서 가장 작은 값을 Math.min을 이용해 얻어내려면 어떻게 해야 될까?

let minimum = Math.min.apply(null, arr);
console.log(minimum);

this값이 의미가 없으므로 null로 넘겨도 된다.

call, apply로 prototype 기능 빌려쓰기

function moreThanFive(str) {
  return str.length > 5;
}

let arr = ['code', 'states']

위와 같은 코드가 있다고 하자
만약 filter method를 사용하고 싶다면 어떻게 해야 될까?

arr에 filter메소드를 사용하면 된다.

그렇다면 prototype 기능을 빌려쓰려면?

call의 기능을 사용하고 싶을 때는 위와 같이 하지만

Apply 기능을 사용하고 싶을 때는 뒤의 인자로 배열로 입력해야 올바르게 작동한다.

좋은 웹페이지 즐겨찾기