call, apply, bind

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

함수 호출 방식과 관계없이 this 를 지정할 수 있습니다. call 메소드는 모든 함수에서 사용할 수 있고 this 를 특정 값으로 지정할 수 있습니다.

const mike = {
	name: "MIke",
}
const tom = {
	name : "Tom",
}

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

showTihisName(); // 현재 this 는 window 를 가리킴
showThisName.call(mike); // , Mike - mike 를 this 로 받아서 출력 

생년과 직업이란 객체 정보를 받아서 업데이트 해주는 함수를 작성한다면,

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

update.call(mike, 1999, "singer");
// 첫번째 매개변수는 this 로 들어가고, 그 다음부터는 함수가 사용할 매개변수 들
// 매개변수로 들어간 값은 해당 객체에 데이터 값으로 들어간다.

console.log(mike)
// => { name: "MIke", birthYear: 1999, occupation: "singer"}

apply 는 call 과 동일하게 동작하돼 매개변수를 처리하는 방법이 다릅니다. call 은 일반 함수처럼 매개변수를 직접 받지만, apply 는 매개변수를 배열로 받습니다.

update.call(mike, 1999, "singer"); // 이것을 아래처럼 수정
update.apply(mike, [1999, "singer"]);

// 아래 배열에서 최소값 최대값을 찾는다고 할 때
const nums = [3, 10, 1, 6, 4];

// 아래처럼 스프레드 연산자를 써도 되지만
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);

// apply 나 call 을 써보면

const minNum = Math.min.apply(null, nums);
// this 로 넣어줄 게 없으니 첫번째 값은 그냥 아무거나 넣고,
// 두번째 값에 배열을 담은 변수를 넣어준다.
// (null, [3, 10, 1, 6, 4]) - 이렇게 들어간 것

const maxNum = Math.max.call(null, ...nums);
// call 은 배열을 받지 않으니까 스프레드 연산자로 써줌 ..nums
// (null, 3, 10, 1, 6, 4) - 이렇게 들어간 것

bind 를 사용하면 함수의 this 값을 영구적으로 바꿀 수 있습니다.

const mike = {
	name: "MIke",
}

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

const updateMike = update.bind(mike);
// this 를 항상 mike 로 받는 함수를 변수로 저장

updateMike(1980, "police");
// this 가 mike 인 객체에 값이 들어간 것

다른 예시를 살펴보면,

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

user.showName(); 
// hello, Mike 가 나온다.

let fn = user.showName; 하고
fn();
// 이러면 hello, 만 나온다.
// fn 에 할당할 때 this 를 읽어버린 것

fn.call(user);
// call 을 사용해서 this 에 넣어줄 값을 담고 실행하면 hello, Mike 나온다. 

let boundFn = fn.bind(user);
boundFn(); 
// 이렇게 해도 bind 로 this 값을 고정해도 hello, Mike 가 나온다.