프론트 089 - 깊은 복사, 얕은 복사

규링규링규리링·2024년 9월 2일

프론트 공부하기

목록 보기
89/135

깊은 복사, 얕은 복사

주소값 까지만 복사하는 얕은 복사
실제 데이터까지 복사하는 깊은 복사.

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

let copy = origin
origin.name = "rabbit"
origin.name 	// rabbit

이 복사는 복사본을 수정해도 원본에 영향을 미침

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

const는 재할당, 재선언 불가능한데
위 동작을 실행해 보면 정상적으로 값이 수정됨
이는 위 사진기준 obj에 할당된 201 이라는 주소값은 변경되지 않고
201 주소에 있는 값이 수정되었기 때문.
const 키워드로 선언된 obj(안에 담긴 주소값)는 변환되지 않은것

배열에 spread 사용

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

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

매번 각각의 값을 복사해 줘야했음.
단점을 보안하기 위해 spread 연산자 사용 가능.

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

객체에 spread 사용

let origin ={
  name : 'otter',
  age : 25,
  favoriteFood : {
    first : 'sushi',
    second : 'hambuger'
  }
};

const copy = {...origin}
copy.favoriteFood.first = 'cold noodle'
console.log(origin.favoriteFood)
	// {first:'cold noodle',second:'hambuger'}

위처럼 객체에는 spread 연산자를 사용하면 얕은 복사로 인해 원본에도 영향을 미침.

객체에 깊은 복사 하기

let origin ={
  name : 'otter',
  age : 25,
  favoriteFood : {
    first : 'sushi',
    second : 'hambuger'
  }
};

const copy = JSON.stringify(origin)
console.log(copy)
	// {"name":"otter","age":25,"favoriteFood":{"first":"sushi","second":"hambuger"}}
const deepCopy = JSON.parse(copy)

JSON 기능을 사용해서
객체를 문자열로 변환하고 해당 문자열을 새로운 배열에 넣는방법
사실상 새롭게 만들었을뿐

0개의 댓글