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

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

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())            // ?