자바스크립트 디스트럭처링 (Javascript Destructuring)

자바스크립트 디스트럭처링 (Javascript Destructuring)

열여덟 번째 포스팅까지 다양한 주제를 다루었다면, 이번에는 "문법 및 핵심 개념 (Syntax and Core Concepts)" 범주에 속하는 "디스트럭처링(Destructuring)"에 대해 작성해보려 한다. 디스트럭처링(Destructuring)은 ES6에서 도입된 문법으로, 배열(Array)과 객체(Object)에서 값을 추출하는 방식을 간소화한다.


디스트럭처링(Destructuring)은 복잡한 데이터 구조(Data Structure)에서 필요한 값만 쉽게 가져오며, 코드 가독성(Readability)을 높인다. 이번 포스팅에서는 디스트럭처링(Destructuring)의 개념, 배열 디스트럭처링(Array Destructuring), 객체 디스트럭처링(Object Destructuring), 활용 방법(Usage), 그리고 실습 예제(Practice Example)를 작성해볼 예정이다.


디스트럭처링(Destructuring)은 자바스크립트(Javascript)의 데이터 처리(Data Processing)를 이해하는 데 필수적이다. 콘솔(Console) 또는 HTML 파일에서 예제를 실행하며 디스트럭처링(Destructuring)의 동작을 체감할 수 있다.


디스트럭처링의 개념 (Concept of Destructuring)

디스트럭처링(Destructuring)은 배열(Array)이나 객체(Object)의 요소를 변수(Variable)로 분해한다. 기존에는 인덱스(Index)나 속성 이름(Property Name)으로 값을 하나씩 가져왔지만, 디스트럭처링(Destructuring)은 이를 간결하게 처리한다.

다음은 기본적인 디스트럭처링(Destructuring) 예제이다:

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

const obj = { x: 10, y: 20 };
const { x, y } = obj;
console.log(x, y); // 10 20

위 예제는 배열(Array)과 객체(Object)를 분해한다.

디스트럭처링(Destructuring)은 코드 간결성(Simplicity)과 효율성(Efficiency)을 높인다. 이는 데이터 조작(Data Manipulation)에서 유용하다.


배열 디스트럭처링 (Array Destructuring)

배열 디스트럭처링(Array Destructuring)은 배열(Array) 요소를 변수(Variable)로 추출한다.


1. 기본 분해 (Basic Destructuring)

순서대로 값을 할당한다:

const [first, second] = [10, 20];
console.log(first); // 10
console.log(second); // 20

2. 나머지 요소 (Rest Elements)

...로 나머지를 배열(Array)로 받는다:

const [head, ...rest] = [1, 2, 3, 4];
console.log(head); // 1
console.log(rest); // [2, 3, 4]

예제: 배열 분해 (Array Destructuring Example)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열 디스트럭처링 (Array Destructuring)</title>
</head>
<body>
    <button id="btn">분해</button>
    <div id="result"></div>
    <script>
        const numbers = [10, 20, 30, 40];
        const [first, second, ...others] = numbers;

        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            result.textContent = `첫 번째: ${first}, 두 번째: ${second}, 나머지: ${others}`;
        });
    </script>
</body>
</html>

이 예제는 배열(Array)을 분해한다.


객체 디스트럭처링 (Object Destructuring)

객체 디스트럭처링(Object Destructuring)은 속성(Property)을 변수(Variable)로 추출한다.


1. 기본 분해 (Basic Destructuring)

속성 이름(Property Name)으로 값을 할당한다:

const { name, age } = { name: '홍길동', age: 25 };
console.log(name); // "홍길동"
console.log(age); // 25

2. 별칭 사용 (Alias Usage)

새로운 변수 이름(Variable Name)을 지정한다:

const { name: userName, age: userAge } = { name: '김유신', age: 30 };
console.log(userName); // "김유신"
console.log(userAge); // 30

예제: 객체 분해 (Object Destructuring Example)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>객체 디스트럭처링 (Object Destructuring)</title>
</head>
<body>
    <button id="btn">정보 표시</button>
    <div id="result"></div>
    <script>
        const person = { name: '이순신', age: 40, city: '서울' };
        const { name: pName, age: pAge } = person;

        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            result.textContent = `${pName}, ${pAge}세`;
        });
    </script>
</body>
</html>

이 예제는 객체(Object)를 분해한다.


디스트럭처링 활용 (Usage of Destructuring)

디스트럭처링(Destructuring)은 다양한 상황에서 활용된다.


1. 함수 매개변수 (Function Parameters)

매개변수(Parameter)를 분해한다:

function printInfo({ name, age }) {
    console.log(`${name}, ${age}`);
}
printInfo({ name: '홍길동', age: 25 }); // "홍길동, 25"

2. 중첩 분해 (Nested Destructuring)

중첩 객체(Nested Object)를 분해한다:

const data = { user: { name: '김유신', info: { age: 30 } } };
const { user: { name, info: { age } } } = data;
console.log(name, age); // "김유신", 30

예제: 함수 활용 (Function Usage Example)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>함수 디스트럭처링 (Function Destructuring)</title>
</head>
<body>
    <button id="btn">표시</button>
    <div id="result"></div>
    <script>
        function showUser({ name, age }) {
            return `${name}, ${age}세`;
        }
        const user = { name: '이순신', age: 40 };

        const btn = document.getElementById('btn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            result.textContent = showUser(user);
        });
    </script>
</body>
</html>

이 예제는 함수 매개변수(Parameter)를 분해한다.


실습 예제: 디스트럭처링 관리 (Destructuring Management Example)

디스트럭처링(Destructuring)을 활용한 관리 예제이다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>디스트럭처링 관리 (Destructuring Management)</title>
    <style>
        #itemList {
            list-style-type: none;
            padding: 0;
        }
        #itemList li {
            padding: 5px;
            background: #f0f0f0;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <input type="text" id="titleInput" placeholder="제목">
    <input type="text" id="descInput" placeholder="설명">
    <button id="addBtn">추가</button>
    <ul id="itemList"></ul>
    <script>
        const items = [];
        const titleInput = document.getElementById('titleInput');
        const descInput = document.getElementById('descInput');
        const addBtn = document.getElementById('addBtn');
        const itemList = document.getElementById('itemList');

        function renderItems() {
            itemList.innerHTML = items.map(({ title, desc }) => `
                <li>${title} - ${desc}</li>
            `).join('');
        }

        addBtn.addEventListener('click', () => {
            if (titleInput.value && descInput.value) {
                items.push({ title: titleInput.value, desc: descInput.value });
                renderItems();
                titleInput.value = '';
                descInput.value = '';
            }
        });
    </script>
</body>
</html>

이 예제는 디스트럭처링(Destructuring)으로 항목을 관리한다.


Destructuring Example

실무에서의 디스트럭처링 (Destructuring in Practice)

실무에서는 API 데이터 처리(API Data Processing)에 활용한다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>API 디스트럭처링 (API Destructuring)</title>
</head>
<body>
    <button id="fetchBtn">데이터 표시</button>
    <div id="result"></div>
    <script>
        const fetchBtn = document.getElementById('fetchBtn');
        const result = document.getElementById('result');

        fetchBtn.addEventListener('click', async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
            const { name, email, phone } = await response.json();
            result.textContent = `${name}, ${email}, ${phone}`;
        });
    </script>
</body>
</html>

이 예제는 API 데이터(API Data)를 분해한다.


주의할 점 (Cautions)

디스트럭처링(Destructuring)은 값이 없는 경우 undefined를 반환한다. 중첩 구조(Nested Structure)는 가독성(Readability)을 고려한다. 변수 이름(Variable Name) 충돌을 방지한다.


결론 (Conclusion)

디스트럭처링(Destructuring)의 선언, 활용을 학습하며 실습 예제를 통해 알아보았다. 다음 포스팅에서는 스프레드와 레스트 연산자(Spread and Rest Operators)에 대해 작성해볼 예정이다.

저작자표시

'코딩 공부 > 자바스크립트' 카테고리의 다른 글

21. 자바스크립트 심볼 (Javascript Symbol)  (1) 2025.03.04
20. 자바스크립트 스프레드와 레스트 연산자 (Spread and Rest Operators)  (4) 2025.03.04
18. 자바스크립트 템플릿 리터럴  (0) 2025.02.28
17. 자바스크립트 모듈  (0) 2025.02.28
16. 자바스크립트 클래스  (1) 2025.02.27

+ Recent posts

티스토리툴바