javascript 깊은복사와 얕은 복사

코딩테스트 중 얕은 복사가 나를 너무 힘들게 해 한 번 정리한다.

😡 얕은 복사

얕은 복사는 참조값의 복사를 나타낸다.

      const obj={value:3}
      const copyObj=obj;
      copyObj.value=7;
      console.log(obj.value);//7
      console.log(copyObj.value);//7

이렇게 되어버린다. 휴 😤
결국 한 데이터의 참조 값을 전달해 같이 쓰는 것

😊 깊은 복사 <- 내가 원하는 것!!

독립적인 메모리에 값 자체를 할당하여 생성하는 것이다.

	var a=1;
    	var b=a;
    	b=2;
	console.log(a,b);//1 2

위와 같이 말이다. _이거라도 깊은 복사가 되는게 어디니...

정말 많은 깊은 복사 방법이 있는데, 나는 코딩테스트에서 쓸 세 가지만 이곳에 작성할 것이다.

1. slice를 이용한 방법

	var happy=[1,2,3,4];
    	var copy=happy.slice(v=>v);
    	copy[0]=9;
    	console.log(happy,copy);//[ 1, 2, 3, 4 ] [ 9, 2, 3, 4 ]

가장 쉽고 유용하게 썼던 방법이다.

2. Object.assign() 메소드 이용방법

	const obj={a:3};
    	const copyObj=Object.assign({},obj);
	copyObj.a=2;
	console.log(obj,copyObj);//	{ a: 3 } { a: 2 }
	

3. 전개 연산자 (Spread Operator)

	const obj={a:3};
    	const copyObj={...obj}
	copyObj.a=2;
	console.log(obj,copyObj);//	{ a: 3 } { a: 2 }
	

그런데 문제는.. 이 아이들은 1차원 객체까지만 깊은 복사가 가능하다. 주의하자.

References

https://velog.io/@recordboy/JavaScript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%ACShallow-Copy%EC%99%80-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%ACDeep-Copy