생활코딩 자바스크립트 기본 - 함수지향(함수의 호출)

본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의

---

함수 호출

다음은 함수를 호출하는 가장 기본적인 방법이다

function  func(){
    
}
func();

 

함수는 일종의 객체이다. 객체는 속성을 갖는다. 그 속성에 함수를 갖는다면 메소드라 부른다.

 

function sum(arg1, arg2) {
    return arg1 + arg2;
}
document.write(sum(1,2)+"<br>");
document.write(sum.apply(null,[1,2]));

다음의 결과는3으로 같다.

function.apply( null, [a,b] ); 꼴로 코드가 더 길어졌는데 이건 왜 쓰는 걸까?

 

apply()메서드는 주어진 this값과 유사 배열 객체로 제공되는 ardument로 함수를 호출합니다.

call()과 유사하지만, call()은 함수에 전달될 인수 리스트를 받는데 비해, apply()는 인수들의 단일 배열을 받는다.

func.apply(thisArg, [argsArray])

thisArg

  - func을 호출하는데 제공될 this의 값이다. 위에 코드에서는 this값으로 정해준게 없기 때문에 null을 이 자리에 사용해 this값을 대체합니다.

 

argsArrat

   - func 이 호출되어야 하는 인수를 지정하는 유사 배열 객체이다.

 

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;
}
document.write(sum.apply(o1)); // 6
document.write(sum.apply(o2)) // 185

만약 document.write(o1.sum());를 마지막 문장에 넣을 경우, sum.apply(o1)처럼 6이 나올것 같지만, 아무것도 출력되지 않는다.

같은 결과 값을 얻기 위해서 o1을 o1 = {val1: 1, val2: 2, val3: 3, sum: sum}로 수정해준다.

이렇게 되면 결과가

6function sum() { var _sum = 0; for (name in this) { if (typeof this[name] !== 'function') { } _sum += this[name]; } return _sum; }

이렇게 나온다.

sum: sum이 될떄 _sum에 들어가면서 나타나는 결과 이다.

원하는 결과인 6만 얻기 위해서는 for문안에 조건절을 넣는다.

만약 this[name]이 함수형이 아니면 _sum에 더한다의 의미로,

그러면 코드는 다음과 같이 수정된다

o1 = {val1: 1, val2: 2, val3: 3, sum: sum};
o2 = {v1: 10, v2: 50, v3: 100, v4: 25, sum: sum};
function sum() {
    var _sum = 0;
    for (name in this) {
            if (typeof this[name] !== 'function'){
                _sum+=this[name];
            }
    }
    return _sum;
}

document.write(o1.sum());  //6
document.write(o2.sum());  //185