[JavaScript] 구조 분해 할당(Destructuring)

📚 구조 분해 할당이란 무엇인가요?

구조 분해 할당은 복잡한 배열이나 객체로부터 데이터를 추출하여, 이를 새로운 변수에 간단히 할당하는 자바스크립트의 표현식이에요. 이 방식을 사용하면 코드를 더 깔끔하고 가독성 있게 작성할 수 있어요.

 

비유를 들어보자면, 한 상자에 여러 가지 과일이 들어 있을 때, 각 과일을 하나씩 꺼내서 따로따로 접시에 담는 것과 비슷해요. 구조 분해 할당은 이러한 과정을 코드 상에서 매우 심플하게 해줍니다.

 

---

🖥️ 구조 분해 할당의 종류

구조 분해 할당은 주로 배열과 객체에서 사용돼요.

1. 배열의 구조 분해 할당

• 배열의 구조 분해 할당은 배열의 요소들을 변수에 할당할 때 사용돼요. 순서대로 할당되며, 원하는 요소만 선택적으로 추출할 수도 있어요.

const fruits = ["사과", "바나나", "체리"];
const [apple, banana, cherry] = fruits;
console.log(apple, banana, cherry);  // 사과, 바나나, 체리

이 코드에서는 'fruits' 배열에서 각 요소를 순서대로 'apple', 'banana', 'cherry' 변수에 할당합니다.

2. 객체의 구조 분해 할당

• 객체의 구조 분해 할당은 객체의 속성을 같은 이름의 변수에 할당할 때 사용돼요. 이 때, 속성명과 변수명이 일치해야 합니다.

const person = { name: "지호", age: 28, job: "개발자" };
const { name, age, job } = person;
console.log(name, age, job);  // 지호, 28, 개발자

이 코드에서는 'person' 객체의 각 속성을 'name', 'age', 'job' 변수에 할당합니다.

3. 비어있는 배열과 객체에서의 구조 분해 할당

비어있는 배열이나 객체에서 구조 분해 할당을 사용할 때는 주의가 필요해요. 기본적으로 할당할 값이 없기 때문에, 각 변수는 undefined로 할당되겠지만, 이를 방지하기 위해 기본값을 설정할 수 있어요.

• 비어있는 배열에서의 구조 분해 할당: 비어있는 배열에서 구조 분해 할당을 할 때는 각 변수에 기본값을 제공하는 것이 좋아요. 이렇게 하면 기본값이 변수에 할당되어 undefined를 방지할 수 있어요.

const fruits = [];
const [apple = '사과', banana = '바나나', cherry = '체리'] = fruits;
console.log(apple, banana, cherry);  // 사과, 바나나, 체리

이 예제에서는 빈 배열 'fruits'에서 값을 추출하려고 시도하므로 기본값이 각 변수에 할당됩니다.

• 비어있는 객체에서의 구조 분해 할당: 객체가 비어 있거나, 기대하는 속성이 없을 때도 마찬가지로 변수에 기본값을 설정할 수 있어요. 이 방법을 사용하면 데이터가 없는 경우에도 프로그램이 예상대로 작동하게 할 수 있어요.

const person = {};
const { name = "이름 미정", age = 0, job = "직업 미정" } = person;
console.log(name, age, job);  // 이름 미정, 0, 직업 미정

이 코드에서는 'person' 객체에 'name', 'age', 'job' 속성이 없으므로, 각 변수에 설정된 기본값이 할당됩니다.

 

---

🤔 구조 분해 할당의 활용 예

구조 분해 할당은 데이터를 효율적으로 다루고 싶을 때 아주 유용하게 사용할 수 있어요. 특히 함수에서 복잡한 데이터 구조를 반환할 때, 이를 간편하게 다루는 데 매우 효과적이에요.

1. 함수에서 배열 반환 시의 구조 분해 할당

function getScores() {
    return [70, 80, 90];
}

const [math, science, english] = getScores();
console.log(math, science, english);  // 70, 80, 90

'getScores' 함수는 세 과목의 점수를 배열로 반환하며, 이를 각 과목명에 해당하는 변수에 할당합니다.

2. 함수에서 객체 반환 시의 구조 분해 할당

function getUser() {
    return { name: "하나", age: 24, job: "디자이너" };
}

const { name, age, job } = getUser();
console.log(name, age, job);  // 하나, 24, 디자이너

'getUser' 함수는 사용자 정보를 객체로 반환하며, 이를 개별 변수에 구조 분해 할당하여 간편하게 접근합니다.

3. 함수에서 여러 데이터 포인트 반환 시의 구조 분해 할당

function getContactInfo() {
    return {
        name: "준호",
        address: {
            street: "123 Maple St",
            city: "Seoul",
            zipCode: "12345"
        },
        contact: {
            email: "junho@example.com",
            phone: "010-1234-5678"
        }
    };
}

const {
    name,
    address: { street, city, zipCode },
    contact: { email, phone }
} = getContactInfo();

console.log(name);       // 준호
console.log(street);     // 123 Maple St
console.log(city);       // Seoul
console.log(zipCode);    // 12345
console.log(email);      // junho@example.com
console.log(phone);      // 010-1234-5678

'getContactInfo' 함수는 사용자의 기본 정보, 주소, 연락처 정보를 포함한 객체를 반환합니다.
이 객체에서 구조 분해 할당을 사용하여 이름, 주소의 각 요소(거리, 도시, 우편번호), 연락처의 각 요소(이메일, 전화번호)를 각각의 변수로 직접 할당했습니다.
이렇게 하면 중첩된 객체 구조에서도 원하는 데이터를 깔끔하게 추출할 수 있습니다.

 

---

🚨 주의할 점

• 존재하지 않는 속성 접근: 객체에서 존재하지 않는 속성에 접근하려 할 때는 undefined가 할당되므로, 적절한 기본값을 설정하는 것이 좋아요.
• 너무 깊은 구조 분해: 매우 깊은 구조의 객체나 배열을 구조 분해 할당할 때는 코드의 가독성이 떨어질 수 있으니 주의해야 해요.

 

---

📖 결론

구조 분해 할당은 자바스크립트에서 데이터 처리를 간결하고 효율적으로 만들어 주는 훌륭한 도구예요. 배열이나 객체로부터 필요한 데이터를 쉽게 추출할 수 있어, 코드의 가독성과 유지 보수성을 크게 향상시킬 수 있어요.

 

---

🔗 추가 정보

• 자바스크립트의 구조 분해 할당에 대한 더 깊은 이해를 원하신다면, MDN Web Docs에서 자세한 정보를 찾아볼 수 있어요.