JS) 얕은 복사, 깊은 복사

얕은복사, 깊은 복사

1. Java script 원시형과 참조형

1.1 원시형 자료
1.2 참조형 자료
1.3 원시형자료와 참조형자료 차이

2. 얕은복사와 깊은복사

2.1 얕은복사와 깊은복사 차이
2.2 활용 예시

---

1. Java script 원시형과 참조형

1.1 원시형 자료

1.1 원시형 자료

• 원시형 자료
  1) Number
  2) String
  3) Boolean
  4) Null
  5) Undefined

원시값은 값을 복사하거나 다른변수에 할당할경우 값을 그대로 복사하므로 서로 영향을 미치치 않는다.

let a = 'abcd'
let b = a 
// b변수를 가지고 값을 변경하더라도 a변수에는 영향을 주지 않는다.

1.2 참조형 자료

• 참조형 자료
  1) Object
  2) Symbol

참조형 잘는 변수가 참조형 자료의 주소를 가리키기 때문에 다른변수로 자료를 넘기더라도 자료"값"을 넘기는게 아닌 "주소"를 공유하기 때문에 두 변수는 서로 영향을 주게 된다.

arr = [1,2,3,4,5] 
arr2 = arr  //arr2에 arr의 주소를 주었다.
arr.shift() //arr에 shift메소드를 사용해 배열의 arr[0]의 값을 삭제했다.
arr2 = [2,3,4,5]//같은 주소를 공유하는 arr2도 영향을 받았다.

Tip) 참조형자료는 가지고 있는 자료의 양이 많을경우가 있어 원시형이 아닌 참조형으로 처리된다. 주소가 저장되는 곳을 heap이라고 부른다.

1.3 원시형자료와 참조형자료 차이

보기와 같이 원시형은 값 그 상태를 저장하지만 참조형은 주소를 공유함으로써 값을 출력한다.

2. 얕은복사와 깊은복사

2.1 얕은복사와 깊은복사 차이

2.1.1) 얕은 복사(Shllow Copy)
얕은복사란 객체를 복사할때 값을 그대로 복사하는게 아닌 주소를 참조하여 값을 출력하는것을 말한다.
객체를 출력하는 두 변수가 서로 변경될때마다 영향을 준다면 원본객체의 주소값을 공유하는것이므로 이를 "얕은복사"라고 한다

obj = {
  	Id: 'baek',
  	job: 'programmer',
  	age: 26
       }
obj2 = {
  	car: true,
  	hobby: 'soccer',
  	hometown: 'Daegu'
       }
newarr = Object.assign(obj,obj2) // assign을 활용해서 obj객체에 obj2객체를 합쳐준다

obj.Id === newarr.Id //true, obj의 key와 newarr의 key가 같다는것을 확인했다.

newarr.Id = "lee"//newarr에 Key(ID)값을 "lee"로 변경하였다.

newarr = {
	Id: "lee"
	age: 26
	car: true
	hobby: "soccer"
	hometown: "Daegu"
	job: "programmer"
	}
// newarr에 값이 변경된것을 확인하였다.

obj ={
	Id: "lee"
	age: 26
	car: true
	hobby: "soccer"
	hometown: "Daegu"
	job: "programmer"
	} 
//변경된값이 obj에도 적용된것을 확인했다.

2.1.2) 깊은 복사
깊은 복사는 복사된객체가 원본과 주소가 별개로 주어진 객체를 말한다.

arr = [1,2,3,4,5] 
arrnew = arr.slice(0) //slice(0)을 활용해 배열의 전체를 대입한다.
arrnew.pop() //arrnew의 마지막 인덱스 값을 삭제한다.
arrnew = [1, 2, 3, 4] // arrnew에 값변화가 이뤄졌다.
arr = [1, 2, 3, 4, 5] //기존 arr에는 변화가 없다.

const obj = { Id: 'baek',
  	       job: 'programmer',
  	       age: 26	 
             };

const obj2 = { ...obj }; //obj2에 spread를 활용해 obj을 대입함

obj2.car = true; //obj2의 car(key)의 value값을 추가함

obj = {
       Id: "baek"
       age: 26
       car: true
       job: "programmer"
	} //obj에는 정상적으로 추가가 되었다.

obj2 = {
  	Id: "baek"
	age: 26
	job: "programmer"
        }  //obj2에는 추가가 되지않은 모습을 볼수 있다.

깊은 복사는 전혀다른 주소에서 같은 출력을 하는 것으로 원본데이터에 영향을 주지않고 데이터를 사용할수 있다.

많은양의 데이터를 다루다보면 원본의 손상에 유의하면서 개발을 해야할것으로 생각된다.