[JS] 구조분해할당 / 나머지 매개 변수 / 전개구문

구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 이를 통해 코드를 더 간결하게 작성할 수 있고, 변수 할당을 효과적으로 처리할 수 있다.

배열 구조 분해 할당

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다. 할당할 값이 없으면 undefined가 할당된다.

= (등호) 를 이용하면 할당할 값이 없을 때 기본 값을 설정할 수 있다.

// 기존 방식
const colors = ['빨강', '파랑', '초록'];
const red = colors[0];
const blue = colors[1];
const green = colors[2];

// 구조 분해 할당
const [red, blue, green] = colors;

console.log(red);   // '빨강'
console.log(blue);  // '파랑'
console.log(green); // '초록'

객체 구조 분해 할당

```JavaScript // 객체 생성 const person = { name: '홍길동', age: 30, job: '개발자' };

// 객체 구조 분해 할당
const { name, age, job } = person;

// 변수에 할당된 값 출력
console.log(name); // '홍길동'
console.log(age); // 30
console.log(job); // '개발자'

<h3>나머지 매개 변수</h3>
여러 개의 인수를 배열로 받아들일 수 있도록 하는 자바스크립트의 기능이다. 이는 함수가 몇 개의 인수를 미리 알 수 없는 경우 유용하게 사용할 수 있다. 나머지 매개 변수는 함수 매개 변수 중 마지막에 위치해야하며, 세 개의 점('...') 뒤에 나머지 인수를 수용할 변수의 이름이 온다.

```JavaScript
// 나머지 매개 변수 사용
function sum(...numbers) {
  let result = 0;

  for (let number of numbers) {
    result += number;
  }

  return result;
}

// 함수 호출
const total = sum(1, 2, 3, 4, 5);

console.log(total); // 15

전개 구문

배열이나 객체를 펼쳐서 각 요소 또는 속성을 개별적으로 처리할 수 있게 하는 자바스크립트 문법니다. 배열이나 객체를 다르 배열이나 객체에 복사하거나, 함수 호출 시 인수로 전달할 때 유용하게 사용된다.

배열에서의 전개 구문

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

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

객체에서의 전개구문

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };

console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

함수 호출 시 인수로서의 전개 구문

``` JavaScript function addNumbers(a, b, c) { return a + b + c; }

const numbers = [1, 2, 3];
const sum = addNumbers(...numbers);

console.log(sum); // 6