JS- 구조분해 할당

spread 연산자 - 하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자

spread 연산자 형식

...

배열에 사용

let arr = [1,2,3,4,5]
console.log(arr) //[1,2,3,4,5] 출력
console.log(...arr) //1,2,3,4,5 출력-> 요소 하나하나가 배열 밖으로 빠져 나온다

문자열 사용

let str = "Hello"
console.log(str) //Hello 출력
console.log(...str) //"H""e""l""l""o" 출력

객체에 사용

const obj = {name:"otter",gender:"male"}
obj //{name:"otter",gender:"male"} 출력
const newObj = obj
newObj.name = 'rabbit'
newObj //{name:"rabbit",gender:"male"}
Obj //{name:"rabbit",gender:"male"} -> 참조타입 또한 변경<같은 주소값을 공유해 같은 객체를 참조하고 있기 때문에 서로 영향을 끼친다>
const copyObj = {...obj}
copyObj //{name:"rabbit",gender:"male"} 출력
copyObj.gender = 'female'
obj //{name:"rabbit",gender:"male"} 출력됨으로 원본 객체는 변경이 되지 않음을 알 수 있다.

얕은 복사 vs 깊은 복사

const obj= {
	name :"otter"
}
obj.name ="rabbit"

obj는 주소값을 가진다.
주소값은 heap 메모리를 가지고
heap 메모리는 유동적으로 데이터가 변화할 수 있다.

• const 키워드로 선언된 obj(안에 담긴 주소값)은 변화되지 않는다.

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

let origin = {
name:"otter",
age:25
};

let copy= {
name:origin.name,
age:origin.age
};

매번 각각의 값을 복사해야 한다는 단점이 존재한다

let copy = {...origin}

let arr =[1,2,3,4,5]
let secArr = [6,7,8]
let copy = [...arr, ...secArr]

• 깊은 복사 : 실제 데이터까지 복사하는 깊은 복사 -> 주소값이 사라지고 문자열 형태로 저장

let origin = {
	name="otter",
    age25,
    favoriteFood{
    	first:"sushi",
        second:"hamburger"
        }
    };

const copy = JSON.stringify(origin)

const deepCopy=JSON.parse(copy) // 완전히 새로운 주소값을 가지고 복사되어 진다.

rest 파라미터

• 필요한 데이터만 뽑아서 객체에서 필요없는 데이터를 골라 데이터를 담을 수 있다.
• rest 파라미터는 변수 이름일뿐 바뀔 수 있다

let origin = {
	name="otter",
    age25,
    petName:"cherry",
    hobby:"playing game"
    };
    
 const {petName,hobby, ...rest}=origin