[JavaScript] Pass By Value vs Pass By Reference (얕은복사, 깊은복사)

 

자바스크립트에서 변수를 함수에 전달할 때 두가지 방식이 있다.

1. Pass By Value (값에 의한 전달)

2. Pass By Reference (참조에 의한 전달)

 

1. Pass By Value

: 원시 타입 (Primitive Types) 을 함수에 전달할 때 값이 복사됨.

: 적용 타입 - Number, String, Boolean, Null, Undefined, Symbol, BigInt

: 원시 타입은 값 자체를 복사해서 전달하기 떄문에 원본 데이터에 영향을 주지 않음!

 

var a = 5;
var b = a;

b++;

console.log(a);	// 5
console.log(b);	// 6

 

 

 

2. Pass By Reference

: 객체 타입 (Object) 을 함수에 전달할 때, 참조 (Reference) 가 전달됨

: 적용 타입 - Object, Array, Function

: 객체 타입은 메모리주소(참조)를 공유하기 떄문에 원본 데이터가 변경될 수 있음!

=> 원본 객체의 의도치 않은 변경을 막으려면 객체를 복사(Cloning)해서 사용하면 된다.

 

let obj1 = {name: 'Yao', password: '123'}
let obj2 = obj1;

obj2.password = 'easypeasy'

console.log(obj1);	// {name: 'Yao', password: 'easypeasy'}
console.log(obj2);	// {name: 'Yao', password: 'easypeasy'}

 

 

3. Cloning

var c = [1, 2, 3];
var d = [].concat(c);

d.push(4);

console.log(c);		// [1, 2, 3]
console.log(d);		// [1, 2, 3, 4]

 

 

3-1. Shallow Cloning

: 최상위 객체의 값만 복사하고, 중첩 객체는 참조로 복사하는 방식.

: 내부에 중첩된 객체가 있다면 원본과 공유됨.

let obj = {a: 'a', b: 'b'};
let clone = Object.assign({}, obj);
let clone2 = {...obj};

obj.b = 5;

console.log(obj);		// {a: 'a', b: 5}
console.log(clone);		// {a: 'a', b: 'b'}
console.log(clone2);	// {a: 'a', b: 'b'}

let obj = {
	a: 'a', 
    b: {
    	deep: 'try and copy me'
    } 
};
let clone = Object.assign({}, obj);
let clone2 = {...obj};

obj.b.deep = 'hahaha';

console.log(obj);		// {a: 'a', b: {deep: 'hahaha'}}
console.log(clone);		// {a: 'a', b: {deep: 'hahaha'}}
console.log(clone2);	// {a: 'a', b: {deep: 'hahaha'}}

 

내부 객체는 여전히 참조값으로 복사되기 떄문에, 값을 변경할 경우 모든 클론 객체의 내부객체가 다 변경됨.

 

 

 

3-2. Deep Cloning

: 객체 내부의 모든 값을 새롭게 복사해서 원본과 완전히 독립적인 객체를 만드는 방식.

: 원본을 변경해도 복사된 객체는 영향을 받지 않는다.

=> 연산비용이 크고 객체가 클수록 복사 속도가 느려지고 메모리를 더 많이 사용함. 신중히 사용 필요.

 

 

1) JSON.parse(JSON.stringify(obj))

- 간단하고 빠르지만

- undefined, function, Symbol, BigInt 같은 데이터는 복사되지 않음.

- 순환참조(자기 자신을 참조하는 객체)가 있으면 무한 루프 발생 가능

let obj = {
	a: 'a', 
    b: {
    	deep: 'try and copy me'
    } 
};
let clone = {...obj};
let superClone = JSON.parse(JSON.stringify(obj));

obj.b.deep = 'hahaha';

console.log(obj);			// {a: 'a', b: {deep: 'hahaha'}}
console.log(clone);			// {a: 'a', b: {deep: 'hahaha'}}
console.log(superClone);	// {a: 'a', b: {deep: 'try and copy me'}}

 

 

2) structuredClone(obj)

- function, undefined 도 복사 가능하지만, 최신문법이라 오래된 브라우저에서는 지원 안 됨.

- 순환 참조 문제 해결 가능

let obj2 = structuredClone(obj1);

 

 

 

3) lodash 라이브러리

- 가장 안정적이고 강력한 방법이지만, 외부 라이브러리를 설치해야 함.

- 복사 과정에서 손실되는 데이터가 없고 순환 참조 문제 해결 가능

let obj2 = _.cloneDeep(obj1);

 

 

 

 

[개발상식] lodash 알고 쓰자.