javascript 구조 할당 분해

greenTea·2023년 11월 13일

javascript 구조 할당 분해

😎JavaScript의 구조 할당 분해(destructuring assignment)는 복잡한 데이터 구조로부터 데이터를 쉽고 효율적으로 추출할 수 있게 해주는 기능입니다.

1. 객체 구조 분해

😑체 구조 분해는 객체의 속성을 변수로 쉽게 매핑할 수 있게 해줍니다.
아래는 사용 예시입니다.

기본 사용법
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 'John'
console.log(age); // 30
해당 키 값을 찾아서 값을 할당하는 구문입니다.
const { name, age } = person;에서 person의 name키값을 찾아서 name이라는 변수에 값을 넣는 구문입니다.

새 변수명 사용
const person = { name: 'John', age: 30 };
const { name: personName, age: personAge } = person;
console.log(personName); // 'John'
console.log(personAge); // 30
먼저 person에서 name키값을 이용하여 값을 찾아옵니다. 이후 personName이라는 새 변수에 값을 할당합니다.
이를 통해 새로운 변수에 값을 할당 할 수 있습니다.

기본값 설정
const person = { name: 'John' };
const { name, age = 25 } = person;
console.log(name); // 'John'
console.log(age); // 25 (기본값)
값이 없을 경우 기본 값을 설정 할 수 있습니다.
const { name, age = 25 } = person;에서 age라는 키값을 person이 가지고 있지 않기에 기본값이 25가 할당 된 것을 확인 할 수 있습니다.

2. 배열 구조 분해

🫡배열 구조 분해는 배열의 요소들을 변수로 쉽게 할당할 수 있게 해줍니다.

기본 사용법
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
앞에서 부터 a=1,b=2,c=3을 할당 합니다. 위 객체와는 다르게 키값이 아닌 인덱스 방식으로 진행된다고 생가하시면 이해하시기 편합니다.

선택적 할당
const numbers = [1, 2, 3];
const [a, , c] = numbers;
console.log(a); // 1
console.log(c); // 3 (2번째 요소는 건너뜀)
가운데 ,,를 이용하여 값을 할당 하지 않고 넘어 갑니다.

나머지 요소(rest operator)
const numbers = [1, 2, 3, 4, 5];
const [a, b, ...rest] = numbers;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
...을 활용하면 나머지 값을 할당 할 수 있게 됩니다.
앞에서 부터 1,2를 각각 a,b에 할당 한 후에 ...을 이용하여 나머지 값을 rest에 할당합니다.
const numbers = [1, 2, 3,];
const [a, b, ...rest] = numbers;
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3]
위 코드를 실행한 결과를 보면 ...을 사용한 경우에는 개수 상관 없이 배열로 저장이 되는 것을 확인 할 수 있습니다. (값이 없을 경우 빈 배열이 할당 됩니다.)

주의
const numbers = [1, 2,3,4,5];
const [...rest,a,b] = numbers; //잘못된 코드입니다...
😰... 문법의 경우 가장 앞에서 사용할 수 없으며 무조건 마지막에 사용해야 합니다.

3. 함수 매개변수에서의 구조 분해

함수의 매개변수에서도 구조 분해를 사용할 수 있습니다.
function greet({ name, age }) {
  console.log(`${name} and ${age}`);
}

greet({ name: 'hello', age: 30 }); // " hello and  30"