[250103 금요일]

⁉️ 질문이 섭섭하네..

질문 제목에 <나이든 유저> 라니요..
문제 확인하기 전부터 섭섭한 제목😢

일단 코드가 주어지고 특정 값을 반환하게 함수를 작성하라는 것이다.

• 문제 코드

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일때 출력 되도록 getAged 함수 부분을 채워달라는 건데..
나는 이걸 보고 처음에 감을 못잡았다.

맨 마지막 줄, 함수 호출부에 있는 인자들 부터 파악하며 찾아가면 쉽게 알수 있는 부분이었는데 윗줄부터 확인했더니 어쩌라는 것이냐? 부터가 나왔다.

내용파악을 위해서 먼저 주어진 그대로의 코드를 실행하면 어떤값을 반환하는지 부터 확인하면,

Failed! user2 doesn't exist!

user2가 존재하지 않는다고 나온다.

우리가 원하는 출력은 user1 !== user2일때 값이기 때문에 user2를 생성 할 수 있도록 해야한다.

그럼 가장 마지막줄 함수에서 받는 인자를 확인해보면 user, agedUser를 받는다.
agedUserMustBeDifferentFromUser함수가 선언된 부분과 비교하면
user1 = user 이고 user2 = agedUser 인 것을 확인 할 수 있다.

user는 {name: 'john', age: 20}객체로 이미 최상단에 선언되어 있다.

agedUsesr는 getAged함수에서 (user, 6)를 인자로 받아왔다.

getAged함수가 선언된 부분을 채워야 하는데 이때 들어갈 인자는 (user, passedTime)다.

정리하면 user1과 user2는 서로 비교해야할 각각의 {객체}이고, 받아온 인자들을 확인해보면

user1 = user{name, age} , user2 = agedUser{user.name, user.age + passedTime(6)}

user2는 user 에서 age만 6 증가한 복사 객체인것이다.

✔︎ 그럼 풀어볼까!?

1. user{객체}를 복사할 빈 객체를 생성
2. {객체}의 속성들을 순회 하며 복사할 for...in 함수 사용
3. 복사한{객체} 속성중 age 증가 추가
4. 이름은 그대로 복사하고 age가 증가된 {객체} 반환

var getAged = function (user, passedTime) { 
// user{객체}를 복사한후 나이를 추가할 빈 객체 copyUser생성
  let copyUser = {};
  // user{객체}를 순회하며 속성을 복사할 for~in 함수
  for (const key in user) {
    copyUser[key] = user[key];
    }
    // 복사한 copyUser{객체}.age 속성에 passedTime을 더한 후 저장
    copyUser.age += passedTime;
    return copyUser;
  }

위 함수를 작성한 후 user와 agedUser를 출력해 보면

console.log(user);  // { name: 'john', age: 20 } 출력
console.log(agedUser); // { name: 'john', age: 26 } 출력

객체가 아주 잘 복사되고, age 속성값도 증가된 것이 확인된다.

전체 코드를 실행하면 원하는 값이 잘 출력되는 것도 확인 된다.

그리고 이 객체 복사는 중첩된 객체의 경우 바로 아래 단계의 값(1depth)만 복사 할 수 있는 얕은 복사 라는 개념이다.

중첩된 객체 내부의 모든값을 다 복사하는 것은 깊은 복사라고 한다.
깊은 복사에 대한 설명은 80% 쯤은 이해한것 같으나 문제를 풀어보라고 하면...글쎄..

개념을 제대로 파악했는지 확인하는 가장 좋은 방법은 문제를 풀어보는 것이라 생각한다.
깊은 복사에 대해서 문제를 풀게 된다면 개념을 다시한번 확인하고 풀어보고 포스팅할 계획이다!!

다음주 부터는 JS심화가 들어가고 개별과제도 제출해야하기 때문에 이번 주말은 기본을 다시 한번 복습하기로!!