[TIL] spread 연산자(얕은복사)

자바스크립트 강의의 3주차 과제를 풀고 있었다.

아래코드에서 마지막 줄에 있는 함수를 실행 했을때 결과로 "Passed!~~"가 출력되게끔
getAged 함수를 작성하는 것이다.

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

이 과제에 본질은 어떻게 객체를 가져와서 age만 수정할 것인가 이다.

나는 바보같이 새로운 변수에 user를 집어넣고 새로 만든 변수를 수정했다.

강의에서 그렇게 얘기했던 참조형데이터를 까먹어버렸다.....

var getAged = function (user, passedTime) {
  var currentUser = user;
  currentUser.age += passedTime;
  return currentUser;
};
// 새로운변수에 할당했지만 참조값이 같기 때문에 어떤걸 수정해도 같이 변하게 된다.

코드만 한참을 보다가 객체를 복사해야지 라는 생각이 들었다.
바로 강의자료에 얕은 복사방법을 참고했다.

중첩된 객체를 복사할때는 깊은복사가 필요하지만 현재는 얕은 복사로 가능하다.

var getAged = function (user, passedTime) {
  var currentUser = {};  
	for (var prop in user) {
		currentUser[prop] = user[prop];
	}
  currentUser.age += passedTime;
  return currentUser;
};
// user의 모든 prop을 불러와 새로운 객체에 집어넣어줬기 때문에 참조값이 달라진다.

위 코드로 수정하니 정상동작 했다.
그런데 갑자기 spread연산자는 어떻게 될까 라는 생각이 들어서 적용해보았다.

var getAged = function (user, passedTime) {
  var currentUser = { ...user };
  currentUser.age += passedTime;
  return currentUser;
};

결과는 정상동작한다.

spread연산자로 사용하니 훨씬 코드가 간결해졌다.
spread연산자로도 얕은복사가 가능하다는 것을 알게 되었다.

Object.assign() 말고도 ...으로 충분히 배열과 객체 얕은복사가 가능하다.
깊은복사가 필요할 때에는 사용하지 않음.

전개 구문 관련 MDN 문서 :
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

---

JavaScript를 공부할수록 비슷한 기능들이 너무 많다.

사용자 편리성을 위해 같은 기능이지만 발전된 메서드들과 구문이 만들어지는 것 같다.

발전된 기능들이 있더라도 기존의 기능들을 잘 알고 있어야 코드를 해석할 수 있기 때문에

아는 것만 사용하려 하지 말고 다양한 방법을 모색해보자.