B11 : 함수 내장 메서드

목차

1. 함수 내장 메서드

2. call(), apply()

    2-1. call() 메서드

    2-2. apply() 메서드

3. bind()

---

1. 함수 내장 메서드

자바스크립트의 함수는 일급 객체(First-class Object)로, 프로퍼티와 메서드를 가질 수 있다.

이 중 함수 객체에 기본적으로 제공되는 메서드들들을 함수 내장 메서드라고 한다.

 

여러가지 함수 내장 메서드들이 있지만 주요 함수 내장 메서드 몇 가지만 다뤄보자.

---

2. call(), apply()

call()과 apply() 메서드는 어떤 함수(객체)를 다른 객체의 메서드처럼 호출할 수 있게한다.

두 메서드의 차이점은 넘겨받는 인자의 형식이다.

1. call() 메서드

특정 객체를 this로 바인딩하여, 함수를 즉시 실행한다. 

 

// 1. obj 객체를 call()메서드의 첫번째 인자로 넘겨 this로 바인딩

const obj = {name: 'Bang'};

function greeting() {
	return `Hello ${this.name}`;
}

console.log(greeting.call(obj));	// 'Hello Bang'



// 2. 호출하는 함수로 인자를 전달

const obj = {name: 'Bang'};

function getUserInfo(age, country) {
	return `name: ${this.name}, age: ${age}, country: ${country}`;
}
console.log(getUserInfo.call(obj, 26, 'Korea'));	// name: Bang, age: 26, country: Korea'

 

2. apply() 메서드

call() 메서드와 동일하지만 전달할 인자들을 배열 형태로 전달해야 한다.

const obj = {name: 'Bang'};

function getUserInfo(age, country) {
	return `name: ${this.name), age: ${age}, country: ${country}`;
}

console.log(getUserInfo.apply(obj, [26, 'Korea']));	// 'name: Bang, age: 26, country: Korea'

---

3. bind()

함수의 this 바인딩을 영구적으로 변경한다.(생성자 함수로 사용되는 경우는 예외)

bind() 메서드로 this가 변경된 함수는 call(), apply(), 또 다른 bind() 메서드로 변경할 수 없다.

this를 바인딩하여 함수를 호출하는 것이 아니라 새로운 함수를 반환한다.

const obj1 = {name: 'Bang'};
const obj2 = {name: 'Kim' };

function getUserInfo(age, country) {
	return `name: ${this.name}, age: ${age}, country: ${country}`;
}

const bound = getUserInfo.bind(obj1);

console.log(bound(26, 'Korea'));	// 'name: Bang, age: 26, country: Korea'
console.log(bound.apply(obj2, [22, 'Korea']));	// 'name: Bang, age: 22, country: Korea'

bound 변수에서 bind(obj1)로 인해 this값이 obj1로 영구 고정되었기 때문에 apply를 사용해도 this 값이 obj1로 고정된 것을 확인할 수 있다.

 

 

 

참고

기초부터 완성까지, 프런트엔드 (이재성|한정)