JavaScript 문법 종합 3주차 과제

문제 1.

가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요.

var user = {
    name: "john",
    age: 20,
}

**var getAged = function (user, passedTime) {
    newUser = {
        name: "john",
        age: 20,
    }
    newUser.age += passedTime;

    return newUser; 
}**  => 이 부분만 추가 함

var agedUser = getAged(user, 6);

var agedUserMustBeDifferentFromUser = function (user1, user2) {
    if (!user2) {
		    console.log("Failed! user2 doesn't exist!");
	  } else if (user1 !== user2) { 
        console.log("Passed! If you become older, you will be different from you in the past!")
    } else {
        console.log("Failed! User same with past one");
    }
}

agedUserMustBeDifferentFromUser(user, agedUser);

실행 시:
{ name: 'john', age: 20 }
{ name: 'john', age: 26 }
Passed! If you become older, you will be different from you in the past!

정답

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);

 

 

문제 2.

출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요.

주의사항 : 브라우저에서 테스트해주세요(Chrome → 개발자 도구 → 콘솔에 입력하여 실행)

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);

 

출력 결과:
Not Francis Ngannou VS John Jones
It is John Jones VS Ciryl Gane

정답

(편의상 Not (1) VS (2) / It is (3) VS (4),(5)로 나타내겠다.)

1. fighter.opponent.getFullname()은 fighter의 opponent의 getFullname을 가리킨다. 이는 정확히 opponent 객체의 fullname을 가리키기 때문에 opponent 내의 'Francis Ngannou'가 답이 된다.
2. fighter.getName()은 fighter의 getName을 가리킨다. getName의 this는 fighter 전체 객체 중 fullname을 가리키기 때문에 'John Gane'가 답이 된다.
   
   
3. 2번과 동일하다.
   
   
4. fighter.getFirstName()은 fighter의 getFirstName을 가리킨다. 내부에 화살표 함수가 있으므로 내부에서 this binding을 하지 않고 상위의 this를 바라본다. 따라서 this binding을 마지막으로 한 fullname에 대한 값을 가져온다. 그것의 0번째 요소를 가져와서 'Ciryl'이 답이 된다.
   
   
5. fighter.getLastName은 함수가 아니기 때문에 fighter의 getLastName을 그대로 대체할 수 있다. 그대로 가져 온 내용을 보면 스스로 선언과 호출을 하였다. 따라서 호출의 주체가 없기 때문에 this bining이 전역 객체를 바라보게 된다. 그것의 1번째 요소를 가져와서 'Ciryl'이 답이 된다.