(펌)개념 정리

객체와 배열 구조분해 할당

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/