[JavaScript] 중급 #13 - call, apply, bind

 

call, apply, bind: 함수 호출 방식과 관계없이 this를 지정할 수 있음

 

call: call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있음

const baby = {
	name: "Baby"
};

const angel = {
	name: "Angel"
};

function showThisName() {
	console.log(this.name);
}

showThisName(); // “” 빈 문자열 출력
showThisName.call(baby); // Baby 출력

function update(birthYear, occupation) {
	this.birthYear = birthYear;
	this.occupation = occupation;
}

update.call(angel, 1997, "singer");

console.log(angel); // { name: “Angel”, birthYear: 1997, occupation: “singer” } 출력

  →  showThisName() 함수에 인수로 아무것도 넘겨주지 않았을 때는 this는 window를 의미한다. 그래서 this.name은 window.name이 되어 빈 문자열을 출력한 것이다.

  →  call()을 사용하여 함수를 호출할 때에 call의 첫번째 매개변수는 this로 사용할 값이고, 그 뒤의 매개변수는 호출하는 함수에 넘겨줄 인수가 된다.

  →  위의 예시를 보면 angel이 this로 사용할 값이 되고, 1997과 “singer”는 각각 birthYear와 occupation의 인수로 넘어가게 되는 것이다.

 

 

apply: 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같음

  -  call은 일반적인 함수와 마찬가지로 매개변수를 직접 받지만, apply는 배열로 받음

const baby = {
	name: "Baby"
};

function update(birthYear, occupation) {
	this.birthYear = birthYear;
	this.occupation = occupation;
}

update.apply(baby, [2000, "teacher"]);

console.log(baby); // { name: “Baby”, birthYear: 2000, occupation: “teacher” } 출력

 

apply는 배열 요소를 함수 매개변수로 사용할 때 유용

e.g.) 

const minNum = Math.min(3, 10, 1, 6, 4);

const maxNum = Math.max([3, 10, 1, 6, 4]);

 
console.log(minNum); // 1 출력

console.log(maxNum); // NaN 출력, 배열을 넘겨줬기 때문

 

e.g.)        

const nums = [3, 10, 1, 6, 4];

const minNum = Math.min(...nums);

const maxNum = Math.max.apply(null, nums);

 

console.log(minNum); // 1 출력

console.log(maxNum); // 10 출력

  →  call을 사용하려면 Math.max.call(null, ...nums);가 됨

  →  자세히 비교해보면, call은 (null, 3, 10, 1, 6, 4)이고, apply는 (null, [3, 10, 1, 6, 4])가 됨

 

 

bind: 함수의 this 값을 영구히 바꿀 수 있음

const angel = {
	name: "Angel"
};

function update(birthYear, occupation) {
	this.birthYear = birthYear;
	this.occupation = occupation;
}

const updateAngel = update.bind(angel);
updateAngel(1997, "programmer");

console.log(angel); // { name: “Angel”, birthYear: 1997, occupation: “programmer” } 출력

  

e.g.)         

const user = {
	name: "Angel",
	showName: function() {
		console.log(`hello, ${this.name}`);
	}
};

user.showName(); // hello, Angel 출력

let fn = user.showName;

fn(); // hello, 출력
fn.call(user); // hello, Angel 출력
fn.apply(user); // hello, Angel 출력

let boundFn = fn.bind(user);

boundFn(); // hello, Angel 출력

 

 

 

 

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=KfuyXQLFNW4