자바스크립트 들어가기 4

심민기·2022년 4월 9일

자바스크립트

목록 보기

5/11

시즌 2! 함수!

함수형 언어 자바 스크립트.

arguments

변수에 담긴 숨겨진 유사 배열, 함수 호출 인자가 담겨 있다.

인자와 매개변수의 차이 함수(값){내용}으로 함수 선언 시 여기서 값이 매개변수 함수(값)으로 함수를 호출할 때 여기서 값이 인자.

function sum(){
    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));

sum은 인자에 대한 정의가 없는데 호출 할 때를 보면 1234의 4개 인자를 전달하고 있다. 이게 가능한 이유는 argument의 덕. 따라서 .length값은 4가 되고 argument배열은 [1,2,3,4]가 된 것이다.

매개변수와 관련된 두가지 수가 있다. 하나는 함수.length, 다른 하나는 arguments.length이다. arguments.length는 함수로 전달된 실제 인자의 수를 의미하고, 함수.length는 함수에 정의된 인자의 수를 의미한다.

자바스크립트는 무척 관대한 언어라서 함수의 매개변수를 하나만 정했는데 인자를 여러개로 해서 호출해도 실행이 가능, 그러한 점을 막고 싶다면 arguments의 길이와 함수의 길이를 비교해서 의도대로 가도록 정할 수 있다.

  
  function zero(){
    console.log(
        'zero.length', zero.length,
        'arguments', arguments.length
    );
   함수 길이와 argument길이 비교.
}
zero(); // zero.length 0 arguments 0

함수의 호출.

함수는 객체. 객체는 속성 가짐. 속성이 값이면 프로퍼티 함수면 메소드. 가장 기본적 함수 호출.

function func(){} func();
객체 --인스턴스

apply에 대해 알아보자, sum 함수를 선언해보면
function sum(arg1, arg2){
return arg1+arg2;
}
이고 sum(1,2); --3등의 값이 나오는데 sum.apply를 하면
function.apply(){[native code]}
라는 값이 나온다. 즉 sum함수 객체의 메소드, apply가 브라우저가 제공하는 내장 코드라는 뜻이다.

sum.apply(null, [1,2]);--값은 3이다.
즉 sum(1,2)와 같은 것이다.

이게 대체 무슨 말이냐???

다음의 예제를 보자.

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

두개의 객체. o1- 3 속성. o2- 4속성
함수 sum. for in 문으로 객체 자신(this)의 값을 열거,그 후 값을 지역변수 _sum에 저장 후에 리턴.

객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락.
즉, sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다.

o1.sum = sum;
alert(o1.sum());
delete o1.sum();

sum의 o1 소속의 메소드 === 함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다.
일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이 된다. 하지만 JavaScript에서는 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다.

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

즉 apply는 함수를 다른 객체의 소유물로 apply하는 역할.

arguments 변수에 담긴 숨겨진 유사 배열, 함수 호출 인자가 담겨 있다.
객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이 된다. 하지만 JavaScript에서는 함수는 독립적인 객체로서 존재하고, apply나 call 메소드를 통해서 다른 객체의 소유물인 것처럼 실행할 수 있다

심민기

왕초보

이전 포스트

자바스크립트 들어가기 3

다음 포스트

자바스크립트 들어가기 4