TIL

JavaScript 강의 3주차 숙제 (얕은 복사, this 참조)

황민도 2024. 4. 30. 21:51

내일배움캠프 스파르타 코딩클럽 강의숙제

 

첫 번째 숙제

01. 나이든 유저
가장 아래의 코드가 실행 되었을 때, “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);

 

사실 처음엔 도데체 뭘원하는 문제인가 문제 내용이 자세하지 않아 굉장히 난감해 했던 숙제다  

한참을 생각하면서 이번주차에 배운 과정중에 이거랑 연관이 있는게 뭐가 있었지 하며 생각해 보았다.

사실 개인과제 하면서 몇일째 안들었다고 배운과정이 바로 생각나지 않은게 사실이다.

그런데 user1 !== user2 를 보며 객체가 서로 달라야 한다는 것은 복사를 할때 얕은 복사가 필요 하다는 것!

생각이 나자마자 코드를 작성하기 시작하였다.   

 

var user = {
  name: "john",
  age: 20,
  };
  var getAged = function (user, passedTime) {
    let object = {};
    for (let copy in user) {
      object[copy] = user[copy];
    };
    object.age += passedTime;
    return object;
  };
  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);

 

얕은 복사를 하기 위해서는 

다음과 같이 빈 Object 를 object 에 변수선언을하여 할당해주고 for ~in문으로 하나 씩 돌려가며 object에 넣어주면

얕은 복사가 완료 된다.

그리고 추가적으로 나이든 유저가 뭔 의미인지 몰랐었는데 코드를 보니 원래 본인이 작성한 정보에 나이가 들어서 뭔가를 하나 싶었다.

그리하여 현재 추가 된 나이를 나타내려면

object.age += passedTime 을 하면 된다.

그리고 마지막으로 object를 return 해주면

user2 매개변수에 할당된 객체는 얕은 복사를 한 

name: "john"

age: 26

이 되므로 user1 매개변수에 할당된 객체

name: "john"

age: 20

과 서로 다르므로

콘솔에는 "Passed! If you become older, you will be different from you in the past!" 가 나오게 된다.

 

 

두 번째 과제

02. 어떤 매치가 성사될까?
출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요
주의사항 : 브라우저에서 테스트해주세요(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
mdmovie.js:203 It is John Jones VS Ciryl Gane

 

그리고 내가 배운걸 생각 나는 대로 적어보았다.

 

첫 번째 함수 호출

fighter.opponent.getFullname() 은 객체의 메소드로 함수를 호출 하였으므로 this 는 fighter.opponent 객체이고 호출된 함수의 getFullname() 이 return 하는 값이 this.fullname 이므로 Francis Ngannou 를 나타낸다.


두 번째  함수 호출

fighter.getName() 은 객체의 메소드로 함수를 호출 하였으므로 this 는 fighter 객체이고 호출된 함수의 getName() 이 return 하는 값이 this.fullname 이므로 John Jones 를 나타낸다.


세 번째 함수 호출

fighter.getName() 위 두 번째 함수 호출과 동일하다.


네 번째 함수 호출

fighter.getFirstName() 은 화살표 함수이자 this 를 바인딩 하지 않으므로 함수가 선언된 위치에서의 this 참조하기 때문에 전역 스코프 위치에서 호출 되었으므로 전역 스코프에 해당하는 fullname 은 Ciryl Gane 를 할당한 fullname 이라는 변수이며 .split(' ')[0] 은 Ciryl을 나타낸다.   // 오류 : 선언된위치? 생성시점? 제대로 다시 공부해서 수정 바람

 

다섯 번째 함수 호출

fighter.getLastName은 즉시 실행 함수(IIFE) 이므로 실행 컨텍스트가 전역 스코프이기 때문에 this는 네 번째 함수 호출과 마찬가지로 Ciryl Gane 를 할당한 fullname 이라는 변수 이며 .split(' ')[1]은 Gane를 나타낸다.

 

사실 3주차 후반이 기본적인 설명 이 갑자기 사라지고 뭔가 속도도 빠르고 기본베이스 자체를 아는사람에게 설명하는 듯이 강의 방식이 바뀌어서 이해도가 갑자기 현저히 저하되었다.

그래서 내가 아는게 정답이 아닐 수도 있다.

계속 반복하여 뭔가를 학습 할때마다 뇌에서 수정 되어야 될것들이 생기는 나머지 정리된걸 다시 풀어헤치고 정리한다는건 여간 쉬운일이 아니라 이해를 최대한 하고 가려고 한다. 그러다 보니 진도가 많이 늦어지는 것 같다.