[Javascript]03-4. 함수 호출 (apply, call)*

call과 apply 메서드를 이용한 명시적 this 바인딩

• apply(), call() 메서드는 this를 특정 객체에 바인딩 시키는 방법을 제공합니다.
  • apply()
    • 호출 방법: function.apply(thisArg, argArray)
    • apply() 메서드도 this를 바인딩 할 뿐, 본질적으로는 함수호출 입니다.
    • argArray 배열을 자신의 호출한 함수의 인자로 사용하되, 이 함수 내부에서 사용된 this는 첫 번째 인자인 thisArg 객체로 바인딩해서 함수를 호출합니다.
    • thisArg: apply() 메서드를 호출한 함수 내부에서 사용한 this에 바인딩할 객체
    • argArray: 함수를 호출할 때 넘길 인자들의 배열
  • call()
    • 호출: Person.call(foo, ‘foo’, 30, ‘man’);

// apply() 메서드를 이용한 명시적인 this 바인딩
// 생성자 함수
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

// foo 빈 객체 생성
var foo = {};

// apply() 메서드 호출
Person.apply(foo, [‘foo’, 30, ‘man’]);
console.dir(foo);

// 출력값
age: 30
gender: man
name: foo
__proto__: Object

apply() 메서드를 활용한 arguments 객체의 배열 표준 메서드 slice() 활용 코드

• apply(), call() 메서드는 this를 원하는 값으로 명시적으로 매핑해서 특정 함수나 메서드를 호출할 수 있습니다.
• 예로, arguments 객체에서 설명한 arguments 객체와 같은 유사 배열 객체에서 배열 메서드를 사용하는 경우를 들 수 있습니다.
  (실제 배열이 아님에도 pop(), shift()같은 메서드를 사용할 수 있음)

function myFunction() {
  //1
  console.dir(arguments);
  
  // arguments.shift(); 에러발생
  
  // arguments 객체를 배열로 변환
  // Array.prototype.slice() 메서드를 호출해라. 이 때 this는 arguments 객체로 바인딩해라.
  var args = Array.prototype.slice.apply(arguments);
  
  //2
  console.dir(args);
}

// 1 (출력값)
myFunction(1, 2, 3);
Arguments(3)
0: 1
1: 2
2: 3
callee: ƒ myFunction()
length: 3
Symbol(Symbol.iterator): ƒ values()
[[Prototype]]: Object

// 2 (출력값)
Array(3)
0: 1
1: 2
2: 3
length: 3
[[Prototype]]: Array(0)

함수 리턴

• 자바스크립트 함수는 항상 리턴값을 반환합니다.
• return 문을 사용하지 않았더라도 아래의 규칙으로 항상 리턴값을 전달하게 됩니다.

규칙 1) 일반 함수나 메서드는 리턴값을 지정하지 않을 경우, undefined 값이 리턴된다.

// noReturnFunc() 
var noReturnFunc = function() {
  console.log('This function has no return statement.');
}

var result = noReturnFunc();
console.log(return);

// (출력값)
undefined

규칙 2) 생성자 함수에서 리턴값을 지정하지 않을 경우, 생성된 객체가 리턴된다.

생성자 함수에서 리턴값을 처리하는 예외 상황

1) 생성자 함수에서 명시적으로 객체를 리턴했을 경우
: 명시적으로 지정 객체를 리턴한 경우, 새로운 객체를 생성하더라도 명시적으로 넘긴 객체를 린턴합니다.

// Person() 생성자 함수
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  
  // 명시적으로 다른 객체 반환
  return {name:'bar', age:20, gender:'woman'};
}

var foo = new Person('foo', 30, 'man');
console.dir(foo);

// (출력값)
Object
age: 20
gender: "woman"
name: "bar"
[[Prototype]] Object

2) 생성자 함수에서 명시적으로 기본 타입(불린, 숫자, 문자열) 값을 리턴했을 경우
: 명시적으로 리턴한 값을 무시하고 this로 바인딩 된 객체가 리턴된다.

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;

  return 100;
}

var foo = newe Person('foo', 30, 'man');
console.log(foo);

// (출력값)
Person {name: "foo", age: 30, gender: "man"}