[javascript] ⭐⭐객체의 가변값과 가변성 (with, 참조형 데이터) / 얕은복사 깊은복사

👀 재귀적으로 수행한다? 함수나 알고리즘이 자기 자신을 호출해 반복적으로 실행되는 것

 

 

데이터타입의 기본 설명

https://vc-xz.tistory.com/144

[javascript] 데이터타입의 종류 (기본형, 참조형)

 

 

 

 

* 그래서 기본형 데이터와 참조형 데이터 변수할당의 차이점은?

-객체의 변수 (프로퍼티) 영역의 별도의 메모리 공간을 부여하는지 아닌지! 

 

*데이터 영역에 저장된 값은 여전히 계속 불변값이지만(1001,5001,7103 등)  obj1 을 위한 별도 영역은 변경이 가능하다. 그래서 흔히 참조형 데이터를 "불변하지 않는다.(=가변하다)" 라고 한다.

 

*참조카운트

- 객체를 참조하는 변수나 다른 객체의 수를 나타내는 값.

참조 카운트가 0인 객체는 더 이상 사용되지 않으므로, 가비지 컬렉터에 의해 메모리에서 제거

 

*가비지컬렉터(GC, Garbage Collector)

더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할

자바스크립트는 가비지 컬렉션을 수행함으로써 개발자가 명시적으로 메모리 관리를 하지 않아도 되도록 지원

자바스크립트 엔진에서 내부적으로 수행되며, 개발자는 가비지 컬렉션에 대한 직접적인 제어를 할 수 없다.

---

객체에서 가변성으로 인해 일어날 수 있는 문제점

가변 객체를 공유하고 있는 다른 코드에서 객체를 변경하면 예기치 않은 부작용이 발생할 수 있다.

예를 들어, 여러 함수에서 같은 객체를 사용하고 있다면 하나의 함수에서 객체를 변경하면 다른 함수에도 영향을 줌.

 

가변성의 기본 예시코드

const user = {
  name: "Alice",
  age: 30,
};

function changeUserName(userObj, newName) {
  userObj.name = newName;
}

function printUserName(userObj) {
  console.log(userObj.name);
}

changeUserName(user, "Bob");
printUserName(user);  // 출력: "Bob"

---

*가변성 문제를 가장 좋은 방법으로 해결하는 방법은 불변성을 유지하는것!!!!

불변성을 유지하는 방법에는 여러가지가 있으나, 그 중에서 주로 사용되는 방법은 두가지가 있다.

1. 얕은 복사

2. 깊은 복사

3. 이외의 방법들

 

하지만 얕은 복사는 바로 아래 단계의 값만 복사하고,

깊은 복사는 undefined,함수의 데이터타입은 복사 할수 없는것을 염두해두기

 

1. 얕은 복사 (Shallow Copy)

얕은 복사는 객체를 복사할 때, 객체의 첫 번째 수준의 속성들만 복사하는 방법이다.

내부의 중첩된 객체는 동일한 참조를 유지한다. ( 1depth만 복사됨 , 2depth 이상은 불가😢 )

따라서 원본 객체와 복사된 객체는 같은 중첩된 객체를 참조하게 됨.

const original = {
  name: "Alice",
  age: 30,
  address: {
    city: "Seoul",
    country: "South Korea",
  },
};

// 얕은 복사
const shallowCopy = { ...original };

original.name = "Bob";  // 원본 객체의 속성 변경
original.address.city = "Busan";  // 중첩된 객체의 속성 변경

console.log(original);       // 출력: { name: "Bob", age: 30, address: { city: "Busan", country: "South Korea" } }
console.log(shallowCopy);    // 출력: { name: "Alice", age: 30, address: { city: "Busan", country: "South Korea" } }

위의 예시에서 original 객체를 얕은 복사하여 shallowCopy 객체를 생성하였다.

그러나 중첩된 address 객체는 동일한 참조를 유지하고 있기 때문에 original과 shallowCopy 모두 동일한 address 객체를 참조하게 된다.

따라서 original 객체나 shallowCopy 객체 중 하나에서 address의 속성을 변경하면 다른 객체에서도 동일한 변경이 반영되는 문제가 있음.

 

 

2. 깊은 복사 (Deep Copy)

깊은 복사는 객체를 복사할 때, 모든 중첩된 객체들까지 재귀적으로 새로운 객체로 복사하는 방법 (알고리즘에 자주 쓰)이다.

이를 통해 원본 객체와 완전히 독립적인 객체를 생성하고, 중첩된 객체들도 각각 새로운 객체로 생성됨.

얕은복사와 달리 2depth, 3depth까지 유지시킬 수 있음!!

 

⭐⭐⭐⭐재귀 깊은 복사 함수

- 내가 호출될때.  내 스스로를 안에 호출하면서 모든 요소들을 확인하겠다 👁️

var copyObjectDeep = function(target) {
  var result = {};
  if (typeof target === 'object' && target !== null) {
    for (var prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  } else {
    result = target;
  }
  return result;
};

var original = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'Seoul',
    country: 'South Korea'
  }
};

var deepCopy = copyObjectDeep(original);

console.log(original);  // 출력: { name: 'Alice', age: 30, address: { city: 'Seoul', country: 'South Korea' } }
console.log(deepCopy);  // 출력: { name: 'Alice', age: 30, address: { city: 'Seoul', country: 'South Korea' } }

 

JSON을 사용한 깊은 복사  예시코드 

-코드 가독성은 좋으나.. 글쎄..🤔 

함수나 undefined와 같은 데이터 타입은 복사되지 않음

const original = {
  name: "Alice",
  age: 30,
  address: {
    city: "Seoul",
    country: "South Korea",
  },
};

// 깊은 복사
const deepCopy = JSON.parse(JSON.stringify(original));

original.name = "Bob";  // 원본 객체의 name 속성 변경

console.log(original);   // 출력: { name: "Bob", age: 30, address: { city: "Seoul", country: "South Korea" } }
console.log(deepCopy);   // 출력: { name: "Alice", age: 30, address: { city: "Seoul", country: "South Korea" } }

 

 

---

예시코드2

// user 객체를 생성
var user = {
	name: 'wonjang',
	gender: 'male',
};

// 이름을 변경하는 함수, 'changeName'을 정의
// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름
// 출력값 : 새로운 user 객체
// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경했네요! -> 가변
var changeName = function (user, newName) {
	var newUser = user;
	newUser.name = newName;
	return newUser;
};

// 변경한 user정보를 user2 변수에 할당하겠습니다.
// 가변이기 때문에 user1도 영향을 받게 될거에요.
var user2 = changeName(user, 'twojang');

// 결국 아래 로직은 skip하게 될겁니다.
if (user !== user2) {
	console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name); // twojang twojang
console.log(user === user2); // true

예시코드2 개선

// user 객체를 생성
var user = {
	name: 'wonjang',
	gender: 'male',
};

// 이름을 변경하는 함수 정의
// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름
// 출력값 : 새로운 user 객체
// 특징 : 객체의 프로퍼티에 접근하는 것이 아니라, 아에 새로운 객체를 반환 -> 불변
var changeName = function (user, newName) {
	return {
		name: newName,
		gender: user.gender,
	};
};

// 변경한 user정보를 user2 변수에 할당하겠습니다.
// 불변이기 때문에 user1은 영향이 없어요!
var user2 = changeName(user, 'twojang');

// 결국 아래 로직이 수행되겠네요.
if (user !== user2) {
	console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name); // wonjang twojang
console.log(user === user2); // false 👍

예시코드2 더 나은 예시코드 (얕은 복사)

//위 패턴을 우리 예제에 적용해봅시다.
var user = {
	name: 'wonjang',
	gender: 'male',
};

var user2 = copyObject(user);
user2.name = 'twojang';

if (user !== user2) {
	console.log('유저 정보가 변경되었습니다.');
}

console.log(user.name, user2.name);
console.log(user === user2);

예시코드 2 기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사 => 재귀적 수행방식

var copyObjectDeep = function(target) {
	var result = {};
	if (typeof target === 'object' && target !== null) {
		for (var prop in target) {
			result[prop] = copyObjectDeep(target[prop]);
		}
	} else {
		result = target;
	}
	return result;
}