[JavaScript] 구조분해할당

🛎️  구조분해할당

• 배열 또는객체의 구조를 분해해서 분해된 값을 개별적인 변수에 담는 표현식을 의미
• 각각의 요소를 서로 다른 변수의 값으로 저장을 하려면 각각의 인덱스로 요소에 접근을 해서 변수의 값으로 지정
• 배열 내부의 값을 새로운 변수에 각각 할당하고자 한다면 하나씩 변수를 선언하고  값을 할당하는 과정을 거침

const arr = [1, 2, 3, 4, 5];

const one = arr[0];
const two = arr[1];
const three = arr[2];

🛎️  배열의 구조분해할당

• 변수를 선언하고 할당하는 과정을 한 번에 해결할 수 있음
• 대열을 옆에다가 우측에다가 작성을 해주면 오른쪽에 주어진 배열을 구조 분해해서 좌변에 위치하고 있는  변수들에 각각 할당하게 됨

const arr = [1, 2, 3, 4, 5];

const [one, two, three] = arr;

console.log(one, two, three);

• 일반 변수와 동일하게 사용 가능 

🛎️  객체의 구조분해할당

• 프로퍼티의 값들을 각각의 변수로 구조 분해 핟당을 하려면 중괄호를 열어 키를 지정하고 우변에 구조를 분해할 객체 지정

const obj = {
    x : 10,
    y : 20,
};

const {x,y} = obj;

console.log(x,y);

🛎️  할당할 때 변수명 지정

• 키 값 뒤에 콜론을 붙이고 변경할 이름을 지정

const obj = {
    x : 10,
    y : 20,
};

const {x : hello ,y : world} = obj;

console.log(hello ,world);

🛎️  객체의 중첩 구조분해할당

• 중첩 관계를 콜론과 중괄호로 표현

const obj = {
    one: {
        two:{
            three: 'Bingo',
        },
    },
};

const {
    one: {
        two:{ three },
    },
} = obj;

console.log(three);

🛎️  함수와 구조분해할당

• 함수의 인자를 받을 때 구조 분해를 활용하는 방법
• 함수에서 오브젝트를 받아서 프로퍼티에 전표기법을 사용해서 접근
• 정확히 값을 알면 인자를 정의하는 부분에 구조 분해를 적용할 수 있음
• 객체를 의미하는 중괄호를 열고 사용할 프로퍼티의 키 값을 작성
• 내부에서 키 값이 변수 이름으로 사용할 수 있게 됨 

const obj = {
    x: 10,
    y: 20,
};

function sum(obj){
    return obj.x + obj.y;
}

console.log(sum(obj));


const obj = {
    x: 10,
    y: 20,
};

function sum({x, y}){
    return x + y;
}

console.log(sum(obj));

🛎️  구조분해할당 예제

1.  변수의 값을 교환 

• 값이 다른 두 개의 변수가 있을 때 두 개의 값을 변경하려면 새로운 변수를 만들어서 temp라는 변수에다가 a값을 저장해놓고 a에다 b의 값을 덮어씌우고 b에는 temp에 저장해 놨던 a의 값을 덮어씌워서 변수의 값을 교환
• 구조분해재할당 방식을 사용해서 a랑 b에다가 b랑 a의 값을 넣으면 주개의 변수의 값을 수합할 수 있게 됨

let a = 123;
let b = 456;

[a, b] = [b, a];

1.  구조분해할당에다 기본값을 미리 지정할 수 있음

• 할당 받을 변수는 두 개인데 할당할 값은 하나인 경우
•  a에는 지정한 값이 들어갔는데 값이 부족하여 b에는 기본값인 undefined로 설정되어 있음
• 변수 이름을 지정한 부분 우측에 등호를 사용하여 기본값을 지정해 줄 수 있음
• 값이 들어오면 들어온 값으로 초기화되지만 그렇지 않은 경우에는 기본값으로 초기화

const [a = 10, b = 20] = [10];

console.log(a, b);

1.  중간값을 생략하고 구조분해할당을 하는 방법

• 구조를 분해해서 가져오고 싶은 값이  중간에 어떤 값을 건너뛰고 가지고 오고 싶다면 변수 이름을 적는데 건너뛸 부분은 아무것도 적지 않고 쉼표만 표시

const arr = [1, 2, 3, 4, 5];

const [one, ,three, ,five] = arr;

console.log(one,three,five);

1. 나머지 요소를 나머지 인자 구문을 활용해서 한 번에 가져올 수도 있음

• 두 개의 변수를 가지고 올거고 나머지는 점점점하여 others를 붙여서 사용

const arr = [1, 2, 3, 4, 5];

const [one, two, ...others] = arr;

console.log(one, two, others);

• 앞 두 개는 각각의 변수로 잘 들어왔고 마지막 여소는 하나의 배열로 리턴