본문 바로가기

Javascript

[자바스크립트] call, apply이란 무엇인가? 차이점은 무엇인가?

apply는 자바스크립트의 내장함수이다. 이 함수는 특별한 기능을 가지고 있다. 

 

apply함수가 필요한 경우를 예로 들어서 설명해보자.

var person = { 
 	인사 : function () {
 	console.log('안녕')
	}
}

person.인사(); 

var person2 = {
	name : '손흥민'
}

person이라는 객체에 '인사'라는 함수가 있다. 그런데, person2에서도 이 '인사'라는 함수를 사용하고 싶다.

이럴 경우 어떻게 해야할까? 이 때가 바로 apply함수가 필요한 순간이다. 

person.인사.apply(person2)

이것을 풀어서 설명하면 다음과 같다.

person이라는 객체에서 '인사'라는 메서드를 사용할께. 그런데 이 메서드를 person2에 apply해주면 좋을것 같아. 

이것을 간략하게 정리하면 사실 person2.인사()이 말과 다를바가 없다. 

 

그런데, 우리는 현재 이 메서드가 잘 실행되고 있는지 확인할 길이 없다.

그래서 this.name을 출력하는 메서드를 추가해서 확인을 해보겠다. 코드는 아래와 같다. 

 

 

var person = {
	인사 : function () {
	console.log( this.name + '안녕')
	}
}

이 상태에서 person.인사()라는 함수를 호출하면 

'undefined안녕'

이라는 결과가 나온다. 

 

반면에, 

var person2 = {
	name : '손흥민'
}

person.인사.apply(person2)

이렇게 person2에 인사라는 메서드를 적용하면? 

person2에는 name이라는 키워드가 있기 때문에, 아래와 같은 결과가 출력된다. 

'손흥민안녕'

 

여기까지가 apply에 대한 설명이다. 

 

call이라는 함수도 있다. 그런데, 사실 이 함수는 apply와 거의 똑같은 함수라고 보면된다. 

그렇지만, 약간의 차이는 있으니 그것을 설명해보겠다. 

 

apply함수를 사용하려고 할 때, 파라미터에 값을 넣어주어야 하는 경우는 어떻게해야할까? 

보통 생각하는 방법처럼, person.인사(1,2,3).apply(person2) 이런 방식으로 파라미터를 입력하지 않는다. 

person.인사.apply(person2, 1, 2)

이렇게 적용할 대상인 person2 이후에 파라미터 값을 넣어준다. 

여기서부터 call과 apply의 차이점이 발생하는데, 

apply의 경우 파라미터에 값을 넣을 때, 배열을 사용할 수 있지만, call은 배열을 사용할 수 없다. 

이것이 차이점이다.