[javascript] 구조 분해 할당 (Destructing assignment)

---

안녕하세요 !
오늘은 코드를 더욱 가독성 있고 간결하게 만들어주는
🌟구조 분해 할당🌟 에 대해 알아보겠습니다. 

---

구조 분해 할당이란 무엇일까요?

이는 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이랍니다. 한 문장만으로 객체나 배열 구조를 분해한 후 각각의 요소들을 새로운 변수들에 하나하나 할당할 수 있게 됨으로서, 객체나 배열 요소들의 변수 할당이 매우 간단해지게 되었습니다 ! 예시 코드를 통해 알아봅시다.
 

 
첫 번째 줄 코드에서는 구조 분해 할당을 이용해, 변수 user1에는 'mimi'를, 변수 user2에는 'mike'를, 변수 user3에는 'miso'를 할당하고 있습니다. 따라서 user2를 출력해보면 "mike"가 나오게 됩니다. user2 = users[1]; 형태의 코드를 세 문장을 써야했던 것을, 구조 분해 할당을 이용하면 한 문장만으로 세 개의 배열요소를 모두 각각의 변수에 할당해 줄 수 있게 되네요. 
 
"구조 분해 할당"이라는 이름 때문에 왜인지 할당의 과정에서 기존 배열인 user의 구조가 파괴될 것 같은 느낌이 들곤 합니다만, 분해 대상은 절대 수정 또는 파괴되지 않고 온전히 존재합니다. 배열의 요소를 직접 변수에 할당하는 것보다 코드 양이 줄어든다는 점만 다를 뿐이죠.
 
 

 
위 예시처럼 split 같은, 반환 값이 배열인 메소드를 함께 활용해도 좋습니다. 

 
물론 배열 뿐만 아닌 모든 이터러블(iterable)에 구조 분해 할당을 적용할 수 있습니다. 할당 연산자 좌측엔 할당할 수 있는 것이라면 그 어떤 것이든 올 수 있습니다. 아래와 같이 객체 프로퍼티에 할당받을 수도 있답니다.

 
 
만일 배열에서 필요하지 않은 요소가 있다면, 쉼표를 사용해서 버릴 수도 있습니다. 

 
구조 분해 할당 과정에서, 'TOM'이 할당될 자리에는 아무런 변수도 존재하지 않네요. 따라서 name에는 "mimi"가, age에는 24가 정상적으로 할당되지만 이 과정에서 배열의 'TOM'요소는 자연스레 버려지게 됩니다. 
 
 
 
만약 변수는 존재하는데, 해당 변수에 할당할 값이 없다면 어떨까요? 아래 코드와 같이 말입니다.

 
a에는 3이, b에는 2가 할당되는데 현재 변수 c에는 할당될 값이 존재하지 않습니다. 이 경우 값을 할당받지 못한 변수는 undefined로 취급됩니다. 이러한 상황을 방지하기 위해 우리는 기본값(default value)을 미리 설정해 둘 수 있답니다.

 
좌측을 보시면 a,b,c 변수에 "="을 사용하여 기본값을 지정해 두었습니다. 이처럼 "="을 사용하면 할당할 값이 없을 때 기본적으로 할당해 줄 값인 기본값을 설정할 수 있습니다. 이 기본값은 c와 같이 할당받을 값이 없을 때에만 유효합니다. 즉, 값이 undefined일 때에만 유효하죠. 따라서 a의 경우 할당받을 값이 있으므로 기본값은 무시되고, c의 경우 할당받을 값이 없으므로 기본값이 적용됩니다.
 

 

 

 

---

 
 
 
보통 두 변수에 저장된 값을 교환할 때 일반적으로 temp 변수와 같은 개념을 활용했었죠.

 

 

 

 

하지만 우리가 오늘 배운 구조 분해 할당을 통해 훨씬 쉽고 간단한 방식으로 교환을 표현할 수 있게 됩니다 !

 

* 변수 교환 트릭 *

 
변수 guest에는 "jinpyo", 변수 owner에는 "mimi"가 저장되도록 값을 교환하였습니다. 이처럼 변수 교환을 해야할 때 구조 분해 할당은 정말 유용하게 쓰일 수 있겠죠?
 

 

---

 

 
* 매개변수 " ... " 를 이용하여 나머지 요소 가져오기 !
(*** 나머지 매개변수 개념 이용)

- 나머지 매개변수는 전달받은 모든 인수들을 배열로 수집하는 특징이 있음. *

 
 

 

---

 

 

 

 
객체 구조 분해 할당의 경우는 어떨까요?

 
위 코드와 같이 구조 분해 할당으로 객체도 분해되며 변수에 할당될 수 있습니다.
 
 
 

 
 위 코드와 같이 객체의 경우도 마찬가지로 기본값을 미리 설정해둘 수 있습니다. 물론 위 코드의 경우 이미 name 속성도 age 속성도 존재하므로 기본값은 모두 무시되겠지만요.
 
기본적으로 객체 구조 분해 할당의 경우 위 코드처럼 좌측에 할당받는 부분의 key 이름은 기존 key와 동등하게 기재하는데요, 만일 새로운 이름의 key 변수에 할당하고 싶다면 콜론(:) 을 사용하시면 이름 변경이 가능합니다 !
 

 
따로 코드를 작성하진 않았지만 콜론과 할당 연산자(디폴트값)를 동시에 사용할 수도 있습니다 !
 
 

 
위 코드와 같이 property가 많은 객체에서 원하는 정보들만 뽑아오는 것도 가능하답니다 ! 꼭 기존 객체의 모든 property를 반영해야 하는 것은 아니에요.

---

오늘은 구조 분해 할당에 대해 알아보았습니다.
방문해주신 여러분 감사드립니다 !
도움되셨다면 조아요 부탁드릴게요… 🥹🙏🏻🌟