안녕하세요. 신기한 연구소입니다.
이번 포스팅은 apply() 함수에 대해 쉽게 정리해보겠습니다.
저번 포스팅에 Function.prototype.call()에 대해 알아봤습니다.
2022.03.13 - [Software/JavaScript] - [왕초보]자바스크립트 Function.prototype.call() 함수 구문 이해하기. call().
[왕초보]자바스크립트 Function.prototype.call() 함수 구문 이해하기. call().
안녕하세요. 신기한 연구소입니다. 이번 포스팅은 call() 함수에 대해 쉽게 정리해보겠습니다. 자바스크립트 책을 읽다 보니 call() 함수가 종종 나타나더군요. 그럼 좀 더 쉽게 이해하기 위해 예제
tiboy.tistory.com
이번 포스팅의 Function.prototype.apply()도 call과 아주 비슷한 기능을 가지고 있답니다.
사실 기능은 같고 입력 파라미터 방식만 다를 뿐입니다.
call() 함수에 전달될 인수 리스트를 순서대로 받는데
apply()는 인수 리스트를 배열 형태로 받는답니다.
그럼 먼저 apply() 구문에 대해 알아보겠습니다.
구문
func.apply(thisArg, [argsArray])
정의
이미 다른 객체에 사용 중인 메서드나 함수를 또 다른 객체에서 중복해서 재작성하지 않고
apply()를 이용해서 사용할 수 있습니다.
정의가 call()과 똑같습니다. 즉 기능이 같다고 보면 됩니다.
|
1
2
3
4
5
6
|
var nums = [2, 6, 9, 3, 8];
var max = Math.max.apply(null, nums);
console.log(max);
var min = Math.min.apply(null, nums);
console.log(min);
|
cs |
이 예제를 살펴보겠습니다.
배열 nums를 선언합니다.
그리고 Math클래스의 max 함수를 사용해서 최고 큰 값을 찾고 싶습니다.
다른 객체를 통하지 않고 내장 객체를 사용하기에
Math.max를 사용해서 최대값을 구하기 때문에
첫 번째 인자는 null을 사용했습니다.
max는 9가 나옵니다.
nums가 배열임을 확인하세요. call()은 인자 값 하나씩 추가해서 받지만
apply()는 인자값으로 배열을 받는답니다.
Math.min 또한 같은 기능으로 받은 배열 값 중 최솟값을 반환하게 됩니다.
이를 활용하는 객체가 없고 내장 객체를 사용하기에 역시 첫번째 인자는 null이 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var person = {
fName: function() {
return this.fName + " " + this.lName;
}
}
var person1 = {
fName: "minsoo",
lName: "Jung"
}
console.log(person.fName.apply(person1));
|
cs |
이 예제를 살펴보겠습니다.
우선 person 객체에 fName라는 메서드가 있습니다.
하지만 person 객체에 fName, lName 값은 정해지지 않았습니다.
this를 사용해서 해당 객체의 변수값을 사용한다고 되어 있지만 정의된 부분이 보이지는 않습니다.
7번 라인을 보면 person1객체를 선언했습니다.
이 객체에는 fName과 lName을 선언했습니다.
이때 person1의 객체가 person 객체의 메서드를 사용하고 싶다면
apply()를 사용하면 됩니다.
중복 선언해서 사용할 필요가 없다는 의미입니다.
person1 객체가 person 객체의 메서드 fName을 호출하면서
person1 객체의 값을 사용하게 됩니다.
다른 객체의 메서드를 사용하게 해주는 함수가 바로 apply()입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var person = {
fName: function(a, b) {
return this.fName + " " + this.lName + "," + a + "," + b;
}
}
var person1 = {
fName:"minsoo",
lName: "Jung"
}
console.log(person.fName.apply(person1, ["Seoul", "Korea"]));
|
cs |
이번 예제는 좀 복잡해 보입니다.
하지만 앞 전 예제와 거의 유사합니다.
다른 점은 person 객체의 fName 메서드가 인자 값으로 a, b를 받는다는 겁니다.
apply()를 호출할 때 객체 person1과 함께 추가 인자 값으로 Seoul과 Korea를 넣는데
배열 형태로 전달합니다.
만약 call() 함수를 사용했다면 다음과 같이 코딩하면 됩니다.
이렇게 다른 객체 또는 전역에 사용 중인 함수 또는 메서드를 재사용하기 위해서
apply()을 사용하는 방법에 대해 살펴봤습니다.
처음 이 함수를 접할 때 이해가 잘 안 되었다면 이 포스팅을 참고해서 쉽게 이해했으면 합니다.
'Software > JavaScript' 카테고리의 다른 글
| [초보코딩]자바스크립트 사용하기 편. -Javascript (0) | 2022.04.25 |
|---|---|
| [왕초보]자바스크립트 Function.prototype.bind() 함수 구문 이해하기. bind(). (0) | 2022.04.10 |
| [왕초보]자바스크립트 Function.prototype.call() 함수 구문 이해하기. call(). (0) | 2022.03.13 |
| [왕초보]자바스크립트 in, instanceof 연산자 사용해보기. (0) | 2022.02.13 |
| [왕초보]자바스크립트 논리 표현식 이해하기. &&, ||, ! [[논리연산자]] (0) | 2022.02.01 |
