구조 분해 할당 - JavaScript

---

구조 분해 할당(Destructuring assignment)은 JavaScript의 ES6에서 도입된 기능으로, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 해줍니다.

구조 분해 사용 이유

코드 간결성 : 구조 분해 할당을 사용하면 배열이나 객체의 요소를 한 번에 여러 변수에 할당할 수 있습니다. 이를 통해 코드를 더 간결하게 작성할 수 있습니다.

가독성 향상 : 구조 분해 할당은 코드의 가독성을 향상시킵니다. 각 변수가 어떤 값을 가지는지 직관적으로 이해하기 쉽습니다.

사용 편의성 : 객체의 속성을 개별 변수로 쉽게 추출할 수 있습니다. 특히 객체의 특정 속성만 필요로 하는 경우에 유용합니다.

함수 인자 처리 용이 : 함수의 매개변수로 객체를 전달할 때, 구조 분해 할당을 사용하면 객ㅊ의 속성을 쉽게 추출하고 사용할 수 잇습니다.

배열 구조 분해

const[변수] = 배열

• 각 변수에 배열의 인덱스 순으로 값 대응
• 구조분해 시 변수의 값이 undefined일 떄 기본값 할당 가능
• 구조분해 없이 두 변수의 교환도 가능

let lists = ['apple', 'grape'];
[item1, item2, item3 = 'peach'] = lists;

console.log('item1 : ', item1 );
console.log('item2 : ', item2 );
console.log('item3 : ', item3 );


let x = 1, y = 3;

[x, y] = [y, x]
console.log(x, y);

객체 구조 분해

const {변수} = 객체;

• 객체 안의 속성을 변수명으로 사용
• (:)을 이용해서 새 변수명을 선언하고, 원래의 값을 새 변수명에 할당 할 수 있다.

let obj = {
    key1 : 'one',
    key2 : 'two'
};

let { key1: newKey1, key2, key3} = obj;
console.log("key1 : ", newKey1);
console.log("key2 : ", key2);
console.log("key3 : ", key3);


let { a, b } = {a: 10, b: 20};
console.log('a' , a);
console.log('b' , b);


let {c, d, ...rest }= {c: 30, d:40, e: 50, f: 60};
console.log('c', c);
console.log('d', d);
console.log('rest', rest);

Spread연산자('...') : Spread 연산자는 배열이나 객체를 개별 요소나 속성으로 분해합니다. Spread 연산자를 사용하면 배열의 요소를 다른 배열 내에 삽입하거나, 함수에 인자로 전달하거나 , 객체의 속성을 다른 객체에 복사하는 등의 작업을 수행할 수 있습니다.

let arr1 = [1,2,3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [ 1, 2, 3, 4, 5 ]

let obj1 = {a: 1,  b: 2};
let obj2 = {...obj1, c:3};
console.log(obj2); // { a: 1, b: 2, c: 3 }


let i = [10, 20, 30]
function spredfunc(a, b, c){
    return a + b + c
}

console.log(spredfunc(...i)); // 60

Rest파라미터('...'): Rest 파라미터는 개별적인 값들을 하나의 배열로 묶습니다. 주로 함수의 파라미터에서 사용되며, 정해지지 않은 수의 인자를 배열로 받아 처리할 수 있게 합니다.

function sum(...nums){
    return nums.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1,2,3,4,5));

요약하자면, Spread 연산자는 배열이나 객체를 개별 요소나 속성으로 분해하는 반면, Rest 파라미터는 개별적인 값들을 하나의 배열로 묶습니다. 같은 '...'기호를 사용하지민, 사용되는 위치와 문맥에 따라 기능이 달랍니다. 아래 코드를 통해 비교해보자!!

Spread 연산자('...')

// 함수의 인자로 Spread 연산자 이용
function myFunction(x, y, z){
    return x + y + z;
}

let args = [1, 2, 3];
console.log(myFunction(...args)); // 6

Rest파라미터('...')

// 함수의 인자를 Rest 파라미터로 받기
function sum(...numbers){
    return numbers.reduce((previous, currnet) => {
        return previous + currnet;
    })
}


console.log(sum(1,2,3,4,5));

// 배열의 일부를 변수에 할당하고, 나머지를 Rest 파라미터로 받기
let [first, ...rest] = [1,2,3,4,5];

console.log(first); // 1
console.log(rest); // [2,3,4,5]

위의 예시에서 볼 수 있듯이, Spread 연산자와 Rest 파라미터는 비슷한 구문을 가지지만, 그 사용법과 목적은 매우 다릅니다.