function sum(){//매개변수(=parameter)가 없음
var i, _sum = 0;
for(i = 0; i < arguments.length; i++){
document.write(i+' : '+arguments[i]+'<br />');
_sum += arguments[i];
}
return _sum;
}
document.write('result : ' + sum(1,2,3,4));
//결과값
/*
0:1
1:2
2:3
3:4
result : 10
*/
이 함수 안의 arguments :
js상에서 약속된 특수한 이름의 변수명. (arguements라는 유사배열(=객체)이 담겨있다.)
사용자가 전달한 sum함수의 인자 (1, 2, 3, 4)가 arguements의 배열 안에 들어가 있다.
이 객체를 토대로 사용자가 선언한 인자들에 접근 할 수 있는 기능이 arguements이다.
function zero(){
console.log(
'zero.length', zero.length,
'arguments', arguments.length
);
}
zero(); // zero.length 0 arguments 0 (매개변수를 정의하지 않았고, 인자를 정의하지 않았음)
-------------------------------
function one(arg1){
console.log(
'one.length', one.length,//결과값 : 1
'arguments', arguments.length//결과값 : 2
);
}
one('val1', 'val2'); // one.length 1 arguments 2 (매개변수는 하나, 인자는 두개 전달)
-------------------------------
function two(arg1, arg2){
console.log(
'two.length', two.length,
'arguments', arguments.length
);
}
two('val1'); // two.length 2 arguments 1
arguements를 통해서 우리가 알 수 있는것
arguements.length를 통해서 이 객체를 포함하고 있는 함수가 몇개의 인자를 가지고 있는지 파악 가능
함수 내에서 for문을 돌려 arguements[i]를 구해 이 객체를 포함하고 있는 함수에 들어온 인자의 자리수 마다의 값을 알아낼 수 있다.
arguements.length → 함수가 몇개의 인자를 가지고 있는가
함수이름.length → 함수가 몇개의 매개변수를 정의하고 있는가
이 두개의 값을 비교해서 의도하는 것과 다르게 함수를 사용하는지 체크할 수 있다.
function func(){
}
func();
//선언 후 호출
함수는 객체다
→ 객체는 속성(=프로퍼티)를 갖고있다
→ 그중 속성의 값이 함수라면 그 값은 메소드라고 한다.
→ func()라는 함수는 객체이기 때문에 메소드를 가지고 있다.(= 자바스크립트가 기본적으로 가지고 있는 내장 메소드)
결론 : func()은 내장메소드인 func.apply / func.call을 호출할 수 있다.
function sum(arg1, arg2){
return arg1+arg2;
}
sum(1,2) //결과값: 3
sum(2,4) //결과값: 6
sum.apply(null, [arg1, arg2]);
sum.apply(null, [1,2]); //결과값 : 3
sum.apply(null, [4,2]); //결과값 : 6
기본 함수선언식을 통한 호출뿐 아니라 apply라는 내장메소드를 사용해도 같은 값을 호출 할 수 있다.
func.apply(thisObj, [argsArray])
위의 함수처럼 함수 선언식으로 호출하는것이 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){
//여기서의 this는 아직 정해져 있지 않다.(함수를 호출할때 정해진다.)
_sum += this[name];
}
return _sum;
}
alert(sum.apply(o1)) // 결과값 : 6
alert(sum.apply(o2)) // 결과값 : 185
apply 메소드를 사용해서 함수 this의 객체를 해당 컨텍스트에서
thisObj로 지정된 새로운 객체로 변경할 수 있다.
function sum(){
var _sum = 0;
for(name in this){
if(typeof this[name] !== 'function') {//여기서의 this는 아직 정해져 있지 않다.(함수를 호출할때 정해진다.)
_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()) // 6
alert(o2.sum()) // 185
결론적으로는 sum.apply(o1); 과 o1.sum(); 이 같다.
위의 함수처럼 o1, o2의 값을 알기위해 객체안에 직접 sum이라는 함수를 넣는 번거로움 없이, 간편하게 선언된 함수의 this의 객체을 thisObj로 지정된 새로운 객체로 변경이 가능하다.