5월 24일 TIL

자바스크립트 문종반 3주차 과제를 풀다 막혔던 부분들 적어보겠습니다 ~~

 

문제

//가장 아래의 코드가 실행 되었을 때, “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);

 

3주차에 배운 개념인 참조형 데이터는 가변하다는 특성과 더불어 얕은복사, 깊은복사에 대한 개념을 짬뽕시키면 풀 수 있을 것 같은 느낌이 들었다

1. getAged 함수에서 파라미터로 주어진 user 객체를 복사해 새로운 ageman 객체를 만들고 

2. for~in 문을 돌면서 user 객체의 파라미터를 ageman 객체로 하나씩 복사하고 (중첩객체가 없어 얕은복사로 진행함)

3. getAged 함수의 두번째 매개변수인 passedTime 값을 ageman의 age 프로퍼티에 더해주기

이런 순으로 코드 짜보기로 함

 

var getAged = function (user, passedTime) {
  let ageman = {};
  for (let a in user) {
    ageman.a = user.a;
  }
};

첨에 이렇게 for~in 문을 구성했는데 오류가 나서 for문 나온 시점에서 ageman을 출력해보니 

{ a: undefined }

머 이렇게 출력이 되었음 .. 애초에 ageman에 a 라는 속성이 없는걸...?

코드를 찬찬히 뜯어보니 ageman.a 라고 적은걸 ageman의 a속성 이렇게 해석이 된 느낌이다.

 

그래서 혹시나 객체 접근을 . 방식 말고 [ ] 로 해보자 해서 출력해보니

{ name: 'john', age: 20 }

로 잘 출력이 되었다. 

 

for~in 문 돌면서 객체의 프로퍼티에 접근할때 . 표기법 말고 [ ] 대괄호 표기법을 사용해서 접근을 해야하나보다

 

이제 '3. getAged 함수의 두번째 매개변수인 passedTime 값을 ageman의 age 프로퍼티에 더해주기'만 하면 되는데

 

 

var getAged = function (user, passedTime) {
  let ageman = {};
  for (let a in user) {
    ageman[a] = user[a];
  }
  ageman.age += passedTime;
};

var agedUser = getAged(user, 6);
console.log(user, agedUser);

콘솔 찍어보니 agedUser 이 undefined 으로 떴다.. 또 뭐가 잘못됐나 한참을 보니

getAged 함수가 끝나고 반환값을 리턴하지 않았더라고요 

아직 익숙하지가 않아서 그런지 이런 실수가 잦다

getAged 함수 젤 마지막에 return ageman; 추가하니 제대루 작동 완.