📖 TIL - 배열과 객체의 비밀스러운 동거: 메모리 속 그들의 이야기

✨ 새롭게 배운 점

🔄 참조형 데이터의 특징

• 메모리에 값이 저장된 주소를 참조하는 타입 (객체, 배열, 함수)
• 값을 직접 가지지 않고 메모리 주소를 가리킴
• 동일한 참조형 변수를 여러 개 만들면 같은 메모리 주소를 공유

💾 메모리 저장 구조

• 콜스택(Call Stack): 원시값 저장, 고정된 크기
• 힙(Heap): 객체/배열/함수 저장, 동적 크기

📦 배열과 객체 다루기

• 배열: 순서가 있는 데이터 구조
• 객체: computed property를 통해 동적으로 key 값 정의 가능
• 객체의 key는 기본적으로 문자열로 처리

🔨 배열/객체 메서드

배열 메서드

• 변경 메서드(Mutable): 원본 배열 직접 수정
• 비변경 메서드(Immutable): 새로운 배열 반환

객체 메서드

• Object.keys(): key 배열 반환
• Object.values(): value 배열 반환
• Object.entries(): [key, value] 쌍 배열 반환
• Object.assign(): 객체 복사/병합
• Object.freeze(): 객체 수정 불가능하게 동결

📝 복사의 종류와 사용법

얕은 복사 (Shallow Copy)

// 1. Object.assign()
const originalObj = { name: 'John', age: 30 };
const shallowCopy1 = Object.assign({}, originalObj);

// 2. 스프레드 연산자
const shallowCopy2 = { ...originalObj };

// 3. 배열의 경우
const originalArray = [1, 2, { x: 1 }];
const shallowCopy3 = [...originalArray];

깊은 복사 (Deep Copy)

// 1. structuredClone() - 2022년 도입
const originalObj = { 
  name: 'John',
  address: { city: 'Seoul', country: 'Korea' },
  birth: new Date('1990-01-01'),
  skills: new Set(['JavaScript', 'React'])
};
const deepCopy1 = structuredClone(originalObj);

// 2. JSON.parse + JSON.stringify
const deepCopy2 = JSON.parse(JSON.stringify(originalObj));

// 3. 재귀 함수 사용
function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    copy[key] = deepCopy(obj[key]);
  }
  return copy;
}

📢 각 깊은 복사 방식의 특징과 주의사항

structuredClone()

• ✅ 장점
  • Date, Set, Map 등 다양한 내장 타입 지원
  • 순환 참조(Circular Reference) 처리 가능
  • 사용하기 간편함
• ⚠️ 주의사항
  • 2022년에 도입된 새로운 기능으로 구버전 브라우저 지원 제한
  • 함수(Function) 복사 불가능

JSON.parse(JSON.stringify())

• ✅ 장점
  • 구현이 간단하고 이해하기 쉬움
  • 브라우저 호환성이 좋음
• ⚠️ 주의사항
  • undefined, 함수, Symbol 값 손실
  • Date 객체가 문자열로 변환됨
  • Set, Map 등의 특수 객체 처리 불가
  • 순환 참조 시 오류 발생

// JSON 방식의 한계 예시
const obj = {
  func: () => console.log('Hello'),
  symbol: Symbol('sym'),
  undefined: undefined,
  date: new Date(),
  set: new Set([1, 2, 3])
};

const copied = JSON.parse(JSON.stringify(obj));
console.log(copied);
// 출력:
// {
//   date: "2024-01-08T00:00:00.000Z", // Date가 문자열로 변환
//   set: {},                          // Set이 빈 객체로 변환
//   // func, symbol, undefined는 완전히 사라짐
// }

🎯 복사 방식 선택 시점

얕은 복사를 사용하는 경우

1. 단순한 객체/배열 복사

// 사용자 정보 수정 시
const userInfo = { name: 'John', age: 30 };
const updatedInfo = { ...userInfo, age: 31 };

2. 상태 업데이트 시 (React 등)

// 리액트 상태 업데이트
const [todos, setTodos] = useState([]);
const addTodo = (newTodo) => {
  setTodos([...todos, newTodo]); // 얕은 복사로 충분
};

깊은 복사를 사용하는 경우

1. 중첩된 데이터 구조 다룰 때

const companyData = {
  name: 'Tech Corp',
  departments: [{
    name: 'Engineering',
    employees: [{ name: 'John', projects: ['A', 'B'] }]
  }]
};

// 완전한 독립 복사본 필요시
const backupData = deepCopy(companyData);

2. 원본 데이터 보존이 중요할 때

// 게임 상태 저장 시스템
const gameState = {
  player: { position: {x: 0, y: 0}, inventory: ['sword'] },
  world: { entities: [], weather: 'sunny' }
};

// 세이브 포인트 생성
const savePoint = deepCopy(gameState);

🚀 이런 점이 효율적이에요

• 얕은 복사: 성능이 중요하거나 내부 속성이 원시값만 있는 경우
• 깊은 복사: 중첩 객체이거나 내부 속성 변경 시 원본 보호가 필요한 경우
• 최신 환경에서는 structuredClone()을 사용하고, 구버전 브라우저 지원이 필요하거나 간단한 객체 복사의 경우 JSON 방식을 사용하는 것이 효율적

⭐️ 참고 자료

• Does it mutate? : 배열 메서드의 변경/비변경 여부 확인 사이트