(펌)개념 정리
객체와 배열 구조분해 할당
ble194
2022. 7. 29. 12:25
**객체와 배열 구조분해 할당**
- **(1) 구조 분해 할당이란?**
객체나 배열을 구조분해하여 나타낼 수 있습니다.
- **(2) 객체 구조분해 할당 코드 비교**
- 구조분해 할당을 사용하지 않을 때
```jsx
const user = {name: "손석구", age: 10};
console.log(user.name) // 손석구
console.log(user.age) // 10
```
- 구조분해 할당을 사용했을 때
```jsx
const { name, age } = user
console.log(name) // 손석구
console.log(age) // 10
```
- **(3) 배열 구조분해 할당 코드 비교**
- 구조분해 할당을 사용하지 않을 때
```jsx
const games = ['배틀그라운드', '리그오브레전드'];
console.log(game[0]) // 배틀그라운드
console.log(game[1]) // 리그오브레전드
```
- 구조분해 할당을 사용할 때
배열를 구조분해 할당했을 때 **순서는 배열의 index 순서와 같습**니다.
```jsx
// 구조분해 할당
const [battleGround, Lol] = games;
console.log(battleGround); // 배틀그라운드
console.log(Lol); // 리그오브레전드
```
함수 인자에서 구조분해 할당
- **(1) 함수 내 구조분해 할당 코드 비교**
함수의 인자가 객체 또는 배열인 경우, 위의 방법대로 구조분해 할당하여 사용할 수 있습니다.
- 구조분해 할당을 사용하지 않을 때
```jsx
// user가 객체일 때
const getUserName = (user) => {
return user.name
}
// user가 배열일 때
const getUserName = (user) => {
return user[0]
}
```
- 구조분해 할당을 사용했을 때
```jsx
// 객체일 때
const getUserName = ({name, age}) => {
return name;
};
// 배열일 때
const getUserName = ([name, age]) => {
return name
};
```
출처 - 스파르타코딩클럽(항해99과정):https://hanghae99.spartacodingclub.kr/