JavaScript에서 객체는 정말 참조로 전달될까?

function changeValue(x) {
  x = 100;  // 매개변수 x에 새 값 할당
  console.log('함수 내부:', x);  // 100
}

let num = 42;
changeValue(num);
console.log('함수 외부:', num);  // 42 - 변하지 않음!

function modifyObject(obj) {
  obj.name = 'Bob';  // 원본 객체 수정됨
}

const person = { name: 'Alice' };
modifyObject(person);
console.log(person.name);  // 'Bob' - 변경됨!

function replaceObject(obj) {
  obj = { name: 'Charlie' };  // 새 객체로 재할당
  console.log('함수 내부:', obj.name);  // 'Charlie'
}

const person = { name: 'Alice' };
replaceObject(person);
console.log('함수 외부:', person.name);  // 'Alice' - 변하지 않음!

// ❌ 의도대로 동작하지 않음
function initUser(user) {
  user = {
    name: 'Guest',
    role: 'visitor'
  };
}

const currentUser = null;
initUser(currentUser);
console.log(currentUser);  // null - 초기화되지 않음!

// ✅ 올바른 방법 1: 반환값 사용
function createUser() {
  return {
    name: 'Guest',
    role: 'visitor'
  };
}

const currentUser = createUser();
console.log(currentUser);  // { name: 'Guest', role: 'visitor' }

// ✅ 올바른 방법 2: 객체 속성 수정
function initUser(user) {
  user.name = 'Guest';
  user.role = 'visitor';
}

const currentUser = {};  // 먼저 빈 객체 생성
initUser(currentUser);
console.log(currentUser);  // { name: 'Guest', role: 'visitor' }

function addItem(arr) {
  arr.push('new item');  // 원본 배열 수정됨
}

const items = ['a', 'b', 'c'];
addItem(items);
console.log(items);  // ['a', 'b', 'c', 'new item']

function replaceArray(arr) {
  arr = ['x', 'y', 'z'];  // 재할당 - 원본에 영향 없음
}

const items = ['a', 'b', 'c'];
replaceArray(items);
console.log(items);  // ['a', 'b', 'c'] - 그대로!

const config = { debug: false };

// 나중에 실행되는 콜백
setTimeout(() => {
  console.log('debug mode:', config.debug);
}, 1000);

// 콜백 등록 후 설정 변경
config.debug = true;

// 1초 후 출력: "debug mode: true"
// config 객체가 참조로 공유되기 때문

function processUser(user) {
  // 얕은 복사로 새 객체 생성
  const copy = { ...user };
  copy.processed = true;
  return copy;
}

const original = { name: 'Alice', age: 30 };
const result = processUser(original);

console.log(original);  // { name: 'Alice', age: 30 } - 변경 없음
console.log(result);    // { name: 'Alice', age: 30, processed: true }

const original = {
  name: 'Alice',
  address: { city: 'Seoul' }  // 중첩 객체
};

const copy = { ...original };
copy.address.city = 'Busan';

console.log(original.address.city);  // 'Busan' - 원본도 변경됨!

// structuredClone() - 모던 브라우저 지원
const original = {
  name: 'Alice',
  address: { city: 'Seoul' }
};

const deepCopy = structuredClone(original);
deepCopy.address.city = 'Busan';

console.log(original.address.city);  // 'Seoul' - 원본 보존!
console.log(deepCopy.address.city);  // 'Busan'

// JSON 방식 (함수, undefined 등은 복사 안됨)
const deepCopy = JSON.parse(JSON.stringify(original));

// 배열: 원본 수정 메서드 vs 새 배열 반환 메서드

// ❌ 원본 수정
const arr = [1, 2, 3];
arr.push(4);      // arr이 변경됨
arr.splice(0, 1); // arr이 변경됨
arr.sort();       // arr이 변경됨

// ✅ 새 배열 반환 (원본 보존)
const arr = [1, 2, 3];
const added = [...arr, 4];           // arr 그대로
const removed = arr.filter((_, i) => i !== 0);  // arr 그대로
const sorted = [...arr].sort();       // arr 그대로

// ❌ React가 변경을 감지하지 못함
function handleClick() {
  user.name = 'Bob';  // 같은 객체 수정
  setUser(user);      // 참조가 같으므로 리렌더링 안됨
}

// ✅ 새 객체를 만들어야 함
function handleClick() {
  setUser({ ...user, name: 'Bob' });  // 새 객체 → 리렌더링
}

// ❌ 상태 직접 수정 - 시간 여행 디버깅 불가능
function reducer(state, action) {
  state.items.push(action.payload);  // 원본 수정
  return state;  // 같은 참조 반환
}

// ✅ 새 상태 반환
function reducer(state, action) {
  return {
    ...state,
    items: [...state.items, action.payload]  // 새 배열
  };
}