javascript에서 function call 함수는 왜 사용하는거야?? 간단 설명

call 이란?

 

call() 메소드는 주어진 this 값 및 

각각 전달된 인수와 함께 함수를 호출합니다.

라고 MDN에 작성되어 있습니다.

 

예를 들어 아래와 같은 코드가 있다고 가정해보겠습니다.

 

var title = "환영합니다.";
var house = {
    title: "집이예요~",
    room: {
    	title: "방입니다.",
        getTitle: function() {
            return this.title;
        }
    }
}

 

아래와 같이 실행하면

각각 어떤 결과가 나올까요~?

 

var fn = house.room.getTitle;
fn();
// 환영합니다.

house.room.getTitle();
// 방입니다.

house.getTitle = house.room.getTitle;
house.getTitle();
// 집이예요~

 

결과가 각각 모두 다릅니다.

 

함수를 실행할때

함수 앞에 작성한 오브젝트를

this로 참조한다는

특성이 있습니다.

 

그래서 첫 번째부터 본다면

(window.)fn();

이러한 특성으로 인해 글로벌로 담겨있는

var title = "환영합니다."; 값을 참조합니다.

 

두 번째로는 

(house.room.)getTitle();

이 실행이 되었습니다.

앞에 house.room 오브젝트가 this로 참조되기 때문에

house.room의 title 값인 "방입니다."가 결과로 나오게 됩니다.

 

세 번째는,

house.room.getTitle 의 메소드를

house.getTitle로 사용 가능할 수 있도록 넣어 주었는데요.

house.getTitle = house.room.getTitle;

house.getTitle();

을 실행하면

(house) 오브젝트를 참조하기 때문에

house의 title값 "집이예요"가 결과로 나옵니다.

 

이러한 this의 특성 때문에,

this를 지정해서 넘겨줄 수 있는 메소드가

바로 call 메소드 입니다.

 

call( this , arg1, arg2);

 

call 은 위와 같이 첫 번째 파라미터로

this를 지정해 줄 수 있습니다.

 

var fn = house.room.getTitle;
fn.call(house);
// 집이예요~

house.room.getTitle.call(house);
// 집이예요~

house.getTitle = house.room.getTitle;
house.getTitle.call(house);
// 집이예요~

 

이렇게 call을 사용하여 this를 house 오브젝트로 지정해주고

똑같이 실행하니,

똑같은 결과를 얻을 수 있었습니다.

 

만들어진 메소드의 기능은

바꿀 필요가 없이

호출할 때마다

오브젝트만 바꿔주면 되기 때문에

데이터 중심적으로 사용 가능해지게 됩니다.

 

"데이터 중심의 접근" 이것이 가장 큰 목적입니다.