구조 분해 할당

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

 

📌 객체 분해하기

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

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

구조 분해 할당