주소공유/Object.create()/Object.assign()

한꺼번에 많은 개념을,,,넣으려다 보니 많이 놓쳤다,,,

 

주소 공유?? Shallow copy? Deep copy?

이 개념들에 대해서는 분명히 프리때 다뤘다... 분명히 다뤘었지..ㅠ

하지만 이것저것 한번에 많은 개념들을 배우다 보니 제대로 보지 못한 부분들이 많았다..

심지어 배웠는지 안배웠는지 기억조차,, 안 나는...

그렇다면 이번 블로깅을 통해 다시 공부해보자!!!!

1. 프리 때 배운 '주소를 공유한다.'라는 말을 오늘에서야 깨달았다..

 

let b =a라고 선언한 것은 b가 a의 요소들을 shallow copy 한 것이 아닌 주소를 공유하고 있는 것이다.

이전에 주소를 공유하고 있다고 말을 들었을 때, 무슨 말인지 제대로 이해하지 못했다.

 

'주소 공유'라는 말은 모르겠고... (주소 공유를 shallow copy의 개념으로 이해했다 ㅠㅠㅠ)
a의 객체를 let b = a라고 했을 때..
그냥 내가 마음에 드는 jpeg를 카피한다는 개념으로 이해했다.

내가 다운로드한 그림을 수정한다고 해서 원본이 바뀌지 않는 것처럼...

 

그럼 주소공유의 개념부터 다시 알아보자 !! :  )

 

 

let imersive24 = {수강생1: '이준희', 수강생2: '철수', 수강생3: '영희'} 

imersive24 변수안의 객체들을 가져와서 재사용하고 싶다.. 다음과 같이 하면되지 않을까?

let imersive25 = imersive24
imersive25 = {수강생1: 'David', 수강생2: 'Chul', 수강생3: 'Young'}

console.log(imersive25)
// {수강생1: 'David', 수강생2: 'Chul', 수강생3: 'Young'} 
오 원하는대로 값이 나왔다. 

console.log(imersive24)
//{수강생1: 'David', 수강생2: 'Chul', 수강생3: 'Young'}
기존의 24기 수강생이름이 25기 수강생 명단으로 덮어 씌어졌다... ㅠ
데이터를 잃어버렸다

 

왜?? 왜? 덮어 써진 거지???

imersive24라는 변수에는 변수 안에 선언된 객체를 참조할 수 있는 값이 저장된다.
그렇기 때문에 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다!(객체를 조회할 수 있는 주소값이 복사!)
변수는 각각의 형태로 각자 다른 값을 가질 거라고 예상하지만.. 

각 변수에는 동일 객체에 대한 참조 값이 저장된다.

 

집을 열고 닫을 수 있는 열쇠가 두 개가 있다고 생각하면 쉽다!
나는 A라는 키로 집을 열고 들어와서 놀다가 뒷정리를 안 한 상태로 그냥 문을 잠그고 나간다.
부모님이 B라는 키로 문을 열고 들어왔을 때엔? 집은 엉망이 되어있을 것이다!
키는 두 개지만 집은 하나다.. 그것이 주소를 공유한다는 말과 비슷한 것 같다.

 

주소를 공유하고 있을 때
let a = {}
let b = a 

console.log(a == b) 동등 연산자로 비교했을 때 두 변수는 같은 객체를 참조하므로 true
console.log(a === b) a와 b 둘다 같은 type이므로 true.

--------------------

주소를 공유하고 있지 않을 때
let a = {}
let b = {} 

console.log(a == b) 동등 연산자로 비교했을 때 두 변수는 다른 객체를 참조하므로 false
console.log(a === b) a와 b 둘다 type은 객체이지만 주소가 같은 객체가 아니므로 false

2. 주소공유말고 객체들을 복사하고 싶다면 어떻게 할까 ?

 

a. 빈 객체에 반복문을 사용한 방법.

let animalsInZoo = {
  kind : 'Tiger',
  name : 'David',
  age : '5'
}

let copy = {} // 클론을 하기위한 빈 객체를 선언한다.

for(let key in animalsInZoo) {
	copy[key] = animalsInZoo[key]
 }
 
 copy.kind = 'Rabbit'
 copy.name = 'Joseph'
 copy.age = '2'

 console.log(copy) // {kind: "Rabbit", name: "Joseph", age: "2"}
 console.log(animalsInZoo) // {kind: "Tiger", name: "David", age: "5"}

 

b. Object.assign()을 사용하는 방법

Object.asssign(somthing, [src1,src2,...srcN])

somthing은 기존의 객체 // 뒤에 오는 인자들은 somthing에 복사하고자 하는 객체들(제한없음)

let animals = {kind : 'Tiger'}

console.log(animals) // {kind : 'Tiger'}

let name = {name : 'David'}
let age = {age : '6'}

Object.assign(animals, name, age);
console.log(animals) // {kind: "Tiger", name: "David", age: "6"}

Object.assign(animals, {kind : 'Rabbit'},{name : 'Joseph'}, {age : '2'})
console.log(animals) // {kind: "Rabbit", name: "Joseph", age: "2"}

Object.assign을 사용하면 반복문 없이 객체를 복사할 수 있다.

let animalsInZoo = {
  kind : 'Tiger',
  name : 'David',
  age : '5'
}

let copy = Object.assign({},animalsInZoo); 
console.log(copy) // {kind: "Tiger", name: "David", age: "5"} 복사됨

 

중첩된 객체를 복사할 때

Object.assign()은 객체는 복사했지만 객체안의 객체까지는 복사하지 못한다.
고로 복사를 했음에도 불구하고 복사한 객체에서 객체안의 객체를 수정한다면
프로토타입에 영향을 준다.