자바스크립트 참조형 자료

자바스크립트에서 데이터를 크게 두 가지로 나눌 수 있습니다:

기본형 데이터 (Primitive Data)

숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, Symbol, BigInt 등이 이에 해당합니다.
이 데이터는 값 자체가 저장됩니다.

참조형 데이터 (Reference Data)

배열(Array), 객체(Object), 클래스(예: new ClassName()로 생성) 등이 이에 해당합니다.
복잡한 구조를 가질 수 있어 메모리 안에 바로 값을 저장하지 않고, 주소를 저장합니다.

배열 복사 시 주의사항: slice와 전개 연산자

주소를 공유한 경우 (참조 공유)

// 원본 배열
let A = [1, 2, 3];

// 참조 복사
let B = A;

// 복사본(B) 수정
B.push(4);

// 결과 확인
console.log(A); // [1, 2, 3, 4]
console.log(B); // [1, 2, 3, 4]

설명

B = A는 단순히 참조 주소를 복사한 것이다.
따라서 B를 수정하면, A도 동일한 주소를 참조하므로 원본 배열도 변경된다.

따라서 아래처럼 하면 된다.

주소를 독립시킨 경우 (값 복사)

// 원본 배열
let A = [1, 2, 3];

// 전개 연산자를 사용한 복사
let B = [...A];

// 복사본(B) 수정
B.push(4);

// 결과 확인
console.log(A); // [1, 2, 3]
console.log(B); // [1, 2, 3, 4]

// 원본 배열
let A = [1, 2, 3];

// slice를 사용한 복사
let B = A.slice();

// 복사본(B) 수정
B.push(4);

// 결과 확인
console.log(A); // [1, 2, 3]
console.log(B); // [1, 2, 3, 4]

설명

B = [...A] 또는 B = A.slice()는 새로운 배열을 생성하면서 값을 복사한다.
B를 수정해도 A는 독립된 메모리 주소를 참조하므로 변경되지 않는다.
요약
주소를 공유하면 원본 데이터와 복사본이 서로 영향을 준다.
주소를 독립시키면 원본과 복사본이 서로 영향을 주지 않고 독립적으로 동작한다.

정리

중요한 점: 참조 주소와 값의 독립성
B = A처럼 복사하면 주소를 공유하므로 원본이 영향을 받는다.
B = [...A] 또는 B = A.slice()를 사용하면 주소를 독립시켜 원본이 영향을 받지 않도록 할 수 있다.