TIL

dev-whol·2021년 4월 24일
0

✍🏻 얕은 복사와 깊은 복사

참조하는 주소값 할당

1
2
3
4
5
const test = {code = "코드", states = "스테이츠"};
const copied = test;
test.code = "부트캠프";
 
console.log(copied.code) // "부트캠프"
cs

두 변수가 참조하는 주소값이 같이때문에 하나의 데이터가 바뀌면 다른 한쪽도 바뀐다.
독립적으로 쓰고 싶다면 얕은 복사와 깊은 복사가 필요하다.

얕은 복사(Shallow Copy)

  • 얕은 복사는 주소값을 복사하여 새로운 주소값에 저장한다. 하지만 문제점이 있는데 객체 내에 객체나 다차원 배열같은 경우 다시 같은 주소를 바라보게 되어 그 주소값이 바뀌면 다른 주소값을 보는 값도 바뀐다.

for...in문 얕은 복사

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function shallowCopy(obj){
 let result = {};
 for(let key in obj){
  result[key] = obj[key];
 }
 return result;
}
const testObj = {
code: "코드",
states: {camp:"스테이츠"}
}
const copiedObj = shallowCopy(testObj);
 
copiedObj.code = "코딩"
console.log(testObj.code) // "코드" <- 얕은 복사가 되서 변화 없음
testObj.states.camp = "부트캠프";
console.log(copiedObj.states.camp) // "부트캠프" <- 같은 주소를 
cs

Object.assign(target,sources)의 얕은 복사

  • 동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여진다.
1
2
3
4
5
6
const obj = { code: "코드", states: "스테이츠" }
const target = { 코딩: "부트캠프" }
 
const copiedObj = Object.assign(target, obj)
 
console.log(copiedObj) //{ 코딩: "부트캠프", code: "코드", states: "스테이츠" }
cs
  • Object.assign()도 마찬가지로 객체 내에 객체는 복사가 되지 않는다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const info = {
  name: "zumwhol",
  favorite: {
    first: "money",
    second: "food",
  },
}
 
const copied = Object.assign({}, info)
 
info.name = "whol"
info.favorite.first = "love"
 
console.log(copied.name) // "zunwhol" <- 바뀌지 않음
console.log(copied.favorite.first) // "love" <- 바뀜
cs

Spread의 얕은 복사

  • Object.assign()과 같은 결과를 낸다
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const info = {
      name: "zumwhol",
      favorite: {
        first: "money",
        second: "food",
      }
    }
     
    const copied = {...info}
     
    info.name = "whol"
    info.favorite.first = "love"
     
    console.log(copied.name) // "zumwhol"
    console.log(copied.favorite.first) // "love"
    		cs

깊은 복사(Deep Copy)

  • 주소를 완전 분리한다.

재귀를 이용한 복사

아직...구현이 안돼요.🥲

JSON객체의 메소드를 이용한 복사

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const info = {
  name: "zumwhol",
  favorite: {
    first: "money",
    second: "food"
  }
}
 
const copied = JSON.parse(JSON.stringify(info));
 
info.name = "whol"
info.favorite.first = "love"
 
console.log(copied.name) // "zumwhol" 
console.log(copied.favorite.first) // "money" 
cs

Lodash의 deepclone

아직 몰라요..

profile
dev-whol
이전 포스트

TIL

다음 포스트

TIL

0개의 댓글