[JS 입문 3주차 과제 | JavaScript ] 01. 나이든 유저 & 02. 어떤 매치가 성사될까?

1. 나이든 유저

(1) 내가 푼 풀이

var user = {
    name: 'john',
    age: 20,
};

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

    user2['name'] = user.name;
    user2['age'] = user.age + passedTime;
    return user2;
};

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

getAged 함수 부분

: user2 객체 동적 생성 (대괄호 사용) ->  이름과 (나이+지난시간) -> 리턴해줌

 

(2) 강의 풀이

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

// 객체 만들어 프로퍼티 복사하기
var getAged = function (user, passedTime) {
    var result = {};
    for (var prop in user) {
        result[prop] = user[prop];
    }
    result.age += passedTime; 
    return result;
}


var agedUser = getAged(user, 6);

var agedUserMustBeDifferentFromUser = function (user1, user2) {
    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);

* user객체 안에 있는 keys들을 prop에 해서 넣어주기  (for~in 사용)

 

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

: this = fighter객체.opponent를 바라봄 

: 호출의 주체가 명확한 메서드임

 

(2) fighter.getName() = John Jones

: this = fighter객체 

 

(3) fighter.getFirstName() : Ciryl 

: this = var fullname의 [0]인 Ciryl  

: 화살표함수 -> 바인딩이 안됨 / 상위의 this를 바라보게 되어있음

 

(4) fighter.getLastName() : Gane

: this = var fullname의 [1]인 Gane

: 그 부분을 대체했다, call했다. => 호출 주체가 명확하지 않음= 

: 클로저와 관련된 내용 /  스스로 선언 & 호출까지하게 됨 => 호출의 주체가 없음 (즉시실행함수)

 

 

 

[출처]

1. 스파르타 코딩, JavaScript 문법 종합반 3주차 (과제)