JS 문법 종합 3주차 240816

첫번째 문제는 불변 객체에 대한 작성이었는데

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! If you become older, you will be different from you in the past!'

 

가 로그에 나오면 되는 방식이었는데

 

아래 부분의 함수를 확인하면서 

 

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

 

user2가 존재하고, user1 !== user2 면서 user1 == user2 가 아니면 되는 함수라서

 

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

    newage = user.age + passedTime
    result = {name:user.name , newage}

    return result;
}

사실 이런 방식으로 하드코딩을 하면 간단하겠지만

 

출제자의 목적이 이게 아닌거 같고, 이번 수업에서 배운 내용이다 보니

 

for in 구문을 써서 함수에서 별도의 프로퍼티를 작성하는 방향으로 써봤다.

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

    for (var p in user) {
        result[p] = user[p]
    }
    
    result.age += passedTime

    return result;
}

로 작성하니 깔끔하게 되었다.

 

2번 문제는 상황에 따른 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());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

해당 코드를 브라우저 개발자 도구 console 실행을 통해 확인한 후 왜 그 log가 나오는지에 대한 이유를 적으라는 숙제였다.

It is John Jones VS Ciryl Gane

fighter.opponet.getFullname()

getFullname() 이 선언될 당시의 LE를 참조해서 가장 가까운 요소인 
fullname: 'Francis Ngannou' 가 적용.

fighter.getName() 

getName()이 선언될 당시의 LE를 참조후 가까운 요소인
fullname: 'John Jones' 가 적용.

fighter.getFirstName() 
화살표 함수로 적용이 되서 fighter 객체 안이 아니라 더 상위값인
바깥의 fullname 인 var fullname = 'Ciryl Gane'을 적용받아서 split한 후 0번쨰 순서인 'Ciryl'를 적용

fighter.getLastName

메소드로 작동되었지만 함수로 불린게 아니라 요소로 불린 이후 함수가 작동이 되는거라
해당 영역의 this를 적용받아서 'Ciryl Gane'을 적용? 모르겠음

 

이후 풀이 영상을 보니까 앞 3개는 이해한 내용이 거의 맞았고 뭐 4번째는 아직 배우지 않은 내용이었지만

 

this가 어떤 방식으로 바인딩 되는지는 이해했다.