[고찰] 파생상품으로 공부할 때 주의할 점

파생상품의 맥락에 끌려다니지 말고, 핵심을 주도적으로 파악해야한다.

 

Quiz) 다음 IIFE의 실행결과는?

var foo = {
    bar: function () {
        return this.baz;
    },
    baz: 1,
};

(function () {
    return typeof arguments[0]();
})(foo.bar);

공부할 때 누군가가 공부한 것을 참고하면 큰 도움이 된다.

시행착오가 줄어들기 때문이다.

하지만 "정확하지 않다"는 치명적인 단점이다.

 

위의 예시만 봐도 틀린 설명 때문에 함참을 들여다봤다.

 

1. '익명함수내에서 실행된 foo.bar()'

익명함수내에서는 foo.bar()가 실행된 것이 아니다. foo.bar()는 엄연히 메서드이다.

익명함수내에서는 function () { return this.baz; }가 실행된 것이다.

 

2. '잘 안쓰던 익명함수인데'

익명함수에서만 발생하는 이슈가 아니다.

위 코드를 실행해봐도 undefiend가 나온다.

var foo = {
    bar: function () {
        return this.baz;
    },
    baz: 1,
};

function execFoo() {
    return console.log(typeof arguments[0]());
}
execFoo(foo.bar);

문제의 핵심은 foo 오브젝트안에 정의된 메서드가 실행되지 않고, 다른 컨텍스트안에서 "함수"로써 전달되어 실행되면 this는 호출된 컨텍스트를 바라본다는 점이기 때문이다.

 

 

 

개정판) 핵심을 파악할 수 있는 "좋은" 예제

var foo = {
    bar: function () {
        return this.baz;
    },
    baz: 1,
};

function execFoo(func) {
    return func()
}

console.log(execFoo(foo.bar))    // ? 
cosole.log(foo.bar())            // ?