[JavaScript] 구조 분해 할당

구조 분해 할당(Destructuring Assignment)

구조 분해 할당 문법은 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

즉, 객체나 배열을 변수로 '분해'할 수 있게 해준다.

 

1.  기본 문법

// 이름과 성을 요소로 가진 배열
let arr = ["Soojin", "Park"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// lastName arr[1]을 할당
let [firstName, lastName] = arr;

alert(firstName); // Soojin
alert(lastName);  // Park

 

위와 같이 인덱스를 이용해 배열에 접근하지 않아도 변수로 이름과 성을 사용할 수 있다.

 

1. 배열(array)에서의 구조 분해 할당

배열을 해체해서 배열 요소 순서와 선언된 변수 순서에 맞게 그 값을 각각 할당한다. 코드를 훨씬 더 간단하게 작성할 수 있다.

const a = [10, 20];
const [x, y] = a
console.log(x); // 10
console.log(y); // 20

 

비어있는 곳은 값이 할당되지 않으며, 디폴트 값을 설정할 수 있다.

const a = ['apple', 'banana', 'cherry'];
const [x, , y, z = "empty"] = a

console.log(x, y, z); // apple cherry empty

 

... 연산자 사용하여 배열의 남은 부분을 하나의 변수에 한 번에 담을 수도 있다.

const arr = [1, 2, 3, 4, 5];
const [a, b, ...c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5]

 

2. 객체(object)에서의 구조 분해 할당

배열 구조 분해 할당 형식과 비슷하다.

객체 내부의 프로퍼티 값을 간편하게 분해해서 변수에 저장할 수 있게 해준다.

분해되는 대상이 배열은 array의 value(element) 였다면, 객체는 분해되는 대상이 객체의 property 인 차이가 있다.

const a = { p: 42, q: true }
const { p, q } = a;

console.log(p); // 42
console.log(q); // true

 

객체 구조 분해 할당은 프로퍼티를 기준으로 하므로, 배열 구조 분해 할당과 달리 그 순서가 바뀌어도 문제 없이 해당 프로퍼티 값을 가져올 수 있다.

 

객체에도 마찬가지로 ... 연산자를 사용하여 나머지 객체에 할당이 가능하다.

const user = {
	id : 'morae',
    name : 'Park',
    age : 27,
}

const { id, ...rest } = user;

console.log(id); // morae
console.log(rest); // { name : "Park", age: 27 }

 

 

참조🙇‍♀️

https://chanhuiseok.github.io/posts/js-10/

https://charming-kyu.tistory.com/23

https://fromnowwon.tistory.com/entry/%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9-destructuring-assignment