구조분해 할당(비구조화 할당)
const aboutMe = {
name : "정혜원",
age : 23456,
position : "frontend",
adress : "성북구",
favoriteFood : "치킨",
}
위에 보시는 것 과 같이 객체가 하나 있습니다.
만일, 저 객체 안에 있는 값들을 하나씩 모두 분해해서 변수에 할당을 해줘야 하는 상황이라면 어떨까요?
아마 여러분들은 객체의 키값에 접근해서 할당을 해주실 것 입니다. 아래와 같이요.
const name = aboutMe.name
const age = aboutMe.age
const position = aboutMe.position
const address = aboutMe.address
const favoriteFood = aboutMe.favoriteFood
생각만해도 굉장히 귀찮고, 보는것만으로도 가독성이 매우 떨어지지 않나요?
그런데 위에서 한 여러번의 선언과 할당과정을 한번에 처리하는 방법이 있습니다.
바로 **구조분해 할당(비구조화 할당)** 입니다.
구조분해 할당에는 배열과 객체의 구조분해 할당이 있으며 아래에서 자세히 알아보도록 하겠습니다.
배열의 구조 분해할당
위에서 말씀 드렸듯, 구조분해 할당은 여러번의 선언과 할당과정을 한번에 처리하는 과정이라고 말씀 드렸습니다.
따라서 **배열의 구조분해 할당**은 배열 내부의 값을 여러 변수에 나눠 담는 과정을 한번에 처리한다 생각하시면 됩니다.
const numbers = [0, 1, 2];
**let [ zero, one, two ] = numbers;** // 선언과 동시에 할당
즉,
const zero = number[0]
const one = number[1]
const two = number[2]
와 같이 여러번에 거친 과정을 배열의 구조분해 할당을 이용하시면 위와같이 한번에 처리가 가능합니다.
우리가 자주 사용해왔던 배열의 구조분해 할당!
우리는 이미 자주 사용하는 배열구조분해가 있습니다.
예상하신 분들도 계시겠지만, 바로 useState 를 선언할 때 입니다.
**const [state,setState] = useState()**
이제 보이시나요? 우리는 지금까지 배열의 구조분해 할당을 사용해서 useState를 사용하고 있었습니다.
<aside> 💡 할당하려는 변수가 더 많거나 적으면? → 적은 경우에는 더이상 할당되지 않고, 많은경우에는 undefined가 할당 됩니다.
// 적을 경우
let [one,two] = [1,2,3,4]
//결과값은 아래와 같이 구조분해 된다.
let one = 1
let two = 2
// 많을 경우
let [one,two,three,four] = [1,2,3]
//결과값은 아래와 같이 구조분해 된다.
let one = 1
let two = 2
let three = 3
let four = undefined
</aside>
💡배열 구조분해 어떤상황에서 사용할까요?
배열에서 따로 담아둬야 할 값이 2개 이상이라면 한번에 구조분해 할당을 이용해 선언과 할당을 진행하면 편리합니다.
예를 들면 아래와 같은 상황일때 구조분해 할당을 이용하시면 편리합니다!
// 2,5,7번 인덱스 값을 뽑아 변수에 담아야 한다.
let arr = [1,2,3,4,5,6,7,8,9]
let [ index2,index5,index7 ] = [ arr[2],arr[5],arr[7] ]
객체의 구조분해 할당
객체의 구조분해 할당은 배열의 구조분해 할당과는 조금 다릅니다.
객체의 구조분해 할당에서의 변수명을 객체의 key값으로 선언해주셔야 합니다.
const aboutMe = {
name : "정혜원",
age : 23456,
position : "frontend",
adress : "성북구",
favoriteFood : "치킨",
}
// 이름과 나이만 뽑아서 새로운 변수에 담아주고 싶을 때
const { name,age } = aboutMe
//결과
// name = "정혜원"
// age = 23456
또한 배열에서는 선언과 할당이 따로 일어나도 상관이 없었지만, 객체는 선언과 할당이 동시에 일어나야 합니다.
let [ name ]
[ name ] = ”정혜원”
배열은 위와 같이 선언과 할당을 따로 해도 문제가 없지만, 객체는 안된다는 뜻 입니다.
<aside> 💡 만일 없는 키를 선언하고 할당하게 되면? → 없는키는 할당값이 undefined로 들어가게 됩니다.
const aboutMe = {
name : "정혜원",
age : 23456,
position : "frontend",
adress : "성북구"
}
// hight라는 없는 key를 선언하고 할당하기
const { hight, age } = aboutMe
// 결과
// hight = undefined
// age = 23456
</aside>
Rest 파라미터
우리가 특정 객체에서 지우고싶은 데이터가 있을 때 어떻게 할까요?
과연 **delete**를 사용해 원본 데이터를 삭제할까요?
사실 원본을 건드리는 일은 그리 바람직하지 못합니다.
원본이 어디서 어떻게 사용되고 있을 지 모르기 때문에 원본을 사용하는 곳에서 예상치 못한 에러를 직면하게 될 수 있습니다.
따라서 원본을 건들이지 않고 삭제하기 위해 rest 파라미터를 이용합니다.
rest 파라미터는 구조분해 할당과 함께 사용합니다.
const me = {
name: "정혜원",
age: 123,
hobby: "공부",
dream: "30년차 자바스크립트 개발자"
}
// 구조분해 할당
**const { money, hobby, ...rest } = child**
이렇게 적으면 rest변수에는 dream과 hobby를 제외한 모든게 들어가게 됩니다.
즉, rest를 호출하게 되면 dream과 hobby를 제외한 프로퍼티가 담긴 객체가 호출되는 것 입니다.
따라서 rest 파라미터를 사용하게 되면, 삭제할 프로퍼티를 제외한 모든 데이터를 간편하게 골라낼 수 있습니다.
출처 : 코드캠프
