• 구조 분해 할당

    2022. 8. 28.

    by. JJo 😊

    개발을 하다보면, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 있다. 이럴 때, 객체나 배열을 변수로 '분해'하여 사용할 수 있게 해주는 특별한 문법이 바로 '구조 분해 할당'이다.

     

    📌 객체 분해하기

    할당 연산자 우측에는 분해하고자 하는 객체를, 좌측에는 이에 상응하는 객체 프로퍼티의 '패턴'을 넣는다.

    const userInfo = {
        name: 'eunhye',
        age: 29,
        email : 'masimel33@gmail.com',
        address: 'Korea'
    }
    
    const {name, age, email, address} = userInfo;
    
    console.log(`사용자의 이름은 ${name}입니다.`); //사용자의 이름은 eunhye입니다.
    console.log(`사용자의 나이는 ${age}입니다.`); //사용자의 나이는 29입니다.
    console.log(`사용자의 위치는 ${address}입니다.`); // 사용자 위치는 Korea입니다.

    프로퍼티 userInfo.name, userInfo.age, userInfo.address 에 저장된 값이 상응하는 변수에 할당되었다. (순서 상관 없음)

    객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장할 수도 있다. userInfo.name을 n이라는 변수에 저장하고자 한다면 콜론 기호 : 를 사용하여 명시해주면 된다.

    const {name:n, age, email, address} = userInfo;
    
    console.log(`사용자의 이름은 ${name}입니다.`); //undefined
    console.log(`사용자의 이름은 ${n}입니다.`); //사용자의 이름은 eunhye입니다.

    프로퍼티가 없는 경우를 대비하여 기본값을 설정해 줄수도 있다. 기본값 설정은 = 기호를 사용해 할당해주면 된다.

    const userInfo = {
        name: 'eunhye',
        age: 29,
        email : 'masimel33@gmail.com',
        address: 'Korea'
    }
    const {name, age, email, hobby = 'coding'} = userInfo;
    
    console.log(`사용자의 취미는 ${hobby}입니다.`); //사용자의 취미는 coding입니다.

     

    📌 배열 분해하기

    배열도 마찬가지로할당 연산자 우측에는 분해하고자 하는 배열을, 좌측에는 이에 상응하는 변수를 넣는다. 이렇게 배열을 분해하면 인덱스를 이용해 배열에 접근하지 않고 변수 이름으로 사용할 수 있다.

    const fruits = ['Apple', 'Banana', 'Cherry'];
    const [a, b, c] = fruits;
    console.log(a, b, c); //Apple, Banana, Cherry

    또한, 심표기호','를 사용하여 필요하지 않은 배열 요소를 버릴 수도 있다.

    const [,  , a] = fruits;
    console.log(a); //Cherry

     

    참고 사이트

    https://ko.javascript.info/destructuring-assignment

     

    구조 분해 할당

     

    ko.javascript.info

     

    728x90

    'Javascript' 카테고리의 다른 글

    데이터 불변성  (0) 2022.09.02
    DOMContentLoaded VS load  (0) 2022.09.02
    ES6 Classes  (0) 2022.09.01
    전개연산자  (0) 2022.08.28
    let, const  (0) 2022.08.27

    댓글