[JavaScript] 함수의 메소드와 arguments

# 함수의 메소드 arguments

함수의 메소드 중 대표적으로 call, apply, bind이 중요하다.

 

## call & apply

원래 함수는 선언한 후 호출해야 실행된다. 함수를 호출하는 방법은 함수명 뒤에 ()를 붙이는 것과, call 그리고 apply 메소드를 사용하는 방법이 있다.

var example = function (a, b, c) {
  return a + b + c;
};
example(1, 2, 3);
example.call(null, 1, 2, 3);
example.apply(null, [1, 2, 3]);

call 과 apply 메소드가 공통적으로 가진 null 인자의 역할은 바로 this를 대체하는 것이다.

실행 컨텍스트에서 this는 기본적으로 window를 가리킨다고 했었다.

call, apply, bind에서 첫 번째 인자로 다른 것을 넣어주는 게 this를 바꾸는 방법 중 하나이다.

var obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
var obj2 = {
  string: 'what?'
};
obj.yell(); // 'zero';
obj.yell.call(obj2); // 'what?'

obj.yell.call(obj2) 코드 실행함으로써 this를 obj에서 obj2로 변경한 것을 확인할 수 있다.

 

## bind

bind 함수는 함수가 가리키는 this만 바꾸고 호출하지는 않는 것이다.

var obj = {
  string: 'zero',
  yell: function() {
    alert(this.string);
  }
};
var obj2 = {
  string: 'what?'
};
var yell2 = obj.yell.bind(obj2);
yell2(); // 'what?'

call(this, 1,2,3)은 bind(this)(1,2,3)과 동일한 작동을 한다.

 

# arguments

위 메소드들을 쓰는 예로, 함수의 arguments를 조작할 때 사용한다.

arguments는 함수라면 처음부터 갖고 있는 숨겨진 속성으로 바로 함수에 들어오는 인자를 ‘유사 배열’로 반환한다.

function example() {
  console.log(arguments);
}
example(1, 'string', true); // [1, 'string', true]

** 유사 배열임으로 실제 배열의 메소드를 사용할 수 없다. **

배열의 메소드를 사용하고 싶다면 배열의 프로토타입을 가져와서 적용하는 방법이 있는데 이 때 바로 call이나 apply를 사용하는 것이다.

Array.prototype.join.call(arguments)

 

💡 call & apply 메소드는 손가락으로 this를 가리키고 함수를 실행하는 것.

💡 bind 메소드는 손가락으로 this를 가리기만 하는 것. 함수 실행 X

 

출처

https://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd