#10. 3주차 숙제

1. 나이 든 사용자

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

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

var getAged = function (user, passedTime) {
		// 여기를 작성해 주세요!
}


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

 

해답

이 코드에서 passed ~ 가 출력되려면 성립해야 하는 조건은 else if (user1 !== user2) 가 된다.

코드 구조 상 user2 는 agedUser 가 되고 이 agedUser 는 기존 user 객체에서 age 가 6 증가해야 한다.

따라서 user 에서 agedUser 로 깊은 복사 후, passedTime (6) 만큼 age 에 더하는 알고리즘을 구현해야 한다.

var getAged = function (user, passedTime) {
    var agedUser = {};
    if(typeof user === 'object' && user !== null)
    {
        for(let prop in user) agedUser[prop] = getAged(user[prop]);
    }
    else agedUser = user;
    agedUser.age += passedTime;

    return agedUser;
}

 이전에 배웠던 깊은 복사 알고리즘을 활용하였다.

1. if 문에서 매개변수 user 가 객체가 맞는지, 동시에 빈 값이 아닌지 확인하고, for - in 문을 통해 key = value 복사 및 재귀 호출을 통한 깊은 복사를 수행한다.

2. 복사 과정이 끝나고 나면 agedUser 의 age 에 passedTime 만큼 더해준다.

 

실행 결과

 

 

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

 

해답

출력 결과를 먼저 살펴보면

다음과 같이 나타난다.

1. fighter.opponent.getFullName() 는 'Francis Ngannou'

2. fighter.getName() 은 'John Jones'

3. fighter.getFirstName() 은 'Ciryl'

4. fighter.getLastName() 은 'Game' 

을 가리킨다.

그 과정을 하나씩 설명한다.

 

1. fighter.opponent.getFullName()

이 함수에서의 this 는 호출 주체, 즉 fighter.opponent 를 가리킨다. 이 객체의 getFullName() 은 this.fullName, 즉 Francis Ngannou 를 출력한다.

 

2. fighter.getName()

이 함수에서의 this 또한 1번과 마찬가지로 호출 주체, fighter 를 가리킨다. 따라서 이 객체의 getName(), John Jones 를 출력한다.

 

3. fighter.getFirstName()

얼핏 보면 1, 2번과 같은 경우라고 생각할 수 있지만, 이 getFirstName() 함수는 화살표 함수이다. 화살표 함수는 this 바인딩 과정을 거치지 않으므로 이 함수가 호출된 위치, 즉 콜 스택 원리에 따라 이전의 this 를 유지한다.

호출된 위치는 전역 컨텍스트이므로 this 는 전역 객체, 즉 this.fullName 은 제일 위의 코드인 Ciryl Gane 을 말하며 이 코드의 ' ' 스페이스바 기준 앞쪽 인덱스, Ciryl 을 출력한다.

 

4. fighter.getLastName

이 getLastName 함수는 '즉시 실행 함수' 의 형태를 취하고 있고, 이는 선언과 동시에 실행된다는 것을 뜻한다.

따라서 this 는 실행 시점의 this 에 바인딩 되며, 실행 시점은 전역 컨텍스트이므로 this 는 전역 객체를 가리킨다. 이후부터는 3번과 같은 논리로 Ciryl Gane 의 두번째 인덱스, Gane 을 출력한다.