자바스크립트 비구조할당문

배열에서 각각의 수 를 가지고 올때 원래 쓰던 방법

 

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

let a = arr[0];
let b = arr[1];
let c = arr[2];

 

이런식으로 가지고 왔다. 콘솔로 각 a,b,c를 찍어보면 1,2,3이 나올 것 이다.

 

비구조할당문을 이용해서 배열 안에서 특정 값만 변수로 설정해주고 나머지는 last라는 변수에 담을 수 있다. 또한 속성값의 이름을 바꿀 수도 있다.

 

비구조 할당문을 통해 arr 배열안에 1,2,3만 변수로 설정해주고 나머지는 last안에 묶어 저장해보자

 

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

let [a,b,c, ...last] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(last);

 

 

 

결과값은

 

 

1,2,3은 a,b,c,에 담겼고 나머지 4~9는 last라는 변수안에 담긴걸 볼 수 있다.

 

 

 

 

예시 2

 

let obj = {a:10,b:20,c:30,d:40};
let {a:a2, ...last2} = obj;
console.log(a2);
console.log(last2);

 

객체 안에서 각각의 변수에 데이터를 담아주고 비구조 할당문에서 그 변수를 a2와 last2라는 새로운 변수에 담아줬다. 

 

 

결과값은

 

 

 

 

 

예시 3

 

let {a:name,b:age,c:key,d:weight} = obj;
console.log(name);
console.log(age);
console.log(key);
console.log(weight);

 

예시 2의 연장선으로 데이터를 새로운 변수에 담았다

 

 

각각의 값이 잘 담긴걸 볼 수 있다.

 

 

 

 

 

예시 4

 

let arr2 = [1,2,3];
let copy = arr2;
let copy2 = [...arr2];
console.log(copy);
console.log(copy2);

 

이런 식으로 사용하면 결과값은 두개다 똑같이 나온다

 

 

결과값

 

 

arr2[0]= 'ingoo';
console.log(copy);
console.log(copy2);

 

하지만 새로운 값을 추가 했을때 비구조할당문안의 값들은 변하지 않는다

 

 

이것을 통해 비구조 할당문은 깊은 복사를 한다는 것을 알 수 있다.

 

 

 

 

 

깊은 복사와 얕은 복사의 개념을 생각나는데로 그려봤는데 지각층의 단면이라고 생각하고 봐보자.

예시4를 기본 값으로, arr2는 [ 1, 2, 3 ] 라는 본질(?)이 깊게 저장되어있는 data고

arr[0] = 'ingoo'; 라는 데이터를 그 위에 얹은 것 이다.(그림에서 노란색, 빨간색, 보라색이 얹어진 data에 해당됨)

 

이 상태로 복사를 했을때 얕은 복사는 원래 data와 그 위에 얹어진 추가된 data를 복사해 가는 것이고

깊은 복사는 core data를 복사해(참조) 가는거라고 이해했다.

 

 

 

 

직접 사용해보기

 

현재 API사용해서 외부 로그인 진행중

app.get('/auth/kakao/callback', async (req,res)=>{
	let token;
    try{
        token = await axios({
            method: 'POST',
            url: 'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },
            data:qs.stringify({
                grant_type:'authorization_code'
                client_id:kakao.clientID,
                client_secret:kakao.clientSecret,
                redirectUri:kakao.redirectUri,
                code,
            })
        })
    } catch(err){
        res.json(err.data)
    }

    let user;
    try {
        user = await axios({
            method: 'GET',
            url :'https://kapi.kakao.com/v2/user/me',
            headers :{
                Authorization :`Bearer ${token.data.access_token}`
            }
        })
    } catch (err) {
        res.json(err.data)
    }

    const {session,query} = req;
    const {code} = query;

    const authData = {
        ...token.data,
        ...user.data,
    }

    req.session.authData = {
        ['kakao']:authData,
    }

    res.redirect('/');
})

 

비구조할당문 사용한 부분만 찾아봄.

이미 있는 req객체에 session과 query를 담는다.

 

그리고 authData에 위에서 선언해준 token과 user의 data를 넣어준다. '...'을 사용해서 깊은 복사를 해준다.

그 다음 authData에 kakao항목을 만들어준다.