[240425 TIL] module 과 this

다음과 같은 this 바인딩에 대해 생각해볼 수 있는 코드를 실행해보는 과정에서 

예상하지 못한 동작이 발생했습니다.

 

var fullname = 'Ciryl Gane'

var fighter = {
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
            return this.fullname;
        }
    },

    getName: function() {
        return this.fullname;
    },

    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },

    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()


}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
// 여기서 fighter.getFirstName(), fighter.getLastName 이 둘이 안찍히고
// this 가 undefined 되는 문제
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

 

그런데 이 코드를 브라우저의 개발자도구 콘솔에 붙여넣고

실행하니 정상적으로 작동했습니다.

 

결론부터 말하자면 html 에 script를 연결할 때 type="module"을 설정한 것이 원인이었습니다.

 

ES6 모듈(즉 type="module") 스크립트에서는 this 가 전역객체(window)를 참조하지 않는다고합니다.

이는 모듈 스코프를 독립적으로 유지하기 위해서 라고 합니다.

모듈 내부에서 전역 스코프에 의존하지 않도록 하기 위해 this가 전역 객체를 참조하지 않는 것입니다.

 

일반 스크립트에서는 this가 전역객체 window를 참조하므로,

여기서 화살표 함수나 즉시실행 함수의 this는 정상적으로 전역객체에 접근이 가능합니다.

 

하지만 모듈은 스코프 관리에 유리하다고 합니다.

모듈은 자체적인 스코프를 가집니다. 이는 전역 스코프를 오염시키지 않고 

필요한 변수와 함수를 모듈 내부에 캡슐화할 수 있음을 의미합니다. 

이로 인해 이름 충돌의 가능성이 줄어들고, 코드를 더욱 안전하고 관리하기 쉽게 만듭니다!