[js] 비구조 할당문 (깊은 복사)

 

비구조 할당문은
원본값이 바뀌더라도 처음에 복사할 때, 그 시점의 값을 쓰고 싶을때 사용하면 좋다. (깊은 복사)

예시 ①  

[배열]

 

비구조 할당문 사용하지 않고 배열에 있는 값을 새로운 변수에 담을 때

// 방법 1 - 이건 비구조 할당문이 아님
let arr = [1,2,3,4,5,6,7,8,9];
let a = arr[0];
let b = arr[1];
let c = arr[2];

 

비구조 할당문을 사용해 배열에 있는 값을 새로운 변수에 담을 때

let arr = [1,2,3,4,5,6,7,8,9];

let [a,b,c, ...last] = arr;
console.log(a);     // 1
console.log(b);     // 2
console.log(c);     // 3
console.log(last);  // 나머지

비구조 할당문을 이용해서 a, b, c 에 각각 1, 2, 3 을 담았고

...last 로 그 뒤에 나머지 값을 담았다.

 

---

 

예시 ②

{객체}

 

1) 비구조 할당문 사용 -  이름 변경해서 복사하기

// 객체
// 예시 1
let obj = {a:10, b:20, c:30, d:40};
let {a:a2, ...last2} = obj;

console.log(a2);
console.log(last2);
// 이름을 마음대로 바꿔서 처리 가능함

객체에 있는 a 를

비구조 할당문으로 복사하게 되면

a2 라는 새로운 이름으로 다시 명명할 수 있다.

 

결과:
10
{ 20, 30, 40}

 

2) 비구조 할당문 사용 -  이름 변경해서 복사하기2

// 예시2
let obj = {a:10, b:20, c:30, d:40};
let {a:name, b:age, c:key, d:weight} = obj;
console.log(name);
console.log(age);
console.log(key);
console.log(weight);

a b c d 라는 값을 name age key weight 라는 새로운 이름을 주어서 복사를 했다.

 

---

깊은 복사와 얕은 복사

- 비구조 할당문을 사용하면 깊은 복사가 된다.

let arr2 = [1,2,3];
let copy = arr2;            // 그대로 가져오겠다
let copy2 = [...arr2];      // 1 2 3 이라는 값만 가져온것

arr2[0] = 'ingoo';

console.log(copy);      // 얕은 복사
console.log(copy2);     // 깊은 복사

얕은 복사를 한 copy 만 배열의 첫번째 값이 변경되고,

깊은 복사를 한 copy2는 배열의 초기 설정 값이 그대로 유지된다. - 1,2,3 이라는 값 자체를 가져온것이기 때문이다.

 

---

server.js 에서

어느 부분에 깊은 복사를 사용했는가?

token.data

user.data

부분의 값을 깊은 복사로 들고 왔다.

app.get('/auth/kakao/callback', async (req,res)=>{
    // 비구조할당문
    const {session, query} = req;   // 이 구문으로 req.session 을 session만 써도 됨
    const {code} = query;   // req.query.code -> 이걸 code만 쓰면 되게 해줌

    ..
    const authData = {
        ...token.data,      // 깊은 복사 - 항상 초기값을 유지함
        ...user.data,
    }

    session.authData = {
        ["kakao"] : authData,       // kakao : authData
    }

   
    res.redirect('/');  // callback 갔다가 세션에 담고 다시 인덱스 페이지로 오게함
})