(Javascript) 자바스크립트 심화 (5) 함수의 색다른 호출

안녕하세요 영감을 주는 개발자 방민방민입니다.

오늘 시간에는 자바스크립트에서 함수를 호출하는 색다를 방법에 대해서 다루어 보고자 합니다.

함수를 호출하는 기본적인 방법은 어렵지 않습니다.

function functionName(arg1, ... argN) = { } 와 같이 선언된 함수는 단순하게

functionName(arg1, ... argN) 으로 호출해 주기만 하면 됩니다.

이는 가장 단순한 방법이지만 자바스크립트를 활용한 고급 프로그래밍 단계에서는 함수를 호출하는 다양한 방법을 알아 둘 필요가 있습니다 .

1.기본 함수 호출

자바스크립트에서의 함수도 기본적으로 객체의 성질을 갖습니다. 객체의 성질을 가지고 있다는 것은 그 내부에 있는 메소를 사용할 수 있다는 것을 말합니다. 예를들어 sum 이라는 함수를 선언했다면 'sum.~~~'과 같은 호출을 통해 sum 함수가 객체적 특징으로 가지고 있는 다양한 내부 메소드(자바스크립트가 제공하는) 를 사용할 수 있다는 것을 말합니다.

아래는 구글 크롬 html 에서 콘솔을 열어두고 sum 이라는 함수를 선언한 뒤 'sum. ' 을 입력하여 어떠한 메서드가 사용 가능한지를 확인한 것입니다. 기존에 다양한 포스팅에서 사용했던 length 뿐만아니라, 지난 시간에 다루었던 arguments 등 다양한 내용을 확인할 수 있습니다.

위의 메소드 들 중 apply 라는 메소드도 함수를 호출하는 방법중 하나입니다. 이를 활용하여 아래의 예제를 학습해 보겠습니다.

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

단순히 sum(1,2); 로 호출해도 충분하지만 위의 예에서는 sum.apply 를 이용하여 함수를 호출하였습니다. 

apply 메소드의 인자는 호출타입과 인자값을 가지는 배열 이 오게됩니다. 이 경우에는 null과 [1,2] 가 오게 되었습니다. 결과는 1과 2를 더한 3을 출력합니다.

그러면 단순히 sum(1,2) 로 해도 충분한 것을 왜 굳이 apply 와 같은 메소드를 이용하여 호출해야하는지 이해가 되지 않을 것입니다. 위와같은 예제는 apply의 기능을 보여주기에 사실은 적합한 예제가 아닙니다.

 

2. 실제 apply의 사용

apply 메소드를 사용하는 적합한 예제를 함께 보시겠습니다.

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))

o1 과 o2 는 각각 val1, val2, val3 와 v1, v2, v3 를 속성으로 갖고 있는 두 객체입니다. 두 객체 내에 있는 속성의 값들을 모두 더하기 위해서는 객체 자체를 받아서 각 속성값을 더하는 함수를 만들수도 있지만, 위와같이 아무런 매개변수를 받지 않고, 입력되는 객체를 'this' 로 인지하여 각각의 속성값에 접근하여 그 값을 더하는 함수를 구현할 수도 있습니다.

여기에서 sum() 함수의 this 는 아래 sum.apply(o1) 에서는 o1 가 되고, sum.apply(o2) 에서는 o2 가 됩니다. 즉 for 문 내에서 name 는 this 가 o1 일때, val1, val2, val3를 돌게 되고, 각 속성에 저장된 값을 _sum에 더하여 주게 됩니다. o1 과 o2 내부 속성의 값을 각각 더한 sum.apply 메서드는 6과 185를 출력하게 됩니다.

이러한 함수 메서드는 그 내용이 방대하고, 실제 이러한 간단한 예에서는 그 사용의 필요성을 깊게 체감하기가 어렵습니다. 앞으로 더 방대한 양의 자바스크립트 개발을 위한 초석이라고 생각하고 가볍게 받아들이는 마음으로만 이 내용을 생각하시면 될 것 같습니다.

그럼 지금까지 영감을 주는개발자 방민방민이었습니다. 

감사합니다 :)