[JS] 생활코딩 섹션 16, 17

유누윤·2022년 10월 3일
0

섹션 16. 함수지향 - arguments

arguements란?

  • 함수 안에서 인자와 관련된 함수의 여러가지 정보를 담고있는 객체.
    사용방법이 배열과 비슷하기 때문에 유사배열이라고도 한다.

arguements의 역할

1. arguments

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이다.

2. arguments 기능

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를 통해서 우리가 알 수 있는것

  1. arguements.length를 통해서 이 객체를 포함하고 있는 함수가 몇개의 인자를 가지고 있는지 파악 가능

  2. 함수 내에서 for문을 돌려 arguements[i]를 구해 이 객체를 포함하고 있는 함수에 들어온 인자의 자리수 마다의 값을 알아낼 수 있다.

  3. arguements.length → 함수가 몇개의 인자를 가지고 있는가
    함수이름.length → 함수가 몇개의 매개변수를 정의하고 있는가
    이 두개의 값을 비교해서 의도하는 것과 다르게 함수를 사용하는지 체크할 수 있다.

섹션 17. 함수지향 - apply

함수를 호출하는 색다른 방법

1. 기본적인 방법

function func(){
}
func();

//선언 후 호출

함수는 객체다
→ 객체는 속성(=프로퍼티)를 갖고있다
→ 그중 속성의 값이 함수라면 그 값은 메소드라고 한다.
→ func()라는 함수는 객체이기 때문에 메소드를 가지고 있다.(= 자바스크립트가 기본적으로 가지고 있는 내장 메소드)

결론 : func()은 내장메소드인 func.apply / func.call을 호출할 수 있다.

2. apply를 활용한 방법

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라는 내장메소드를 사용해도 같은 값을 호출 할 수 있다.

apply 함수를 사용하는 이유

apply 기본 식

func.apply(thisObj, [argsArray])

위의 함수처럼 함수 선언식으로 호출하는것이 apply를 사용하는것 보다 더욱 간단하다.
그럼 언제 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로 지정된 새로운 객체로 변경이 가능하다.

0개의 댓글