2024/04/23 TIL

자바스크립트 예제

브라우저의 콘솔창에서 다음 코드를 실행했을 때 출력 결과 및 이유를 설명하세요.

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());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

 

출력결과

첫 문장에서 Francis Ngannou가 나온 이유는

fighter.opponent.getFullname()을 이용해 getFullname을 fighter내부의 opponent의 메서드로써

호출했기 때문에  getFullname이 opponent를 this로 받았기 때문입니다.

 

자바스크립트에서 함수는 this를 전역객체로 받지만

메서드로 사용할 경우 메서드가 속한 객체를 this로 받습니다.

 

John Jone도 Francis Ngannou와 같은 이유에서

getName이 속한 fighter를 this로 받아 fighter객체의 fullname키의 값 John jones를 반환했습니다.

 

하지만 그 다음 문장에서 fighter.gerFirstName()과 fighter.getLastName을 호출했을 땐

fighter객체 외부의 fullname인 Ciryl Gane를 반환했습니다.

 

먼저 fighter.getFirstName()을 보시면 화살표함수입니다.

화살표함수는 선언된 시점에서의 상위 스코프가 this로 바인딩됩니다.

그래서 화살표함수인   fighter.getFirstName() 처럼 메서드로써 사용하게되면

선언된 시점에서 상위 스코프인 전역 객체를 this로 받아

fighter외부의 fullname인 Ciryl Gane을 받습니다.

여기에 split을 이용해 Ciryl을 반홥합니다.

 

Gane은 fighter에 속한 getLastName을 실행한 결과로 
getLastName의 경우 즉시실행함수로 호출의 주체가 없기에 
fighter.getLastName 로 실행하였지만 Ciryl Gane을 가리킵니다.
거기서 split을 이용해 Gane을 가져옵니다.