Languages/Java Script

[Js] 함수의 호출 | 자바스크립트 함수 호출 | apply

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

함수호출

함수에 대한 기본 수업에서 함수를 호출하는 방법을 알아봤다. 아래는 함수를 호출하는 가장 기본적인 방법이다.

<script>
    function func(){
    }
    func();
</script>

자바스크립트에서 함수라는 것은 일종의 객체이다.

객체는 속성들을 가지고 있다.

이 속성에 값이 저장되어 있다면 "속성"이라고 하고, 함수가 저장되어 있다면 이것을 "메소드"라고 부른다.

JavaScript는 함수를 호출하는 특별한 방법을 제공한다.

본 토픽의 시작에서 함수를 객체라고 했다. 위의 예제에서 함수 func는 Function이라는 객체의 인스턴스다.

따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있다.

지금 이야기하려는 메소드는 Function.apply과 Function.call이다. 이 메소드들을 이용해서 함수를 호출해보자.

<script>
    function sum(arg1, arg2){
        return arg1+arg2;
    }
    alert(sum.apply(null, [1,2]))
</script>

결과는 3이다.

즉, 쉽게 말하자면 기본 함수 호출방법이외에도 함수가 가진 메소드들을 통하여 함수 호출이 가능하다는 것이다.

함수 . 을 하면 함수 안에 메소드를 확인할 수 있다.

※ 내장된 코드의 경우 native code라고 출력됨.

위와 같은 경우는 불편하여 쓸 일이 없을 것이다 생각할 수 있지만, 인자의 값을 제외한 null부분을 살펴보면

이 메소드의 필요성을 알 수 있다.

즉 null이 아닌 다른 값이 들어오게 되는 경우 이 메소드를 사용하는 것이다.

함수 sum은 Function 객체의 인스턴스다. 그렇기 때문에 객체 Function 의 메소드 apply를 호출 할 수 있다.

apply 메소드는 두개의 인자를 가질 수 있는데, 첫번째 인자는 함수(sum)가 실행될 맥락이다.

맥락의 의미는 다음 예제를 통해서 살펴보자. 두번째 인자는 배열인데, 이 배열의 담겨있는 원소가 함수(sum)의 인자로 순차적으로 대입된다. Function.call은 사용법이 거의 비슷하다 여기서는 언급하지 않는다.

좀 더 흥미로운 예제를 살펴보자. 결과는 6과 185이다.

<script>
      o1 = {val1:1, val2:2, val3:3}
      o2 = {v1:10, v2:50, v3:100, v4:25}
      function sum(){
          var _sum = 0;
          for(name in this){
              _sum += this[name];
          }
          return _sum;
      }
      alert(sum.apply(o1)) // 6
      alert(sum.apply(o2)) // 185
      //즉 sum이라는 함수를 호출할 때, null이아닌 o1,o2라는 객체로 인자를 전달한 것
</script>

this란 무엇일까?

이 맥락에서 this는 현재 정해져있지 않다. 호출할 때 정해지기 때문이다.

sum.apply를 하게 되면 sum이 호출되는데, o1을 인자로 주게 된다.

이렇게 되면 o1이 sum함수의 this가 되는 것이다.

즉 var this = o1; 이라는 코드가 암시적으로 생성된 것이나 다름 없는 것이다.

예제가 복잡해보이지만 하나씩 분해해서 생각해보면 어렵지 않다.

우선 두개의 객체를 만들었다. o1는 3개의 속성을 가지고 있다. 각각의 이름은 val1, val2,val3이다.
o2는 4개의 속성을 가지고 있고 o1과는 다른 속성 이름을 가지고 있고 속성의 수도 다르다.

그 다음엔 함수 sum을 만들었다.

이 함수는 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서 객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후에 이를 리턴하고 있다.

객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락이다.

이렇게 생각하자.
sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다.
아래와 비슷하다. (실행결과가 조금 다를 것이다.

그것은 함수 for in문으로 객체 o1의 값을 열거할 때 함수 sum도 포함되기 때문이다.)

아래는 위 코드를 다른 방법으로 표현한 것이다.

<!DOCTYPE html>
<html>
<head>
	<title>함수의 호출</title>
</head>
<body>
<script type="text/javascript">
	function sum(){
	var _sum =0;
	for(name in this){//this는 전달받는 인자.
		if(typeof this[name] !== 'function')//this의 값 타입이 function이 아닌 경우만 출력
			_sum += this[name];
		}
	return _sum;
	}
	o1 = {val1:1, val2:2, val3:3, sum:sum}
	o2 = {v1:10, v2:50, v3:100, v4:25, sum:sum}
	alert(o1.sum());
	alert(o2.sum());


</script>
</body>
</html>

하지만 이러한 방법은 불편한 점도 많고, 코드도 난잡하다.

이러한 경우 apply를 사용하여 함수가 호출되는 시점에서 함수의 this값을 프로그래밍 적으로 변경하여,

마치 함수가 o1의 속성인 것처럼 실행시킬 수 있다는 것이다.

<script>
    o1.sum = sum;
    alert(o1.sum());
    delete o1.sum();
</script>

sum의 o1 소속의 메소드가 된다는 것은 이렇게 바꿔 말할 수 있다.

함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미다.

일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이 된다. 하지만 JavaScript에서 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다. ~~흥미롭다.~~

만약 apply의 첫번째 인자로 null을 전달하면 apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 된다.

'Languages > Java Script' 카테고리의 다른 글

[Js] 생성자와 new \| javascript의 객체 지향 특징 \| 객체 (0)	2021.02.04
[Js] 객체지향 \| javascript 객체 지향 프로그래밍 \| 문법 (0)	2021.02.04
[Js] arguments \| 배열 \| javascript 배열 \| 매개변수 (0)	2021.02.04
[Js] 클로저 \| 외부함수, 내부함수 (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] 함수의 호출 | 자바스크립트 함수 호출 | apply

함수호출

this란 무엇일까?

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바