[자바스크립트] 스프레드 연산자/얕은복사/깊은복사

스프레드 연산자 

 

 

 

 

 

하나로 뭉쳐있는 값들을 전개해줌 

 

 

 ...      -<  스프레드 연산자 

 

 

 

 

 

 

 

 

 

 

 

 

---

참조타입

 

 

 

 

자바스크립트의 객체: 참조타입 

 

새로운 객체를 만들고 거기에 원래의 객체내용을 대입한뒤 , 

 

새로운객체의 이름을 바꿔도 원래의 객체의 이름이 같이 바뀜 

 

 

 

---

 

 

 

 

 

 

 

이번에는 객체형태 ( {} 를 넣은 형태)를 새로운 변수에 저장 해서 성을 변경 했다. 결과는   

 

원래의 객체인 obj의 성이 변경 되지 않았다. 

 

 

 

 

 

 

---

 

 

 

 

 

 

obj.hobby       -> 객체안에 새로운 속성인 hobby를 만들고 그안에 또 새로운 객체를 삽입 ,

 

결과는 객체 obj 안에 새로운 속성인  hobby라는 키에 또 새로운 객체가 담기게됨 

 

 

 

 

---

얕은복사

 

 

 

 

 

 

새로운 객체에 또  two라는 객체에 접근가능, 거기서 two 객체의 값을  'watching movie ' 로 변경했더니 

 

객체 obj의 값인 two 의 값 'playing game' 이 'watching movie'로 변경 되었음   

 

 

        얕은 복사      라고함 

 

 

 

 

 

주소값까지만 복사하는 얕은복사,

실제데이터 까지만 복사하는 깊은 복사    두가지가 있음 

 

---

 참조타입 복사 

 

 

 

참조 타입의 복사:   원본데이터에 영향을 줌 

 

 

 

 

 

 

힙이라는 메모리에는 유동적으로 크기가 변하는 데이터들이 존재하게 됨  

 

 

 

 

참조 타입을 사용시 다음과같이   원본에 영향을 끼치게됨 

 

힙이라는 메모리에  배열과 객체가  저장 되기 때문에 우리가  원하는대로 조작이 가능함 

 

 

 

 

 

 

배열과 객체 선언시   

 

const 키워드 사용시  , ( 재선언, 재할당 x )   

 

그러나 우리는 다음과 같이 값을 바꿔왔는데 

const obj = {

name: "otter"

}
obj.name = "rabbit"

 

 

 

const 키워드로 선언된 obj(안에 있는 주소값) 은 변환되지 않음  

 

우리가 바꿔왔던것은 힙메모리에 존재하는 값들 (유동적으로 데이터변화 가능  , 주소 x ) 

 

-> const 로 선언을 해도 아무 문제가 없었음 

 

---

 

배열과 객체를 const로 선언 하는 이유 

 

 

우리가 코딩을 할때 우리가 어떠한 데이터가 담겨있을지 몰라도 우리가 const 로 선언해놓으면 

 

obj 객체의 값은 변경불가능한것을 알기 때문에 우리가 쉽게 객체라는것을 파악 할 수 있음 

 

 

---

얕은 복사  활용 

 

 

 

얕은 복사를 활용할때, 두개의 변수에 담겨있는 배열을 하나로 합칠때도 사용 가능함 

 

 

 

 

 

 

 

 

 

 

 

---

깊은 복사 

 

 

 

JSON 데이터 포맷:  문자열 형태 (주소값이 사라짐) 

 

 

 

 

 

 

 

 

JSON.parse 

JSON.stringfy   

 

등등을 활용하면 배열이나 객체를 완벽하게 복사가 가능함