1.5.4 구조 분해 할당

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.5.4 구조 분해 할당

구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 값을 분해하여 변수에 쉽게 할당할 수 있도록 하는 ES6의 문법입니다. 이를 통해 코드의 가독성을 높이고, 덜 반복적으로 변수를 정의할 수 있습니다. 특히, 객체와 배열을 다루는 웹 개발에서 매우 유용합니다.

1. 배열의 구조 분해 할당

예를 들어, 배열의 첫 번째와 두 번째 값을 각각 변수에 할당하고 싶다고 가정해 보겠습니다:

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

위의 코드는 배열 fruits에서 첫 번째와 두 번째 값을 각각 firstFruit와 secondFruit라는 변수에 간편하게 할당합니다.

2. 객체의 구조 분해 할당

객체의 구조 분해 할당 또한 비슷하게 사용할 수 있습니다. 예를 들어:

const person = {
  name: '홍길동',
  age: 30,
  profession: '개발자'
};
const { name, age } = person;
console.log(name); // '홍길동'
console.log(age);  // 30

위 코드에서는 객체 person으로부터 이름과 나이를 추출하여 각각 name과 age라는 변수에 할당합니다.

3. 실습

이제 HTML, CSS, JavaScript를 사용하여 작은 웹 애플리케이션을 만들어보겠습니다. 예를 들어, 사용자의 정보를 입력받고 이를 구조 분해 할당으로 처리하여 화면에 출력하는 기능을 구현합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>구조 분해 할당 실습</title>
</head>
<body>
    <h1>사용자 정보 입력</h1>
    <input type="text" id="name" placeholder="이름">
    <input type="number" id="age" placeholder="나이">
    <button id="submit">제출</button>
    <h2>출력 결과:</h2>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

CSS

body { font-family: Arial, sans-serif; }
input { margin: 5px; }
button { padding: 5px 10px; cursor: pointer; }

JavaScript

document.getElementById('submit').addEventListener('click', () => {
    // 입력 값 가져오기
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    
    // 객체 구조 분해 할당
    const userInfo = { name, age };
    const { name: userName, age: userAge } = userInfo;
    
    // 결과 출력
    document.getElementById('result').innerText = `이름: ${userName}, 나이: ${userAge}`;
});

이 코드는 사용자가 입력한 이름과 나이를 객체에 저장하고, 이를 구조 분해 할당을 통해 변수에 할당하여 결과를 화면에 출력합니다.

4. 응용

구조 분해 할당을 이용하면 데이터를 쉽게 관리하고, 짧고 명확한 코드를 작성하게 됩니다. 다음과 같은 기능을 추가하여 응용해 보세요:

입력값 검증 기능을 추가하여 값이 없거나 올바르지 않을 경우 경고 메시지를 표시하기
입력폼을 여러 사용자에게서 받을 수 있도록 확장하여 배열로 관리하기

5. 정리

구조 분해 할당은 배열과 객체의 값을 쉽게 추출하여 변수에 쓸 수 있도록 도와주는 유용한 문법입니다. 이를 통해 더 간결하고 가독성이 높은 코드를 작성할 수 있으며, 실제 웹 개발에서 매우 자주 사용됩니다. 다음 시간에는 비동기 프로그래밍을 다뤄보도록 하겠습니다.

실습 과제

구조 분해 할당을 사용하여 배열과 객체의 값을 출력하는 함수를 만들어 보세요.
여러 사용자의 정보를 입력받아 배열로 관리하고 출력하는 프로그램을 만들어 보세요.

1.5.4 구조 분해 할당

1.5.4 구조 분해 할당

1. 배열의 구조 분해 할당

2. 객체의 구조 분해 할당

3. 실습

HTML

CSS

JavaScript

4. 응용

5. 정리

실습 과제

댓글 0