[220107] 깊은복사, 얕은복사, spread문

목차

1.   저장할때 메모리의 변화

2.   깊은복사

3.   얕은복사

4.   spread문

---

1.   빈 공간의 값은 서로 같을까? : {} == {}

console.log(1==1) //true
console.log({} == {}) //false
//빈 공간이라 같아보이지만 객체는 만들때마다 새로운 값을 부여해서 다르다
//제품을 찍어낼때마다 생산넘버가 다른거라고 생각하자

let a = {}
let b = {}
console.log(a==b) //false
//배열도 객체이므로 비교하면 false

a = { name:'ingoo' } //ingoo라는 확실한 값으로 저장함
b = { name:'ingoo' }
console.log(a.name === b.name) //true

 

 

---

 

 

2.   주소값 자체를 뜯어와서 참조를 해버리는 깊은 복사 : 서로 동기화 유지

let a={name:'ingoo'}
let b={name:'ingoo'}

//깊은 복사
//a의 주소를 b에 저장.

b=a;
console.log(a) //{name: 'ingoo'}
console.log(b) //{name: 'ingoo'}
console.log(a==b) //true

//b의 값을 변환해본다
b.key = 180;
console.log(a) //{name: 'ingoo', key: 180}
console.log(b) //{name: 'ingoo', key: 180}

//a의 값을 변환해본다
a.age=33
console.log(a) //{name: 'ingoo', key: 180, age: 33}
console.log(b) //{name: 'ingoo', key: 180, age: 33} 
//서로 주소값을 참조하고있기때문에 데이터가 바뀌어도 같은 값을 공유한다.
//서로 다른 값을 가지고싶어서 복사를 할때는 효율적이지 않기때문에
//자주 쓰는 얇은 복사를 더 많이 쓴다 (리액트때 특히 더 많이 사용)

깊은 복사

 

 

---

 

3. 데이터만 뜯어오는 얕은 복사 : 서로 동기화 안됨

//얕은 복사
// ==
let a = {name : 'ingoo'};
let b={}

Object.assign(b,a)
//이 코드가 실행되면서 b의 공간에 a객체에서 {} 안의 데이터만 복사해서 b에 넣음.

 

메모리에서 값만 복사해서 가져오는 얕은 복사지만... 객체를 프로퍼티로 가진 객체를 떼어올 경우는 사용하지 않는것이 좋다.

왜냐면 원본을 바꾸면, 얕은 복사임에도 불구하고 깊은복사마냥 객체 안의 객체가 값이 바뀌는 미라클이 생김.

 

알고만 있으면 되는 얕은 복사 (구)버전

//얕은 복사 ()
Object.assign(e,f);

// 첫번째 : 내가 복사할 영역
// 두번째 : 내가 보낼 객체
console.log(e===f)

 

 

---

 

 

3.   전개연산자 : spread문

ES6로 업그레이드 되면서 얕은복사를 한결 더 간단하게 쓸 수 있는 문법이다. 리액트에서 많이 쓰인다고한다.

하지만 assign의 미라클을 계승한 친구기때문에, 객체를 프로퍼티로 가진 객체에게 사용하지는 말자.

(사용한다면 얕은 복사임에도 프로퍼티인 객체값이 바뀌는 미라클을 보게 될것.)

 

전개연산자 사용법   :   ... 복사하고싶은 객체명

let a={name:"ingoo"}
let b={...a} //앝은 복사

//중복값을 제거하기 위한 배열
const dupArr=[1,2,3,3,2,3];

//new Set() 중복값을 제거해줌
const set = new Set(dupArr); //{1,2,3}
console.log(set) //set 객체형태

const uniqueArr=[...set] //데이터만 복사해서 형태바꾸기
console.log(uniqueArr) //{1,2,3}

 

 

---

 

가볍게 실전예시 맛만 봅시다

블록체인에서 쓰이는 객체 속의 객체 + 얕은 복사

 //응용한 정보를 알아볼까유

        const blockHeader ={
            hash : 00000000000000000000,
            //블럭의 이름 (16진수)
            timestamp : 1641519310,
            //1970년도(컴퓨터의 생성년도)를 0으로 두고 그날부터 지난 일수
            height:717521,
            //블럭속성의 이름이 height인거지, 이름은 블럭생성자가 뭐라고 넣는지에 따라다름
            Difficulty : 4,
            //채굴 난이도 조절
            Nonce:4006
            //난수, 난이도
            //랜덤으로 생성되는 숫자. 4006을 푼 사람에게 블럭을 지급했다
            //transaction (객체 안에 객체)
        }

        //배열 하나에 객체가 여러개인 구조
        const blockBody = [
            {
                fee : '0.00000000 BTC',
                Hash : 000003463463
            },
            {
                fee : '0.00000000 BTC',
                Hash : 000003463463
            },
            {
                fee : '0.00000000 BTC',
                Hash : 000003463463
            },
        ]

        //얇은 복사를 통해 합쳐서 넣어보자
        const block={
            blockHeader:{...blockHeader},
            blockBody:[...blockBody]
        }

        console.log(block)


        //--> 이걸 웹으로 뿌리는게 블록체인 웹서비스
        //결론 : 블록체인의 블록은 객체로 이루어져있음. 그래서 연결되는 블럭인거고.