안녕하세요 :) 이번글에는 apply하고 call 함수에 대해 알아보겠습니다!
apply, call 함수란?
어떠한 함수를 어떠한 곳에 적용을 시켜서 같이 사용할 수 있게 만들어 주는 함수입니다. 파라미터도 넘겨서 적용할 수 있고 그냥 사용 할수도 있습니다.
말로만 들어서는 이해하기 힘드니 코드로 예시를 보여드리겠습니다.
let person = {
name: "훈이",
};
let acting = {
exercise: function () {
console.log(
`${this.name}는(은) 지금 턱걸이중`
);
},
};이렇게 name키를 가진 person 객체와 exercise 함수를 가진 acting객체가 있다고 가정 해봅시다.
그런데 저는 person객체와 acting객체를 혼합시켜서 '훈이는 지금 턱걸이중' 이라는 것을 출력해보고 싶습니다.
그럴땐 apply 혹은 call 함수를 사용하여 이렇게 적용해주시면 됩니다.
acting.exercise.apply(person)
//훈이는(은) 지금 턱걸이중이렇게 함수를 추가해주면 원하던 결과값이 나옵니다.
이 함수를 해석해보자면
acting안에있는 excercise 함수를 person객체에 apply(적용)시킨다.
라고 보시면 됩니다.
call 함수랑 apply랑 한가지 차이점을 제외하고는 완전히 동일합니다.
우선 저 상황일때는 call함수로 완벽하게 대체가능합니다.
acting.exercise.call(person)
//훈이는(은) 지금 턱걸이중그냥 이렇게 사용해주면 됩니다.
apply VS call 차이점
그렇다면 차이점은 무엇이 있을까요?
바로 파라미터를 전송해주는 방식에 차이가 있습니다.
apply는 배열 방식의 파라미터를 전송해줄 수 있고,
call은 문자열 방식의 파라미터를 전송해 줄수 있습니다.
위에서 사용하던 코드를 바탕으로 추가 예시를 들어보겠습니다.
저는 파라미터를 추가 전송하여 '훈이는(은) 2시간 30분째 운동중' 이라는 문구를 출력하고 싶습니다.
코드를 살펴보겠습니다.
let person = {
name: "훈이",
};
let acting = {
exercise: function (time, minute) {
console.log(
`${this.name}는(은) 지금 턱걸이 ${time}시간 ${minute}분째 중`
);
},
};
//apply(적용시킬곳,파라미터(배열형태))
acting.exercise.apply(person, [2, 30]);이런식으로 적용해주면 원하는 결과값이 나오게 됩니다.
function의 매개변수에 받고싶은 변수를 입력하고 apply 함수의 파라미터 넣는 공간에 파라미터를 전송해주면 적용이 됩니다.
${time} 이 형태가 무엇인지 모르시는 분들은 제 블로그 글의 template literal 를 참고해주시면 될 것 같습니다
https://velog.io/@hoon_dev/JavaScript-Template-Literal
call함수는 배열 형태가 아닌 그냥 일반 문자열 형태로 파라미터를 집어넣어주시면됩니다.
let person = {
name: "훈이",
};
let acting = {
exercise: function (time, minute) {
console.log(
`${this.name}는(은) 지금 턱걸이 ${time}시간 ${minute}분째 중`
);
},
};
//call(적용시킬곳,파라미터(문자 형태))
acting.exercise.call(person, 2,30);이렇게 파라미터 전송 방식만 바까주시면 동일한 결과값이 나오게 됩니다. ^^
추가적으로 함수안에 배열형태를 넣어 편리하게 개발하는 방법중 Spread Operator를 이용하여 하는 방식도 있습니다
let numbers = [2, 3, 4, 5];
let plus = function (a, b, c, d) {
console.log(a + b + c + d);
};
plus(...numbers);이런식으로 spread기법을 활용하여 손쉽게 매개변수를 다 더해주는 함수를 만들어 줄수도 있습니다.
spread operator는
https://velog.io/@hoon_dev/JavaScript-Spread-Operator-%ED%99%9C%EC%9A%A9-%EB%B0%A9%EB%B2%95
여기를 참고해주시면 되겠습니다.
감사합니다.
참고자료
https://velog.io/@josworks27/%ED%95%A8%EC%88%98%ED%98%B8%EC%B6%9C-call-apply-bind-%EC%B0%A8%EC%9D%B4
